vue 点击li 中的img 怎么不冒泡

一.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模板）语法：

展示内容：

表达式

★{{ 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>

其他指令cn.vuejs.org

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

浏览器渲染

！重要议题------数据响应式

深入响应式原理 — Vue.jscn.vuejs.org

Object.defineProperty()developer.mozilla.org

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中有数组怎么办？：

变更方法cn.vuejs.org

（2）进阶属性

computed-计算属性（会根据依赖是否变化来缓存）

★如果依赖的属性没有变化就不会重新计算

★getter/setter默认不会做缓存，Vue做了特殊处理

列表展示：

watch-侦听属性（当数据变化时执行一个函数）

watchcn.vuejs.org

deep:true是干什么的？

★object.a变了如果让object也变了，设置deep：true

★object.a变了如果让object没有变，设置deep：false

★deep的意思是监听object的时候是否往深了看

directive-自定义指令属性

自定义指令函数cn.vuejs.org

声明一个局部指令

声明一个全局指令

mixins-混入属性（混入就是复制）

示例：

main.js

app.vue

components/Child1.vue

mixins/log.js

浏览器渲染：

选项智能合并等更多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

浏览器渲染