VUE的使用

Vue常用指令

1. {{变量}} : 插值, 让此处的文本内容和变量进行绑定 ,不需要依赖某个标签存在
2. v-text=“变量”: 让元素的文本内容和变量进行绑定, 需要依赖标签
3. v-html=“变量”: 让元素的标签内容和变量进行绑定
4. v-bind:属性名=“变量” , 让元素的某个属性的值和变量进行绑定 , 简写可以把v-bind去掉
5. v-model=“变量”: 让控件的value属性和某个变量进行双向绑定, 双向绑定: 变量会影响页面显示的内容,页面元素的内容改变也会影响变量, 当需要从代码中获取控件的值时使用双向绑定
6. v-on:事件名=“方法”, 绑定元素的事件, 方法需要声明在Vue对象里面的methods属性里面, 简写是@事件名=“方法”

• @click 点击事件
• @change 值改变事件
• @blur 失去焦点事件

Vue指令(续)

1. v-for="(变量,i) in 数组变量"; 让元素的显示数量和数组进行绑定, 同时遍历数组中的每一个对象,变量代表的是数组中的 每一个对象, i代表的是当前遍历的下标
2. v-if=“变量”, 元素的显示状态和变量进行绑定, true显示,false不显示(删除元素)
3. v-else和v-if指令结合使用, 显示状态和v-if的元素取反
4. v-show=“变量”,元素的显示状态和变量进行绑定, true显示,false不显示(通过样式隐藏了元素), 需要元素需要频繁切换显示状态使用v-show的执行效率会高于v-if