vue常用的指令（Vue基础）

Vue基础——常用指令
指令：
Vue的指令是以v-开头的，作用于页面中的元素，所以需要将指令绑定与元素中，从而达到给绑定的元素添加行为的目的。

​ 语法：<元素标签 v-指令 = “表达式”>

1.v-text和v-html
​ v-text 和v-html作用相近，都是更新元素的中的内容，可以理解为innertext和innerHTML，而不能一味的滥用这两个指令 ，如果需要更新的只是部分的元素则应该使用的是双大括号的插值：{ {value}}。
v-html 会解析标签，而v-text怎不会
另外 v-html 的特性会出现安全性问题，所以在官方文档中也明确指出“只在可信内容上使用 v-html，永不用在用户提交的内容上。”

2. v-show
   ​ 根据表达式的值来确定元素的display值，从而达到元素的显示和隐藏。

3. v-if
   v-if 的作用与v-show大体一致，都是根据表达式的布尔值来添加或者删除元素。
   补充：v-show 是通过改变display值来改变元素的显示和隐藏。它是依旧在html中的。而v-if则直接将元素移出了页面中，所以不会再标签中看到所选的元素。

4. v-else-if 和v-else
   这两个指令的含义不必过多的解释，值得注意的是这两个指令不能够单一的使用，这意味着这两个指令前必须有v-else-if或者v-else 指令。所以通常v-if ，v-else-if,v-else 会搭配使用。

5. v-for
   v-for 用来迭代渲染，达到循环的操作的目的，可以迭代数组，数组对象，对象或是数字。

6. v-on
   v-on 是用来绑定事件的监听器，表达式可以是一个方法也可以是内联语句。有许多修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

也可以进行缩写

1
可以缩写成

<button @click=“methods”>
1
7. v-model
它可以实现在表单控件或者组件上创建双向绑定。

这就实现了data中value和input中数据的绑定，使得数据在动态的变化在span中体现出来。

8. v-bind
   用来绑定属性， 属性后面的等号指向数据，它可以简写为 :class, :href

1
也可以进行缩写

1
动态添加样式
【对象】
html :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"

html :style="{color:(index==0?conFontColor:’#000’)}"

【数组】
html :style="[baseStyles, overridingStyles]"
html :style="[{color:(index==0?conFontColor:’#000’)},{fontSize:‘20px’}]"

【三目运算符