一.Vue實(shí)例

內(nèi)存圖：

1.把Vue的實(shí)例命名為vm，vm對(duì)象封裝了對(duì)視圖的所有操作包括數(shù)據(jù)讀寫(xiě)、事件綁定、DOM更新
2.vm的構(gòu)造函數(shù)是Vue，按照ES6的說(shuō)法vm所屬的類(lèi)是Vue
3.options是new Vue的參數(shù)一般稱(chēng)為選項(xiàng)或構(gòu)造選項(xiàng)

1.options里面有什么

• 英文文檔搜options中文文檔搜選項(xiàng)即可得相關(guān)所有文檔
• options的五類(lèi)屬性

★數(shù)據(jù)：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模板）語(yǔ)法：

展示內(nèi)容：

表達(dá)式

★{{ object.a }}表達(dá)式

★{{ n+1 }}可以寫(xiě)任何運(yùn)算符

★{{ fn(n) }}可以調(diào)用函數(shù)

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

★另一種寫(xiě)法為<div v-text="表達(dá)式"></div>

HTML內(nèi)容

★假設(shè)data.x的值為<strong>hi</strong>

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

我就想展示{{ n }}

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

★v-pre不會(huì)對(duì)模板進(jìn)行編譯

2.綁定屬性：

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

★v-bind：簡(jiǎn)寫(xiě)為：<img :src="x"/>

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

3.綁定事件：

★v-on:事件名

<button v-on:click="add">+1</button>//點(diǎn)擊之后，Vue會(huì)運(yùn)行add() <button v-on:click="xxx(1)">xxx</button>//點(diǎn)擊之后，Vue會(huì)運(yùn)行xxx(1) <button v-on:click="n+=1">xxx</button>//點(diǎn)擊之后，Vue會(huì)運(yùn)行n+=1 //即發(fā)現(xiàn)函數(shù)就加括號(hào)調(diào)用之，否則直接運(yùn)行代碼

★縮寫(xiě)

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

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.循環(huán)：

★for(value,key) in 對(duì)象或數(shù)組

<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 是偶數(shù)</div>

★近似等于

<div :style="{display:n%2===0?'block':'none'} "> n是偶數(shù) </div>其他指令?cn.vuejs.org

7.指令

★什么是指令

<div v-text="x"></div> <div v-html="x"></div> //以v-開(kāi)頭的就是指令

★語(yǔ)法

v-指令名:參數(shù)=值，如v-on:click-prevent

8.修飾符

★有些指令支持修飾符

@click.stop=="add"//表示阻止事件傳播/冒泡 @click.prevent=="add"//表示阻止默認(rèn)動(dòng)作 @click.stop.prevent=="add"//同時(shí)表示兩種意思

★一共有多少修飾符呢

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

★

總結(jié)：

★Vue模板主要特點(diǎn)有

使用XML語(yǔ)法（不是HTML） 使用{{}}插入表達(dá)式 使用v-bind,v-on,v-html等指令操作DOM 使用v-if，v-for等指令實(shí)現(xiàn)條件判斷與循環(huán)

（1）入門(mén)屬性

• el-掛載點(diǎn)

可用$mount代替

• data-內(nèi)部數(shù)據(jù)（支持對(duì)象和函數(shù)優(yōu)先用函數(shù)）

main.js

對(duì)象的方式

函數(shù)的方式

瀏覽器

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

main.js

瀏覽器

• components-Vue組件（注意大小寫(xiě),組件內(nèi)的data必須以函數(shù)的形式顯示）

main.js

demo.vue的內(nèi)容

瀏覽器渲染

或者

main.js

瀏覽器渲染

• 四個(gè)鉤子（created,mounted,updated,destroyed）

★created-實(shí)例出現(xiàn)在內(nèi)存中

★mounted-實(shí)例出現(xiàn)在頁(yè)面中

★updated-實(shí)例更新了

★destroyed-實(shí)例從頁(yè)面和內(nèi)存中消亡了

main.js

Demo.vue

瀏覽器渲染

• props-外部數(shù)據(jù)屬性

main.js

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

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

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

Demo.vue

瀏覽器渲染

！重要議題------數(shù)據(jù)響應(yīng)式

深入響應(yīng)式原理 — Vue.js?cn.vuejs.orgObject.defineProperty()?developer.mozilla.org

Object.defineProperty

★可以給屬性添加value

★可以給對(duì)象添加getter/setter

★getter和setter用于對(duì)屬性的讀寫(xiě)和監(jiān)控

2.代理（設(shè)計(jì)模式）

★對(duì)myData對(duì)象的屬性進(jìn)行讀寫(xiě)，全權(quán)由另一個(gè)vm負(fù)責(zé)

★vm就是myData的代理（類(lèi)比房東租房）

★比如myData.n不用非要用vm.n來(lái)操作myData.n

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

★會(huì)讓vm成為myData的代理（proxy）

★會(huì)對(duì)myData的所有屬性進(jìn)行監(jiān)控

當(dāng)data不存在object.b時(shí)的解決方法：

★把key聲明好

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

data中有數(shù)組怎么辦？：

變更方法?cn.vuejs.org

（2）進(jìn)階屬性

• computed-計(jì)算屬性（會(huì)根據(jù)依賴(lài)是否變化來(lái)緩存）

★如果依賴(lài)的屬性沒(méi)有變化就不會(huì)重新計(jì)算

★getter/setter默認(rèn)不會(huì)做緩存，Vue做了特殊處理

列表展示：

• watch-偵聽(tīng)屬性（當(dāng)數(shù)據(jù)變化時(shí)執(zhí)行一個(gè)函數(shù)）

watch?cn.vuejs.org

deep:true是干什么的？

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

★object.a變了如果讓object沒(méi)有變，設(shè)置deep：false

★deep的意思是監(jiān)聽(tīng)object的時(shí)候是否往深了看

• directive-自定義指令屬性

自定義指令函數(shù)?cn.vuejs.org

聲明一個(gè)局部指令

聲明一個(gè)全局指令

• mixins-混入屬性（混入就是復(fù)制）

示例：

main.js

app.vue

components/Child1.vue

mixins/log.js

瀏覽器渲染：

選項(xiàng)智能合并等更多mixins描述?cn.vuejs.org

• 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

瀏覽器渲染

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue 点击li 中的img 怎么不冒泡_Vue全解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。