Vue常用内置指令（不涉及组件使用）

v-text

作用：更新元素的 textContent (innerText)。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

示例：

<div id="app">
    <p>{{ name }}</p>
    <p v-text="name"></p>
     <!-- 上面两个P标签实现的效果一模一样，但如果是更新部分的话需要用{{name}} -->
     <p>我的名字：{{ name }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let vm = new Vue({
    el: "#app",
    data:{
        name:"浩气长存"
    }
});

效果：

v-html

作用：更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。(v-html和v-text基本相同但v-html会渲染dom节点)
示例：

<div id="app">
	<span v-text="str"></span> v-text
    <br>
    <span v-html="str"></span> v-html
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>

let vm = new Vue({
    el: "#app",
    data:{
        str: "<button>按钮</button>"
    }
});
</script>

效果：

v-show

作用：根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。（v-show不能 配合 template 去使用）

示例：判断用户是否登录

<div id="app">
    <button v-show="isLogined">登录</button> <!--显示-->
    <button v-show="!isLogined">退出登录</button><!--隐藏-->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>

let vm = new Vue({
    el: "#app",
    //判断用户是否登录
    data:{
        isLogined:true,
    }
});
</script>

效果：

v-if

根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。（当和 v-if 一起使用时，v-for 的优先级比 v-if 更高， v-if 可以配合 template 去使用）

示例：也用判断用户是否登录

<div id="app">
    <button v-if="isLogined">登录</button> <!--显示-->
    <button v-if="!isLogined">退出登录</button><!--隐藏-->
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>

let vm = new Vue({
    el: "#app",
    //判断用户是否登录
    data:{
        isLogined:true,
    }
});

效果：

看起来和v-show效果一样但是在切换时元素及它的数据绑定被销毁并重建而v-show不是。
v-if：

v-show：

v-else与v-else-if

作用：v-else和v-else-if 这两个指令都需要与v-if使用。
v-else：为 v-if 或者 v-else-if 添加“else 块”。（前一兄弟元素必须有 v-if 或 v-else-if）
v-else-if：表示 v-if 的 “else if 块”。可以链式调用。（前一兄弟元素必须有 v-if 或 v-else-if。）
v-if 、v-else和v-else-if 这三个都是互斥的关系，有你没我有我没你。
示例：根据成绩显示优秀、良好、及格、差

<div id="app">
<p>豪哥：{{ score[0]}}分
    <span v-if="score[0] >= 90">优秀}</span>
    <span v-else-if="score[0] >= 80">良好</span>
    <span v-else-if="score[0] >= 60">及格</span>
    <span v-else>差</span>
</p>
<p>苇哥：{{ score[1]}}分
    <span v-if="score[1] >= 90">优秀</span>
    <span v-else-if="score[1] >= 80">良好</span>
    <span v-else-if="score[1] >= 60">及格</span>
    <span v-else>差</span>
</p> 
<p>小红：{{ score[2]}}分
    <span v-if="score[2] >= 90">优秀</span>
    <span v-else-if="score[2] >= 80">良好</span>
    <span v-else-if="score[2] >= 60">及格</span>
    <span v-else>差</span>
</p>
<p>小明：{{ score[3]}}分
    <span v-if="score[3] >= 90">优秀</span>
    <span v-else-if="score[3] >= 80">良好</span>
    <span v-else-if="score[3] >= 60">及格</span>
    <span v-else>差</span>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let vm = new Vue({
    el: "#app",
    data:{
      score:[100,88,70,59]
    }

});
</script>

效果：

v-for

作用：v-for主要基于源数据多次渲染元素或模板块。
格式

	
	一、循环数组
	v-for="item in xxx"                       v-for="(item, index)in xxx"
    item 循环的每一项						  item 循环的每一项
    in 固定写法								  index 循环的下标
    xxx 要循环的数据							  in 固定写法
     										  xxx 要循环的数据
二、循环对象
	v-for="item in xxx"                       v-for="(value,key, index)in xxx"
    item 循环的xxx对象的value				  value value值
     in 固定写法								  key   key值
   	xxx 要循环的数据							  index 循环的下标
    							  			  in 固定写法
     										  xxx 要循环的数据
三、循环字符串和数字
v-for="item in '今天天气真好'"  
v-for="item in 3"  => v-for="item in [1,2,3]"

从 2.6 起，v-for 也可以在实现了可迭代协议的值上使用，包括原生的 Map 和 Set。
不过应该注意的是 Vue 2.x 目前并不支持可响应的 Map 和 Set 值，所以无法自动探测变更。

示例：渲染商品

<div id="app">
<ul>
    <li v-for="item in goods">{{ item }}</li>
</ul>

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>

let vm = new Vue({
    el: "#app",
    data:{
        goods:["苹果手机","华为手机","小米手机"]
    }
});
</script>

效果：

v-on

作用：用于事件绑定。用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
缩写：@

      语法：
        v-on:xxxx="yyyy"
          xxxx    事件名字，比如 click、dblclick、mousedown、mouseup....
          yyyy    
                  1. 事件处理函数。这个函数需要定义在 Vue 实例的 methods 选项中
                    v-on:click="fn1"
                  2. 内联语句
                    v-on:click="fn1()"  加了() 不会立即执行
                    
             对象语法 (2.4.0+) 
			v-on="{ mousedown: doThis, mouseup: doThat }" 
       
          @ 就是 v-on 的简写方式
			@xxxx="yyyy"
      事件处理函数会自动接收到一个event（事件对象）。但如果是内联的写法的化就不会。
      如果希望内联写法时也要收到 event 。需要手动将 $event 给传递下去
  

示例:tab选项卡切换

<style>
.active{ background: red;}
</style>
<body>
<div id="app">
    <div>
    	//:class => v-bind:class
        <button v-for="(item,index)  in tab" @click="i = index" :class="{active : i == index}">{{ item.title }}</button>
    </div>
    //:src => v-bind:src
    <img  :src="tab[i].img"  width="300px" height="300px">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let vm = new Vue({
    el: "#app",
    data:{
        tab:[
            {title:'第一张图片',img:'/img/timg01.jpg'},
            {title:'第二张图片',img:'/img/timg02.jpg'},
            {title:'第三张图片',img:'/img/timg03.jpg'}
        ],
        i:0
    }
});
</script>
</body>

效果

v-on 修饰符

v-on的修饰符，又叫做事件修饰符
语法
v-on:eventName.修饰符1.修饰符2.修饰符3=“Handler”
@eventName.修饰符1.修饰符2.修饰符3=“Handler”
事件修饰符：
1. stop 阻止事件冒泡
2. prevent 阻止默认行为
3. capture 让事件行为是一种捕获行为
4. self 只当事件触发在绑定事件的元素本身上时才触发
5. {keyCode} | {keyAlias} 特定的键盘事件修饰符
6. keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用 keyCode attribute 也是允许的：
v-on:keyup.13
keyAlias 有哪些内置的呢：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
还可以通过 Vue.config.keyCodes 来自定义键码别名
Vue.config.keyCodes.f1 = 13
6. once 只绑定一次事件
7. left 绑定鼠标左键
8. right 绑定鼠标右键
9. middle 绑定鼠标滚轮键
10. passive 以 { passive: true } 模式添加侦听器
系统修饰符
11. ctrl
12. shift
13. alt
13. meta windows上就是windows图标的那个。mac上 command 键
14. exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

参考vue官方事件修饰符

v-bind

作用：v-bind 指令将数据绑定到元素的属性上，比如 title、id、class、style

  语法：
    v-bind:xxxx="yyyy"
      xxxx - 属性名
      yyyy - 数据
	以上可以简写
    :xxxx="yyyy"  v-bind: 可以简写成 :
   v-bind 对象写法
      v-bind="{ name: '张三', age: 18 }" => v-bind:name="'张三'" v-bind:age="18"
      v-bind="{ 'name': name, age: age }" => v-bind:name="name" v-bind:age="age"

示例：

<div id="app">
    <p :title="name">{{ name }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let vm = new Vue({
    el: "#app",
    data:{
        name: '浩气长存'
    }
});
</script>

效果：

v-bind:class

vue 中 class 属性是个特殊的属性，使用v-bind绑定时可以有不同的写法
一、v-bind:class="‘hello’" 直接使用字符串 hello 做为类名
二、v-bind:class=“hello” 使用 hello 这个数据的值作为类名
三、对象 v-bind:class="{ key1: value1, key2: value2 }"
根据 value1 这个数据是否为真值，来控制是否要加上 key1 这个类名
根据 value2 这个数据是否为真值，来控制是否要加上 key2 这个类名
四、数组 v-bind:class="[ value1, ‘value2’, value3, { key: value } ]"
使用 value1 这个数据的值来作为其中一个类名
使用 value2 这个字符串直接作为其中一个类名
使用 value3 这个数据的值来作为其中一个类名
根据 value 这个数据的值是否为真值，来控制是否要加上 key 这个类名
示例：

<div id="app">
    <p :class="{active : index == 1}"></p>
    <p :class="[{active : index != 1}, {title : key}]"></p>
    <p :class="[value1,value2,value3]"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let vm = new Vue({
    el: "#app",
    data:{
        index:1,
        key:true,
        value1: "box1",
        value2: "box2",
        value3: "box3",
    }
});
</script>

效果：

v-bind:style

vue 中 style 属性也是特殊的一个，通过 v-bind 绑定时有不同的语法使用
一、v-bind:style=“color: red” 这种是有问题的
二、对象 v-bind:style="{ key1: value1, key2: value2, key3: ‘value3’ }"
key1、key2、key3 都是css的属性名
value1 的值作为 key1 这个css属性名的值
value2 的值作为 key2 这个css属性名的值
value3 这个字符串会作为 key3 这个css属性名的值
css属性名如果是短横线写法，需要转换成驼峰写法：
font-size => fontSize
三、数组 v-bind:style="[value1, value2, { color: myColor }]"
使用 value1 这个数据来控制 value1: {} 这时正确的， value1: “fontSize: ‘20px’” 这是错的
使用 value2 这个数据来控制
使用 myColor 这个数据来控制 color 属性的值

示例：

<div id="app">
     <!-- <p :style="color: red">p1</p> 错误写法 -->
     <p :style="{ color: myColor, fontSize: mySize, fontWeight: 'bold' }">
       p2
     </p>
     <p :style="[ value1, value2, { color: myColor } ]">p3</p>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
   <script>
     var vm = new Vue({
       el: "#app",
       data: {
         myColor: "red",
         mySize: "20px",
         value1: {
           fontSize: "20px",
         },
         value2: {
           fontWeight: "bold",
         },
       },
     });
   </script>

效果：

v-model

作用：在表单控件或者组件上创建双向绑定。
用于：

				<input>
				<select>
				<textarea>
				components

示例：在输入input框时可以把输入的名字渲染到我的名字里。（不用等失去焦点后）

效果：

原生js的写法

<div id="app">
    <p id="myName">我的名字:</p>
    <input id="ipt" type="text" placeholder="请输入你的名字">
</div>
<script>
//原生js
document.querySelector('#ipt').oninput = (e) => {
    let value = e.target.value;
    document.querySelector('#myName').innerHTML = `我的名字：${value}`;
}
</script>

使用vue的v-model指令

<div id="app">
    <h1>双向数据绑定</h1>
    <p id="myName" >我的名字：{{ name }}</p>
    <input v-model="name" id="ipt" type="text" placeholder="请输入你的名字">
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let vm = new Vue({
    el: "#app",
    data:{
        name:''
    }
});
</script>

修饰符：
.lazy - 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步。（也就是在失去焦点 或者 按下回车键时才更新）

<div id="app">
    <p id="myName" >我的名字：{{ name1 }}     失去焦点</p>
    <p id="myName" >我的名字：{{ name2 }}     未失去焦点</p>
    <input v-model.lazy="name1" id="ipt" type="text" placeholder="请输入你的名字">
    <input v-model.lazy="name2" id="ipt" type="text" placeholder="请输入你的名字">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>

let vm = new Vue({
    el: "#app",
    data:{
        name1:'',
        name2:''
    }
});
</script>

.number -html元素输入的内容都是字符串类型的，即使输入的是数字但它的类型还是字符串 用 .number修饰符可以把字符串转为有效的数字。

<div id="app">
    <p id="myName" >我的年龄：{{ age1 + typeof age1 }}     用了.number</p>
    <p id="myName" >我的年龄：{{ age2 + typeof age2 }}     没用.number</p>
    <input v-model.number="age1" id="ipt" type="text" placeholder="请输入你的年龄">
    <input v-model="age2" id="ipt" type="text" placeholder="请输入你的年龄">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let vm = new Vue({
    el: "#app",
    data:{
        age1:'',
        age2:''
    }
});
</script>

.trim - 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

<div id="app">
    <p id="myName" >我的名字和名字长度：{{ name1 + name1.length }}     用了trim</p>
    <p id="myName" >我的名字和名字长度：{{ name2 + name2.length }}     没用trim</p>
    <input v-model.trim="name1" id="ipt" type="text" placeholder="请输入你的名字">
    <input v-model="name2" id="ipt" type="text" placeholder="请输入你的名字">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
let vm = new Vue({
    el: "#app",
    data:{
        name1:'',
        name2:''
    }
});

v-model 其实是个语法糖,v-model的真实形态是：
v-model="msg"	 =>   v-bind:value="msg" v-on:change="msg = $event.target.value"

v-pre

作用：
有些时候我们需要在页面上就直接输出 {{ }} 这种格式的字符串，不让 vue 对其做解析的操作。这时，只需要使用上 v-pre 即可
v-pre 没有参数也没有表达式
v-bind:参数=“表达式”

<div id="app">
    <p v-pre>{{ msg }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
	var vm = new Vue({
    	el: "#app"
   	});
</script>

效果：

v-cloak

作用：解决vue 页面闪烁问题
现象描述：有时会在页面上出现插值表达式的语句，例如 {{ msg }} 。然后过一小会就没了

    问题解释：vue 解析页面需要时间
    解决方案：
      一、不使用 插值表达式语法 。改用 v-text 。
      二、 使用 v-cloak 这个指令。（推荐使用）

        1. 将 v-cloak 写在挂载点元素上，它没有参数也没有表达式
        2. 设置 一个全局 css 属性选择器样式。样式代码如下
          [v-cloak] {
            display: none
          }
        v-cloak 的特性：在vue实例化并且解析完成之后会自动删除掉这个属性

用法

<style>
[v-cloak] {display: none;}
</style>
<div id="app" v-cloak><!--直接在挂载点使用并设置css[v-cloak]{display: none}-->
    <p>{{ msg }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
	el: "#app",
    data: {
    	msg: "hello",
    }
});

</script>

v-once

作用：让元素默认绑定数据一次。后续数据更新，页面将不再受影响。没有参数没有表达式。
示例：

<div id="app">
	 <p v-once>{{ msg }}</p>
 </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
var vm = new Vue({
	el: "#app",
	data: {
		msg: "hello",
	},
});
</script>

效果：即使改了数据也不会改变 hello

结尾

参考Vue官方文档
如果文章中有什么不足或者错误的地方欢迎大家留言分享。如果我的文章能帮到你的话那就给我个点赞和关注，谢谢朋友们的支持。