Vue指令学习看这篇就够了

Vue指令及其使用详解

指令：使用"v-*" 开头的语法，遵循标签属性的语法，写在开始标签中，常用的指令如下

指令名称	作用
v-text	更新元素的文本内容
v-html	更新元素的Innerhtml
v-show	显示或隐藏元素
v-if	条件显示
v-else	条件显示
v-else-if	条件显示
v-for	多次渲染函数或模板
v-on	绑定事件监听器
v-bind	动态的绑定一个或多个特性到表达式
v-model	在表单控件或组件上创建双向绑定
v-pre	跳过此节点和子节点的编译过程
v-cloak	隐藏未变异的额Mustache标签，直到实例准备完毕
v-once	只渲染元素或组件一次，之后不再更新

1、解决双括号闪现问题：

（1）v-text：在标签中添加v-text指令，在指令中填写变量，可以解决双括号闪现问题，但是当存在中文时，必须要分开来写，比较麻烦，代码繁杂：

<p v-text="msg"></p>
<!--当含有中文时-->
姓名：<span v-text="student.name"></span>；年龄：<span v-text="student.age"></span>

（2）v-cloak：在标签中添加v-cloak指令，然后在style中使用[v-cloak]选中，来进行设置（一般在style标签设置为：[v-cloak] {display: none;}），可以解决双括号闪现问题，这是常用的方法（可以直接在父元素上面设置一个即可，前提是父元素绑定了Vue）：

<p v-cloak>{{msg}}，学生姓名：{{student.name}}</p>

（3）v-html：用于处理超文本插入渲染问题，可以将指令中的变量直接渲染在页面上，没有双大括号闪现问题

<p>用户输入文本显示：<span v-html="text"></span></p>

vue中text：

text:"<span style='color: red'>富文本编辑</span><p>普通文本</p>"

（4）v-pre：转义双大括号为普通文本 ：

<p v-pre>{{文本}}</p>

会直接将{{文本}}显示在页面上

2、v-bind

v-bind用于元素属性的绑定，它的绑定数据是单向的，由VM——>V，在使用时可以缩写为：":属性名"

(1)a标签href的绑定：

<a v-bind:href="mylink">百度一下</a>
<button type="button" @click="handleClick_1">切换链接</button>

Vue中的部分代码：

//data中
mylink:"http://www.baidu.com",
//methods中
 handleClick_1(){
			this.mylink = 'http://www.y.qq.com';
		}

（2）img标签src属性的绑定，在vue中图片使用绝对路径或者使用模块导入

<img v-bind:src="myimg">

Vue中的部分代码：

//模块导入方式：
import cat from '../img/timg (5).jpg';
//data中
myimg:cat,
//绝对路径方式（在html中直接使用src属性引入图片地址也要使用绝对路径）
myimg:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1538862364,2112322146&fm=26&gp=0.jpg';

（3）绑定class

• 绑定class后还可以再为元素设置一个class属性：

   <div :class="myclass2" class="fangkuai">color</div>
  

• 可以使用大括号来设置数据绑定

  <!--fk/st是boolean类型的数值-->
  <div :class="{fangkuai:fk,static:st,active:!st}">color</div>
  

（4）绑定style属性

• 可以使用大括号来分别为绑定的style属性的各个项赋值

<div :style="{width:100+'px',height:myht,backgroundColor:bgcolor}"></div>
<!--在data中设置myht和bgcolor即可-->

• 可以直接使用变量来为绑定的style属性的各个项赋值

<div :style="styleObj"></div>

Vue的data中代码：

styleObj:{
			width:200+'px',
		    height:"100px",
			backgroundColor:"red",
            //如果这里要使用背景图片，也要使用绝对路径或者模块引入
			//backgroundSize:"100% 100%"
		}

3、v-on

v-on用于绑定事件监听器，常缩写为一个@符号，写为："@事件名称"

例如，绑定点击事件：

<button type="button" @click="handleClick">点击切换</button>

绑定事件后，需要在vue实例化对象中的methods属性(对象)中去写这个方法：

let vm = new Vue({
    el:'#app',
    data:{},
    methods:{
        handleClick(){}
    }
})

4、v-model

v-model用于双向数据绑定，形成用户与后台的数据交互，常用于表单验证、购物车等场景，只要设置了v-model，都要在data中设置初始值

（1）v-model绑定文本框：默认绑定的是input事件，获取的是value的值，当在data中设置默认值时会设置在value属性上面，将inmput事件改为change事件使用lazy方法：

​ v-model.lazy

<!--label标签的for属性后填写input标签的id名可以实现点击label让input标签聚焦-->
<label for="user">用户名：</label>
<input type="text" v-model="username" id="user"/>
<!--用于显示value值-->
<p>{{username}}</p>

（2）v-model绑定单选框：单选框绑定的事件是checked，获取的属性是value，因此要想获取用户选中的值，需要将v-model设置成一样，并且name属性也要设置为一样的

性别：
<input type="radio" name="sex" v-model="sex" value="man"/>男
<input type="radio" name="sex" v-model="sex" value="woman"/>女
<p>{{sex}}</p>

（3）v-model绑定复选框：

• v-model值设置不同时，获取到的是checked的值，绑定的事件是checked

<input type="checkbox" name="hobby" v-model="hobby1" value="book"/>看书
<input type="checkbox" name="hobby" v-model="hobby2" value="ball"/>球
<input type="checkbox" name="hobby" v-model="hobby3" value="travel"/>旅行
<input type="checkbox" name="hobby" v-model="hobby4" value="code"/>代码

每选中一个都会在得到checked的值，但是在复选框中不推荐使用这种方法，一般都是将v-model的值设置为相同

• v-model值设置相同时，绑定的是checked事件，但是获取的值是value，在初始化时，用一个空数组来初始化，每当选中一个时，Vue会自动将对应的value值放入数组，当不选中时，会将它的value值移出数组

<input type="checkbox" name="hobby" v-model="hobby" value="book"/>看书
<input type="checkbox" name="hobby" v-model="hobby" value="ball"/>球
<input type="checkbox" name="hobby" v-model="hobby" value="travel"/>旅行
<input type="checkbox" name="hobby" v-model="hobby" value="code"/>代码

在data中：hobby:[]------初始化