一.Vue實例

內存圖：

1.把Vue的實例命名為vm，vm對象封裝了對視圖的所有操作包括數據讀寫、事件綁定、DOM更新
2.vm的構造函數是Vue，按照ES6的說法vm所屬的類是Vue
3.options是new Vue的參數一般稱為選項或構造選項

1.options里面有什么

• 英文文檔搜options中文文檔搜選項即可得相關所有文檔
• options的五類屬性

★數據：data,props,propsData,computed,methods,watch
★Dom：el，template,render,renderError
★生命周期鉤子：beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed,errorCaptured
★資源：directives,filters,components
★組合：parent,mixins,extends,provide,inject
★其他

template（HTML模板）語法：

1. 展示內容：

表達式

★{{ object.a }}表達式

★{{ n+1 }}可以寫任何運算符

★{{ fn(n) }}可以調用函數

★如果值為undefined或者null就不顯示

★另一種寫法為<div v-text="表達式"></div>

HTML內容

★假設data.x的值為<strong>hi</strong>

★<div v-html="data.x"></div>即可顯示粗體的hi

我就想展示{{ n }}

★<div v-pre>{{ n }}</div>

★v-pre不會對模板進行編譯

2.綁定屬性：

★綁定src：<img v-bind:src="x"/>

★v-bind：簡寫為：<img :src="x"/>

★綁定對象：
<div :style="{border:'1px solid red',height:100}"</div>
//注意這里把'100px’寫成100

3.綁定事件：

★v-on:事件名

<button v-on:click="add">+1</button>//點擊之后，Vue會運行add()
<button v-on:click="xxx(1)">xxx</button>//點擊之后，Vue會運行xxx(1)
<button v-on:click="n+=1">xxx</button>//點擊之后，Vue會運行n+=1
//即發現函數就加括號調用之，否則直接運行代碼

★縮寫

<button @click="add">+1</button>//正常人都用縮寫

4.條件判斷：

★if...else

<div v-if="x>0">x大于0</div>
<div v-else-if="x===0">x等于0</div>
<div v-else>x小于0</div>

5.循環：

★for(value,key) in 對象或數組

<ul>
<li v-for="(u,index) in users" :key="index">
索引：{{index}} 值{{u.name}}
</li>
</ul>
<ul>
<li v-for="(value, name) in obj" :key="name">
屬性名：{{name}} 屬性值：{{value}}
</li>
</ul>

6.顯示、隱藏

★v-show

<div v-show="n%2===0"> n 是偶數</div>

★近似等于

<div :style="{display:n%2===0?'block':'none'}
"> n是偶數 </div>

7.指令

★什么是指令

<div v-text="x"></div>
<div v-html="x"></div>
//以v-開頭的就是指令

★語法

v-指令名:參數=值，如v-on:click-prevent

8.修飾符

★有些指令支持修飾符

@click.stop=="add"//表示阻止事件傳播/冒泡
@click.prevent=="add"//表示阻止默認動作
@click.stop.prevent=="add"//同時表示兩種意思

★一共有多少修飾符呢

v-on支持的有.{keycode|keyAlias}.stop.prevent.capture.self.once.passive.native
快捷鍵相關：.ctrl.alt.shift.meta.exect
鼠標相關：.left.right.middle
v-bind支持的有：.prop.camel.sync
v-model支持的有：.lazy.number.trim

★

總結：

★Vue模板主要特點有

使用XML語法（不是HTML）
使用{{}}插入表達式
使用v-bind,v-on,v-html等指令操作DOM
使用v-if，v-for等指令實現條件判斷與循環

（1）入門屬性

• el-掛載點

可用$mount代替

• data-內部數據（支持對象和函數優先用函數）

main.js

對象的方式

函數的方式

瀏覽器

• methods-方法（事件處理函數或者普通函數）

main.js

瀏覽器

• components-Vue組件（注意大小寫,組件內的data必須以函數的形式顯示）

main.js

demo.vue的內容

瀏覽器渲染

或者

main.js

瀏覽器渲染

• 四個鉤子（created,mounted,updated,destroyed）

★created-實例出現在內存中

★mounted-實例出現在頁面中

★updated-實例更新了

★destroyed-實例從頁面和內存中消亡了

main.js

Demo.vue

瀏覽器渲染

• props-外部數據屬性

main.js

message="n"(傳入字符串)

:message="n"(傳入this.n數據)

:fn("add")傳入this.add函數

Demo.vue

瀏覽器渲染

！重要議題------數據響應式

1. Object.defineProperty

★可以給屬性添加value

★可以給對象添加getter/setter

★getter和setter用于對屬性的讀寫和監控

2.代理（設計模式）

★對myData對象的屬性進行讀寫，全權由另一個vm負責

★vm就是myData的代理（類比房東租房）

★比如myData.n不用非要用vm.n來操作myData.n

3.vm=new Vue({data:myData})

★會讓vm成為myData的代理（proxy）

★會對myData的所有屬性進行監控

當data不存在object.b時的解決方法：

★把key聲明好

★使用Vue.set或者this.$set

data中有數組怎么辦？：

（2）進階屬性

• computed-計算屬性（會根據依賴是否變化來緩存）

★如果依賴的屬性沒有變化就不會重新計算

★getter/setter默認不會做緩存，Vue做了特殊處理

列表展示：

• watch-偵聽屬性（當數據變化時執行一個函數）

deep:true是干什么的？

★object.a變了如果讓object也變了，設置deep：true

★object.a變了如果讓object沒有變，設置deep：false

★deep的意思是監聽object的時候是否往深了看

• directive-自定義指令屬性

聲明一個局部指令

聲明一個全局指令

• mixins-混入屬性（混入就是復制）

示例：

main.js

app.vue

components/Child1.vue

mixins/log.js

瀏覽器渲染：

• extends-繼承屬性

MyVue.js

/

Child1.vue

• provide和inject-提供和注入

main.js

App.vue

<style>
.app {font-family: "Avenir", Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
.app.theme-blue button {background: blue;color: white;
}
.app.theme-blue {color: darkblue;
}.app.theme-red button {background: red;color: white;
}
.app.theme-red {color: darkred;
}
.app.fontSize-normal {font-size: 16px;
}
.app button {font-size: inherit;
}
.app.fontSize-small {font-size: 12px;
}
.app.fontSize-big {font-size: 20px;
}
</style>

Child1.vue/Child2.vue...

ChangeThemeButton.vue

瀏覽器渲染