VUE常见的指令
vue学习——vue的指令
- vue的基本使用
-
- 1、打开的调试器
- 2、VUE的两个特性
- 3、指令
-
- 3.1 内容渲染指令——用于辅助开发者**渲染DOM元素的文本内容**
-
- 3.1.1 v-text的使用方法
- 3.1.2 所以不想覆盖的话，我们想到了第二种方式 {{ }} 插值表达式
- 3.1.3 由于{{}}和v-text都不能显示html标签的内容，所以我们用v-html来表示
- 3.1.4 总结
- 3.2 属性绑定指令
- 3.3 事件绑定指令
-
- 3.3.1 定义
- 3.3.2 v-on: 指定可以简写为@
- 3.3.3 vue常用的一些事件指令
- 3.3.4 事件对象
-
- 1. 事件对象没有传递参数
- 2. 事件对象有传递参数
- 3.3.5 事件修饰符
- 3.3.6 按键修饰符
- 3.4 双向绑定指令
-
- 3.4.1 定义
- 3.4.2 v-model指令
- 3.4.3 v-model的修饰符
- 3.5 条件渲染指令
-
- 3.5.1 定义
- 3.5.2 v-if可以和v-else配合使用
- 3.6 列表渲染指令
-
- 3.6.1 定义
- 3.6.2 强调v-for循环中key值的注意点
vue的基本使用
使用vue的步骤
- 创建vue的实例
- 指定vue控制的区域
具体的属性意义如下图：
1、打开的调试器
这里会发现，root其实是el所指定的区域，理解为root是根节点
2、VUE的两个特性
- 数据驱动试图：
- 数据的变化会驱动视图自动更新
- 好处：程序员只管把数据维护好，那么页面结构会被vue自动渲染出来
- 双向数据绑定
在网页中，from表单负责采集数据，Ajax负责提交数据
- js数据的变化，会被自动渲染到页面上
- 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中
注意：数据驱动视图和双向数据绑定的底层原理时MVVM（mode数据源，view视图，ViewModel就是vue的实例）
3、指令
指令是为vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构
1、vue中的指令按照不同的途径分为6大类
①内容渲染指令
②属性绑定指令
③事件绑定指令
④双向绑定指令
⑤条件渲染指令
⑥列表渲染指令
3.1 内容渲染指令——用于辅助开发者渲染DOM元素的文本内容
最常用的内容渲染指令有如下3个：
- v-text
- {{ }}
- v-html
3.1.1 v-text的使用方法
<p v-text="username">p>
<p v-text = "gender">性别p>
v-text 的缺点:会覆盖元素内部原有的内容！
3.1.2 所以不想覆盖的话，我们想到了第二种方式 {{ }} 插值表达式
<p>姓名:{{username}}p>
<p>性别:{{gender}}p>
当我们试图用{{}}和v-text来实现含有标签的内容，发现不能显示出标签效果
<p v-text="info">p>
<p>{{info}}p>
3.1.3 由于{{}}和v-text都不能显示html标签的内容，所以我们用v-html来表示
<p v-html="info">p>
3.1.4 总结
- v-text：它的缺点是会覆盖元素内容原有的内容
- {{ }}插值表达式：使用较多的方法，但是他不会覆盖原有的内容
- v-html：由于v-text和{{}}都不能把带有标签的字符串渲染成真正的HTML内容
3.2 属性绑定指令
{{ }}只能用在内容节点上，而不能用在属性标签上，所以如果需要为元素属性动态绑定属性值，则需要用到v-bind属性绑定指令，用法如下：
vue规定可以把v-bind:简写为:
<div class="app">
<input type="text" v-bind:placeholder="tips">
<hr>
<img :src="photo" alt="tupian" style="width: 200px;">
div>
<script>
const vm = new Vue({
el:'.app',
data:{
tips:'请输入用户名',
photo:'http://static.runoob.com/images/demo/demo2.jpg'
}
})
script>
补充
- 在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算。比如一些加减法、三元运算、函数
在使用v-bind属性绑定期间，如果绑定的内容需要进行动态拼接，则字符串外面应该包裹单引号，例如：3.3 事件绑定指令
3.3.1 定义
vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，语法格式如下：
<div id="app"> <p>count：的值是:{{count}}p> <button v-on:click="add(3)">+1button> <button v-on:click="sub">-1button> div> <script> //创建vue的实例对象 const vm = new Vue({ //el属性是固定的写法，表示当前vm实例要控制页面上的那个区域，接受的值是一个选择器 el:"#app", //data对象就是要渲染到页面上的数据 data:{ count:0 }, //methods作用是定义事件的处理函数 methods:{ //也可以简写为add(){} add:function (n) { //this 完全可以替代vm，this指向的就是this console.log(vm === this); //在绑定事件参数时可以加小括号 vm.count += n; }, sub(){ vm.count --; } } }); script>3.3.2 v-on: 指定可以简写为@
3.3.3 vue常用的一些事件指令
- v-on:click 或 @click
- v-on:input 或 @input
- v-on:keyup 或 @keyup
3.3.4 事件对象
1. 事件对象没有传递参数
这里注意到button v-on:click="add"的add不加（），且没有传参
<body> <div id="app"> <p>count：的值是:{{count}}p> <button v-on:click="add">+1button> div> <script> //创建vue的实例对象 const vm = new Vue({ //el属性是固定的写法，表示当前vm实例要控制页面上的那个区域，接受的值是一个选择器 el:"#app", //data对象就是要渲染到页面上的数据 data:{ count:0 }, //methods作用是定义事件的处理函数 methods:{ //也可以简写为add(){} add(e) { this.count ++; console.log(e); //判断this.count的奇偶 if(this.count % 2 === 0){ //偶数 e.target.style.backgroundColor = 'red'; }else{ //奇数 e.target.style.backgroundColor = ''; } } } }); script> body>2. 事件对象有传递参数
这里注意到button v-on:click="add()"的add加（），并且传参，vue提供了内置变量，名字叫做$event，它就是原生DOM 的事件对象e
<body> <div id="app"> <p>count：的值是:{{count}}p> <button v-on:click="add(1,$event)">+1button> div> <script> //创建vue的实例对象 const vm = new Vue({ //el属性是固定的写法，表示当前vm实例要控制页面上的那个区域，接受的值是一个选择器 el:"#app", //data对象就是要渲染到页面上的数据 data:{ count:0 }, //methods作用是定义事件的处理函数 methods:{ //也可以简写为add(){} add(n,e) { this.count ++; //判断this.count的奇偶 if(this.count % 2 === 0){ //偶数 e.target.style.backgroundColor = 'red'; }else{ //奇数 e.target.style.backgroundColor = ''; } } } }); script> body>3.3.5 事件修饰符
在事件处理函数中调用event.preventDefault()或者event.stopPropagation()是非常常见的需求。因此vue提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下：
- prevent——阻止默认行为（比如阻止a链接的跳转，阻止表单的提交等）
- .stop——阻止事件冒泡
- .capture——以捕获模式触发当前的事件处理函数
- .once——绑定的事件只触发1次
- .self——只有在event.target是当前元素自身时触发事件处理函数
<body> <div id="app"> <a href="http://www.baidu.com" @click.prevent="show">跳转到百度首页a> <div style="height: 150px;background-color: #42b983;padding-left: 100px;line-height: 150px;" @click="divHandler"> <button @click.stop="btnHandler">按钮button> div> div> <script> //创建vue的实例对象 const vm = new Vue({ el:"#app", data:{ }, methods:{ show(e){ //阻止冒泡和默认的事件——js的方法：e.preventDefault() //vue中用@click.prevent（绑定事件同时阻止发生默认事件），这就是vue的默认修饰符. console.log('点击了a链接'); }, divHandler(e){ console.log('divHandler'); }, btnHandler(e){ console.log('btnHandler'); }, } }); script> body>3.3.6 按键修饰符
在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符。
<input @keyup.enter = "submit"> <input @keyup.esc = "clearInput">3.4 双向绑定指令
3.4.1 定义
vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。
3.4.2 v-model指令
- input输入框
- type=“radio”
- type=“checkbox”
- type=“xxxx”
- textarea
- select
- 只有表单元素才能使用v-model
- v-model是双向绑定指令，即能修改数据源（data）的数据，而v-bind是单向绑定指令，不能修改数据源的信息
<body> <div id="app"> <p>用户名字是：{{ username}}p> <input type="text" v-model="username"> <hr> <input type="text" :value="username"> <hr> <select v-model="city"> <option value="">请选择指定的城市option> <option value="1">北京option> <option value="2">广州option> <option value="3">上海option> select> div> <script> const vm = new Vue({ el:"#app", data:{ username:'zhangsan', city:'' }, }); script> body>3.4.3 v-model的修饰符
- 关于v-model.number/trim/lazy的使用
<body> <div id="app"> <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1 + n2 }}span> <hr> <input type="text" v-model.trim="username"> <button @click="showName">获取用户名button> <hr> <input type="text" v-model.lazy="username"> div> <script> const vm = new Vue({ el:"#app", data:{ username:'zhangsan', n1:1, n2:2, }, methods:{ showName(){ console.log(`用户名是："${this.username}"`) } } }) script> body>3.5 条件渲染指令
3.5.1 定义
条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是：
- v-if
- v-show
<div id="app"> <p v-if="networkState === 200">请求成功 --- 被v-if控制p> <p v-show="networkState === 200">请求成功 --- 被v-show 控制p> div>（面试题）
- v-show适合频繁切换元素的显示状态，性能更好；而v-if则适用于：如果刚进入页面的时候，某些元素默认不需要被展示，而后期这个元素很可能也不需要被展示出来，此时v-if的性能更好。
- v-if的原理是：每次动态创建或者移出元素，实现元素的显示和隐藏
- v-show的原理是：动态为元素添加或者移出display:none样式，来实现元素的显示和隐藏
flag为false时，v-if就不存在了，而v-show则显示display：none
3.5.2 v-if可以和v-else配合使用
<div v-if="type === 'A'">优秀div> <div v-else-if="type === 'B'">良好div> <div v-else-if="type === 'C'">一般div> <div v-else>差div>3.6 列表渲染指令
3.6.1 定义
vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来渲染一个列表结构。v-for指令需要使用item in items形式的特殊语法，其中：
- items是待循环的数组
- item是被循环的每一项
v-for指令还支持一个可选的第二个参数，即当前项的索引。语法格式为（item,index）in items。
注意：v-for指令中的item项和index索引都是形参，可以根据需要进行重命名。例如（user,i）in userlist3.6.2 强调v-for循环中key值的注意点
- key的注意事项
①key的值只能是字符串或数字类型
②key的值必须具有唯一性（即key的值不能重复）
③建议把数据项id属性的值作为key的值（因为id属性的值具有唯一性）
④使用index的值当作key的值没有任何意义（因为index的值不具有唯一性）
⑤官方建议：只要用到v-for指令，那么一定要绑定一个：key属性（即提升性能、又防止列表状态紊乱）<body> <div id="app"> <table class="table table-bordered table-hover table-striped"> <thead> <th>索引th> <th>IDth> <th>姓名th> thead> <tbody> <tr v-for="(item,index) in list" :key="item.id"> <td>{{ index }}td> <td>{{ item.id }}td> <td>{{ item.name }}td> tr> tbody> table> div> <script> //创建vue的实例对象 const vm = new Vue({ el:"#app", data:{ list:[ //列表数据 {id : 1 ,name : 'zs'}, {id : 2 ,name : 'ls'}, {id : 3 ,name : 'ww'} ], }, }); script> body>资料整理来自于：黑马程序员
