本地应用Vue指令

本地应用Vue指令

内容绑定、事件绑定（数量加减）

v-test

v-html

v-on基础

显示切换、属性绑定（图片上一张下一张）

v-show

v-if

v-bind

列表循环、表单元素绑定（记事本）

v-for

v- on补充

v-model

---

v-test

设置标签的文本值（textContent）,默认的写法会替换全部内容，使用差值表达式{{}}可以替代指定内容

v-html

作用：设置标签的innerHTML。内容中有html结构会解析为标签。

普通文本，跟v-test没任何差别的。如果内容是html结构，才有区别。v-test指令无论内容是什么，只会解释为文本。

解析文本使用v-test，需要解析html接受使用v-html

v-on基础

作用：为元素绑定事件。例如单击鼠标，双击鼠标，单击回车，鼠标移入等。绑定的方法写在methods中

“v-on:”可以替换成“@”

methods:{doit:function({逻辑})}，doit放到@click=“ ”双引号里面。

*Vue里面不需要考虑如何更改DOM元素。重点更改数据。关键字：“this”访问定义在data中的数据

v-show

作用：根据真假，切换元素的显示隐藏状态。原理是修改元素的display，实现显示隐藏。指令后面的内容，最终都会解析为布尔值。true的时候显示，false的时候隐藏。数据改变后，对应的元素显示状态就会同步更新。

*自己的总结：Vue里面元素的属性也可以做实时判断，如果不满足就是false的。

v-if

作用：根据表达式的真假，切换元素的显示状态。跟v-show非常相似。但本质不一样。本质是通过操纵dom元素来切换显示状态。为false的时候，从dom树中删除的。而v-show则是修改元素的display。

频繁切换的，用v-show。反之用v-if。前者切换的消耗小。

v-bind

作用：为元素绑定属性（比如src、title、class）地址、鼠标悬浮图片名字、类。都是在元素的内部。

完整的写法是 v-bind:属性名。简洁的写法是直接省略v-bind，就是只保留“:属性名”。

需要动态的增删class建议使用对象的方式（二元表达式）

v-for

作用：根据数据生成列表结构，数组经常和v-for结合使用

语法是(item,index) in 数据，最常用的是用ui、li标签。如果li中有内容，就作为模板，根据个数拷贝若干份。

item和index可以结合其他指令一起使用

数据长度的更新会同步到页面上，是响应式的。

文本数组和对象数组：[“北京”,“上海”,“广州”]，[{name:冬瓜},{name:南瓜}]

增减数组里面的内容（写死）：增加方法：增加用push，删除第一个shift。this.vegetables.push({name:西瓜})，this.vegetables.shift()

v-on补充

事件绑定方法写成函数调用的形式，可以传入自定义参数

定义方法时需要定义形参来接收传入的实参

事件的后面跟上.修饰符可以对事件进行限制

.enter可以限制触发的按键为回车

事件修饰符有多种

v-model

作用是便捷的设置和获取表单原色的值，绑定的数据会和表单元素值相关联

双向数据绑定：绑定的数据和表单元素的值相互的。