學(xué)習(xí)過(guò)程中突發(fā)奇想

• 程序語(yǔ)言都是處理0和1 肯定很多地方是一樣的,那么肯定有書教你怎么寫程序
• 學(xué)習(xí)編程的第一要素是要語(yǔ)文好,語(yǔ)文好理解能力,看文檔才能懂
• vue模板什么意思?
  //HTML 模板應(yīng)該指的是原生HTML涝影，通過(guò) el 掛載到 Vue 實(shí)例上。如在 DOM-模版解析說(shuō)明 章節(jié)提到的 HTML 模板解析的一些限制
  <table>
  <my-row>...</my-row>
  </table>
  //字符串模板,即JavaScript內(nèi)聯(lián)模版字符串
  Vue.component('my-component', {
  template: '<div>A custom component!</div>'
  })
• 根據(jù)上面的知識(shí)點(diǎn)啟發(fā),貌似運(yùn)行環(huán)境遇到不認(rèn)識(shí)的語(yǔ)法,都默認(rèn)把代碼當(dāng)成字符串
• 鏡像就是副本的意思,因?yàn)閲?guó)內(nèi)有墻,所以用npm下載東西有時(shí)候會(huì)太慢甚至掛掉,所以有的大公司會(huì)鏡像也就是copy一模一樣常用的框架和庫(kù)提供給國(guó)內(nèi)互聯(lián)網(wǎng)開發(fā)者

安裝

• 目前最穩(wěn)定2.5.16版本/直接下載并用 <script> 標(biāo)簽引入，Vue 會(huì)被注冊(cè)為一個(gè)全局變量。
  //感覺和之前學(xué)的jQuery一樣,利用命名空間把所有東西封裝進(jìn)一個(gè)全局變量里面,源碼應(yīng)該return一個(gè)對(duì)象出來(lái)讓我們使用,直接Vue.XXXX
• 在開發(fā)環(huán)境下不要使用壓縮版本，不然你就失去了所有常見錯(cuò)誤相關(guān)的警告!
• Vue有兩個(gè)版本下載,開發(fā)和生產(chǎn)
• Vue 提供了配套工具來(lái)開發(fā)單文件組件
• Vue 提供一個(gè)官方命令行工具炒辉，(cli)
  //可快速搭建大型單頁(yè)應(yīng)用。
  //該工具為現(xiàn)代化的前端開發(fā)工作流提供了開箱即用的構(gòu)建配置。
  //只需幾分鐘即可創(chuàng)建并啟動(dòng)一個(gè)帶熱重載拥峦、保存時(shí)靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項(xiàng)目
  //vue與Cli的關(guān)系應(yīng)該和git 與gitbash的關(guān)系類似

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm run dev

• 官方說(shuō)通讀vue指南文檔之后再用cli
• 不同的構(gòu)建版本應(yīng)該就是不同版本的vue的意思....
  //也就是說(shuō)vue團(tuán)隊(duì)不斷優(yōu)化自己的代碼,可能會(huì)導(dǎo)致個(gè)別API的使用方法改變

Vue術(shù)語(yǔ)

• 完整版
  //Vue的完整版本,包括編譯器和運(yùn)行時(shí)的版本
• 編譯器:用來(lái)將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼溪掀。
  //編譯器是代碼,是將模板字符串編譯成JavaScript渲染函數(shù)的代碼,因?yàn)関ue是寫在html 和 JavaScript上面的,vue的語(yǔ)法是不符合JavaScript和html語(yǔ)法的,所以需要編譯器來(lái)把Vue代碼翻譯成符合html,JavaScript代碼,這樣瀏覽器才能理解,并且操作頁(yè)面
• 運(yùn)行時(shí):用來(lái)創(chuàng)建 Vue 實(shí)例事镣、渲染并處理虛擬 DOM 等的代碼【疚福基本上就是除去編譯器的其它一切璃哟。
  //就是區(qū)別于編譯器的Vue代碼,因?yàn)榫幾g器是內(nèi)置在vue這個(gè)框架代碼內(nèi)的,用戶是不用操作的,用戶操作的vue代碼都是運(yùn)行時(shí)
  //簡(jiǎn)單來(lái)說(shuō),vue代碼就是運(yùn)行時(shí),編譯器就是翻譯vue代碼的用JavaScript寫的一個(gè)庫(kù)(一般來(lái)說(shuō)是函數(shù))
• UMD(vue的UMD版本)
  UMD 版本可以通過(guò) <script> 標(biāo)簽直接用在瀏覽器中。jsDelivr CDN 的https://cdn.jsdelivr.net/npm/vue 默認(rèn)文件就是運(yùn)行時(shí) + 編譯器的 UMD 版本 (vue.js)喊递。
  //也就是說(shuō)UMD有完整版和不完整版,他的特點(diǎn)在于可以直接通過(guò)script標(biāo)簽引入
• 除了UMD還有commonJS,ESmodule 一共三個(gè)版本的vue,前者兼容webpack1.0后者兼容webpack2.0

糾正上面的一些理解

// 需要編譯器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要編譯器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

• vue有組件,運(yùn)用組件要把定義標(biāo)簽寫在html上面,那么就需要編譯器了,因?yàn)閔tml頁(yè)面不認(rèn)識(shí)JavaScript代碼啊,因?yàn)関ue是用JavaScript寫的嘛
• 運(yùn)行時(shí),就是指的是不涉及html頁(yè)面上的vue代碼,都叫運(yùn)行時(shí),因?yàn)椴簧婕癶tml就不需要編譯啊...
• 因?yàn)闉g覽器只認(rèn)識(shí).js.css這些后綴的文件,所以你用到vue也是要編譯成JavaScript代碼瀏覽器才能理解,才能渲染頁(yè)面,webpack這種打包工具就是將各種前端開發(fā)中遇到的難題打包處理的工具,不要太爽啊

vue介紹

• 漸進(jìn)式代表的含義是：也就是主張少,只關(guān)注視圖層随闪，便于與第三方庫(kù)或既有項(xiàng)目整合。https://www.zhihu.com/question/51907207
  - 觀看官方視頻的時(shí)候有些疑惑
  1.它說(shuō)這幾年頁(yè)面的代碼大量地從后端搬到了前端,前端代碼也是服務(wù)器響應(yīng)給瀏覽器的啊!!!肯定也是保存在后端服務(wù)器上啊...奇怪了怎么說(shuō)搬到前端?難道是說(shuō)渲染頁(yè)面的工作由后端轉(zhuǎn)移到了前端的意思?

vue介紹視頻

• 視頻里說(shuō),因?yàn)榍岸说陌l(fā)展,大量JavaScript代碼由后端搬到了前端(估計(jì)是在瀏覽器運(yùn)行JavaScript代碼的意思),可是一個(gè)大項(xiàng)目JavaScript代碼成千上萬(wàn)啊,所以會(huì)很亂,框架就是整理這些代碼,管理代碼的工具
  //這也印證了前端代碼這幾年的模塊化之路
• 視頻里面說(shuō):如果你有一個(gè)現(xiàn)成的服務(wù)端應(yīng)用,可以把vue當(dāng)做應(yīng)用中的一部分嵌入其中,帶來(lái)更豐富的交互體驗(yàn)
• vue也可以幫你把更多的業(yè)務(wù)邏輯代碼放到前端來(lái),如果用了vue生態(tài)的話
• vue允許你將一個(gè)頁(yè)面分割成多個(gè)可以復(fù)用的組件,每個(gè)組件都包含了自身的html/css/JavaScript來(lái)渲染頁(yè)面響應(yīng)的地府
  //父組件APP因?yàn)樽銐虼?所以能渲染整個(gè)頁(yè)面,子組件和孫組件比較小,可以引入APP中,供APP使用,積小成多最后撐起整個(gè)頁(yè)面,整個(gè)頁(yè)面都是VUE組件渲染的了
• vue的特點(diǎn):
  //響應(yīng)式雙向綁定,在vue實(shí)例中的data數(shù)據(jù),只要更改都會(huì)自動(dòng)刷新,因?yàn)殡p向綁定,這是vue來(lái)做的,換言之再也不用操作jQuery了
  //當(dāng)然data數(shù)據(jù),不僅僅是顯示字符串那么簡(jiǎn)單,也可以是復(fù)雜的類型,前提是你要在vue實(shí)例里面的data屬性,那里先聲明注冊(cè)
  //貌似data必須是數(shù)組或者對(duì)象或者字符串,不能是函數(shù)
  //其中還可以用create這個(gè)API引入外部數(shù)據(jù)庫(kù)的數(shù)據(jù)

create(){
  fetch('https://XXXX')
      .then(response=>response.json())
      .then(json=>{
    this.products = json.products
  })
}

• 構(gòu)建工具
  //構(gòu)建工具骚勘，我往往會(huì)在前面加「自動(dòng)化」三個(gè)字铐伴，因?yàn)闃?gòu)建工具就是用來(lái)讓我們不再做機(jī)械重復(fù)的事情撮奏，解放我們的雙手的。
• 安裝教程給出了更多安裝 Vue 的方式当宴。請(qǐng)注意我們不推薦新手直接使用 vue-cli畜吊，尤其是在你還不熟悉基于 Node.js 的構(gòu)建工具時(shí)。
  //這是官方原話

Vue介紹

• 聲明式渲染
  //vue.js的核心是一個(gè)系統(tǒng),一個(gè)將數(shù)據(jù)渲染進(jìn)dom,的系統(tǒng)(可以用模板語(yǔ)法來(lái)聲明式操作)
  //dom是一個(gè)JavaScript對(duì)象,一個(gè)根據(jù)html結(jié)構(gòu)產(chǎn)生了相應(yīng)節(jié)點(diǎn)(可操作的JavaScript對(duì)象)的對(duì)象,這個(gè)對(duì)象封裝了很多可以操作這些節(jié)點(diǎn)對(duì)象的函數(shù)(方法),可以說(shuō)頁(yè)面的展示離不開dom,dom可以操作html,可以修改html節(jié)點(diǎn),文本,樣式,所以Vue要把頁(yè)面的數(shù)據(jù)交給dom,由dom來(lái)渲染頁(yè)面
  //不僅如此,Vue還做到了極致,因?yàn)镈OM是根據(jù)DOM渲染樹來(lái)渲染頁(yè)面的,而頁(yè)面的代碼加載是有順序的,而且加載到哪里,頁(yè)面就渲染到哪里;Vue不是直接交數(shù)據(jù)給DOM,而是先交給虛擬DOM,讓虛擬DOM計(jì)算最終樣式,才把最終樣式交給真的DOM來(lái)渲染頁(yè)面
  //所以Dom有文本和特性這些概念,dom文本實(shí)際上就是某個(gè)標(biāo)簽里面的文本內(nèi)容,dom特性其實(shí)就是某個(gè)節(jié)點(diǎn)的特性,或者說(shuō)是某個(gè)html標(biāo)簽的特性
  //沒有vue的時(shí)候,我們用jQuery來(lái)做特效,需要用命令式的代碼來(lái)操作DOM;現(xiàn)vue幫你操作dom,不用親自寫dom相關(guān)的代碼,但是vue又不會(huì)干預(yù)你想親自操作dom,這就是Vue聲明式代碼的好處
• v-for 指令可以綁定數(shù)組的數(shù)據(jù)來(lái)渲染
  //很明顯,用v-for的數(shù)據(jù)必須是一個(gè)數(shù)組,而且還可以親自操作 app4.todos.push({ text: '新項(xiàng)目' })户矢，在列表最后添加了一個(gè)新項(xiàng)目玲献。
• 模板是將一個(gè)事物的結(jié)構(gòu)規(guī)律予以固定化、標(biāo)準(zhǔn)化的成果梯浪，它體現(xiàn)的是結(jié)構(gòu)形式的標(biāo)準(zhǔn)化,簡(jiǎn)單來(lái)說(shuō)就是一種格式
• Vue應(yīng)用的意思就是一個(gè)頁(yè)面,對(duì)應(yīng)SPA單頁(yè)面應(yīng)用,也就是說(shuō)一個(gè)頁(yè)面就是一個(gè)應(yīng)用
• 注意只有v-Module的數(shù)據(jù)才是雙向綁定,其他只算是響應(yīng)式,這里面是有區(qū)別的

組件化應(yīng)用構(gòu)建

• 組件系統(tǒng)是 Vue 的另一個(gè)重要概念捌年，因?yàn)樗且环N抽象，允許我們使用小型挂洛、獨(dú)立和通忱裨ぃ可復(fù)用的組件構(gòu)建大型應(yīng)用。
• 在 Vue 里虏劲，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè) Vue 實(shí)例托酸。
  //組件就是一個(gè)vue實(shí)例,一個(gè)擁有預(yù)定義選項(xiàng)的vue實(shí)例,使用組件必須在vue注冊(cè)
• 終于搞清楚了,模板指的是組件模板,和組件相關(guān)的vue語(yǔ)法 就是模板語(yǔ)法,不管在html頁(yè)面里還是JavaScript頁(yè)面里,只要和組件模板相關(guān)的語(yǔ)法都是模板語(yǔ)法

// 定義名為 todo-item 的新組件
Vue.component('todo-item', {
  template: '<li>這是個(gè)待辦項(xiàng)</li>'
})

現(xiàn)在你可以用它構(gòu)建另一個(gè)組件模板：
<ol>
  <!-- 創(chuàng)建一個(gè) todo-item 組件的實(shí)例 -->
  <todo-item></todo-item>
</ol>

但是這樣會(huì)為每個(gè)待辦項(xiàng)渲染同樣的文本，這看起來(lái)并不炫酷伙单。我們應(yīng)該能從父作用域?qū)?shù)據(jù)傳到子組件才對(duì)获高。讓我們來(lái)修改一下組件的定義，使之能夠接受一個(gè) prop：

Vue.component('todo-item', {
  // todo-item 組件現(xiàn)在接受一個(gè)
  // "prop"吻育，類似于一個(gè)自定義特性念秧。
  // 這個(gè) prop 名為 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

現(xiàn)在布疼，我們可以使用 v-bind 指令將待辦項(xiàng)傳到循環(huán)輸出的每個(gè)組件中

<div id="app-7">
  <ol>
    <!--
      現(xiàn)在我們?yōu)槊總€(gè) todo-item 提供 todo 對(duì)象
      todo 對(duì)象是變量摊趾，即其內(nèi)容可以是動(dòng)態(tài)的。
      我們也需要為每個(gè)組件提供一個(gè)“key”游两，稍后再
      作詳細(xì)解釋砾层。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '隨便其它什么人吃的東西' }
    ]
  }
})

總結(jié)

• Vue的實(shí)例就是開發(fā)SPA中的單頁(yè)面應(yīng)用,當(dāng)然也可以是多頁(yè)面應(yīng)用,簡(jiǎn)單來(lái)說(shuō)就是Vue實(shí)例綁定一個(gè)頁(yè)面的body,頁(yè)面變成了一個(gè)Vue實(shí)例
• 根據(jù)Vue官方視頻的說(shuō)法,webapp是由多個(gè)組件組成的,所以Vue實(shí)例這個(gè)頁(yè)面應(yīng)用也有很多組件組成的,用法就是Vue.component來(lái)注冊(cè),然后在頁(yè)面上寫上組件的模板就行了
• 其中vue的實(shí)例(當(dāng)前頁(yè)面app)的data就用來(lái)存總數(shù)據(jù)的,它可以給子組件使用,而子組件(vue.compenent聲明的所有子組件都可以用props這個(gè)屬性來(lái)接受父組件傳的數(shù)據(jù),)
  //也可以說(shuō)props是子組件的data,只不過(guò)這是父親那邊傳過(guò)來(lái)的
• 最后如果想使用父親的data 方法是在組件模板中, 用模板指令來(lái)建立橋梁 讓子組件的props和父組件的data變量產(chǎn)生關(guān)聯(lián)