2、Vue 常用指令
vue的常用指令都是作用在视图上面的，即标签上面的。
2.1、指令介绍
-
指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
-
使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
-
常用指令
2.2、文本插值
-
v-html：把文本解析为 HTML 代码。
格式：
<标签名 v-html="data的变量名"></标签名><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本插值</title> </head> <body> <!-- v-html：把文本解析为 HTML 代码。 备注: 插值表达式,v-text指令 都不能解析html标签(纯文本) --> <div id="div"> <div>{{msg}}</div> <div v-html="msg"></div> <div v-text="msg"></div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ msg:"<h1>Hello Vue</h1>" } }); </script> </html>
2.3、绑定属性
-
v-bind：为 HTML 标签绑定属性值。
格式：
完整格式： <标签名 v-bind:属性名="data变量"></标签名> 说明： v-bind可以省略不写<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>绑定属性</title> <style> .my{ border: 1px solid red; } </style> </head> <body> <div id="div"> <!-- 插值表达式不能写在属性中!!! --> <a href="{{url}}">百度一下 </a> <br> <!-- v-bind：为 HTML 标签绑定属性值 v-bind:属性名="data变量" --> <a v-bind:href="url">百度一下</a> <br> <!-- v-bind 可以省略不写 --> <a :href="url">百度一下</a> <br> <!-- 也可以绑定其他属性 --> <div class="my">我是div</div> <div :class="cls">我是div</div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ url:"http://www.baidu.com", cls:"my" } }); </script> </html>
2.4、条件渲染
-
v-if：条件性的渲染某元素，判定为true时进行渲染,否则不进行渲染。
-
v-else-if：条件性的渲染。
-
v-else：条件性的渲染。
-
格式：
<标签名 v-if="条件表达式">满足条件显示的内容</标签名> <标签名 v-else-if="条件表达式">满足条件显示的内容</标签名> <标签名 v-else>上述条件都不满足执行的内容</标签名>
-
-
v-show：根据条件展示某元素，区别在于切换的是display属性的值。
格式：
<标签名 v-show="data变量名">data变量名为true显示的内容</标签名><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>条件渲染</title> </head> <body> <div id="div"> <!-- 判断num的值，对3取余 余数为0显示div1 余数为1显示div2 否则显示div3 --> <div v-if="num % 3 == 0">div1</div> <div v-else-if="num % 3 == 1">div2</div> <div v-else>div3</div> <div v-show="flag">div4</div> <!-- v-if v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样 v-if 如果条件为false，页面中根本没有这个元素 v-show如果条件为false，页面中有这个元素只不过它的display属性值为none --> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ num:1, flag:false } }); </script> </html>
小结：
v-if v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样
v-if 如果条件为false，页面中根本没有这个元素
v-show如果条件为false，页面中有这个元素只不过它的display属性值为none
2.5、列表渲染
-
v-for：列表渲染，遍历容器的元素或者对象的属性。
格式：
增强for循环：掌握 <标签名 v-for="x in 数组或者对象名"> {{x}} </标签名> 普通for循环：了解 <标签名 v-for="(x,index) in 数组或者对象名"> 元素:{{x}},索引:{{index}} </标签名><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表渲染</title> </head> <body> <div id="div"> <ul> <!-- v-for：列表渲染，遍历容器的元素或者对象的属性。 --> <!-- 1. 类似于增强for循环 a. 遍历数组 names:["张三","李四","王五"] element : 每次遍历出来的元素 names : 被遍历的数组 --> <li v-for="element in names"> {{element}} </li> <!-- b. 遍历对象 student:{ name:"张三", age:23 } --> <li v-for="element in student"> {{element}} </li> <!-- 2. 类似于普通for循环 (元素,索引) in 被遍历的数组 --> <li v-for="(element,index) in names"> 元素:{{element}},索引:{{index}} </li> <li v-for="(element,index) in student"> 元素:{{element}},索引:{{index}} </li> </ul> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el:"#div", data:{ names:["张三","李四","王五"], student:{ name:"张三", age:23 } } }); </script> </html>
2.6、事件绑定
-
v-on：为 HTML 标签绑定事件。
格式：
v-on：为 HTML 标签绑定事件 1. 完整 v-on:事件名="函数调用" 2. 简写 @事件名="函数调用"需求：调用函数修改div的文本内容。
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件绑定</title> </head> <body> <div id="div"> <div>{{name}}</div> <!-- v-on：为 HTML 标签绑定事件 1. 完整 v-on:事件名="函数调用" 2. 简略 @事件名="函数调用" --> <button onclick="change2()">以前_改变div的内容</button> <button v-on:click="change()">单击_改变div的内容</button> <button v-on:dblclick="change()">双击_改变div的内容</button> <button @click="change()">简写_改变div的内容</button> </div> </body> <script src="js/vue.js"></script> <script> let vm = new Vue({ el:"#div", data:{ name:"黑马程序员" }, methods:{ change() { this.name = "传智播客" } } }); function change2() { vm.change() } </script> </html>
2.7、表单绑定
-
表单绑定 v-model：在表单元素上创建双向数据绑定。
-
双向数据绑定 更新data数据，页面中的数据也会更新。(单向) 更新页面数据，data数据也会更新。
-
MVVM模型(Model,View,ViewModel)：是MVC模式的改进版 在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。 将Model和View关联起来的就是ViewModel，它是桥梁。 ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。
-
单向绑定：
1. 数据模型改变 -> 视图会改变 2. 视图改变 不会造成 数据模型改变 -
双向绑定：
1.数据模型改变 -> 视图会改变 2.视图改变 -> 数据模型改变
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单绑定</title>
</head>
<body>
<div id="div">
<form autocomplete="off">
<!--
单向绑定
1. 数据模型改变 -> 视图会改变
2. 视图改变 不会造成 数据模型改变
-->
姓名_单向绑定：<input type="text" name="username" :value="username">
<br>
<!--
双向绑定
1. 数据模型改变 -> 视图会改变
2. 视图改变 -> 数据模型改变
-->
姓名_双向绑定：<input type="text" name="username" v-model="username">
<br>
年龄：<input type="number" name="age" v-model="age">
性别:<input type="text" name="gender" v-model="gender">
</form>
<span>{{age}}</span>
<hr>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#div",
data:{
username:"张三",
age:23,
gender:"男"
}
});
</script>
</html>
2.8、小结
-
指令：是带有v-前缀的特殊属性，不同指令具有不同含义。
-
文本插值 v-html：把文本解析为HTML代码。
-
绑定属性 重点 v-bind：为HTML标签绑定属性值。
完整 v-bind:属性名="data变量"
省略 :属性名="data变量"
-
条件渲染 v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。 v-else：条件性的渲染。 v-else-if：条件性的渲染。 v-show：根据条件展示某元素，区别在于切换的是display属性的值。
-
列表渲染 v-for：列表渲染，遍历容器的元素或者对象的属性。
-
事件绑定 重点 v-on：为HTML标签绑定事件。
完整 v-on:事件名="vue对象中的函数调用"
省略 @事件名="vue对象中的函数调用"
事件名和jq一样，没有on
- 表单绑定 重点 v-model：在表单元素上创建双向数据绑定。
