Vue 常用指令
扩展了html标签的功能、大部分的指令的值是js的表达式
取代DOM操作
v-text和 v-html
很像innerText和innerHTML
- v-text:更新标签中的内容
- v-text和插值表达式的区别
- v-text 更新整个标签中的内容
- 插值表达式: 更新标签中局部的内容
- v-html:更新标签中的内容/标签
- 可以渲染内容中的HTML标签
- 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
<div id="app"> <!-- v-text指令的值会替换标签内容 --> <p>{{str}}</p> <p v-text="str"></p> <p v-text="str">我是p标签中的内容</p> <p v-text="strhtml">我是p标签中的内容</p> <p v-html="str"></p> <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 --> <p v-html="strhtml">我是p标签中的内容</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { str: 'abc', strhtml: '<span>content</span>' } }); </script> 复制代码
v-if 和 v-show
作用:根据表达式的bool值进行判断是否渲染该元素
<div id="app"> <!-- 如果isShow的值是true ,就显示p标签 --> <p v-if="isShow">我是p标签中的内容</p> <p v-show="isShow">我是p标签中的内容</p> <!-- 如果标签显示与隐藏切换频繁, 就使用v-show v-show本质是通过修改标签的display值 --> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { isShow: false } }); </script> 复制代码
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用
v-show较好；如果在运行时条件很少改变，则使用
v-if较好。
v-on
- 作用:使用
v-on指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。 - 语法: @事件名.修饰符 = "methods中的方法名"
- 注意: $event 可以传形参
<div id="app"> <!-- v-on.xx事件名='当触发xx事件时执行的语句' --> <!-- 执行一段js语句:可以使用data中的属性 --> <button v-on:click="count += 1 ">增加 1</button> <!-- v-on的简写方法 --> <button @click="count += 1">增加 1</button> <!-- 执行一个方法 --> <button @click="add">增加 1</button> <!-- 执行一个方法、这种写法可以传形参 --> <button @click="fn1(count)">执行fn1方法</button> <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event --> <button @click="fn2($event)">执行fn2方法</button> <hr> <!-- 和v-for结合使用 --> <button @click="fn3(index)" v-for="(item, index) in items">执行fn3方法</button> <!-- v-on修饰符 如 once: 只执行一次 --> <button @click.once="fn4">只执行一次</button> <p>上面的按钮被点击了 {{ count }} 次。</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { count: 0, items: ['a', 'b', 'c'] }, methods: { add: function() { this.count += 1; }, fn1: function(count) { console.log(count); console.log('fn1方法被执行'); }, fn2: function(e) { console.log(e); console.log('fn2方法被执行'); }, fn3: function(index) { console.log(index); console.log('fn3方法被执行'); }, fn4: function() { console.log('fn4方法被执行了'); } } }); </script> 复制代码
- 修饰符
.once- 只触发一次回调。.prevent- 调用event.preventDefault()。
简写: @事件名.修饰符 = 'methods中的方法名'
v-for
根据一组数组或对象的选项列表进行渲染。
v-for指令需要使用item in items形式的特殊语法，
items是源数据数组 /对象当要渲染相似的标签结构时用v-for
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染 v-for="元素 in 容器(数组和对象)" v-for="数组中的元素 in data中的数组名" v-for="对象中的属性值 in data中的对象名" --> <!-- 数组 --> <p v-for="item in list">{{item}}</p> <hr> <p v-for="(item,index) in list">{{item}}----{{index}}</p> <!-- (v,i) in 数组 v:数组中的每个元素 i:数组中元素的下标 --> <hr> <!-- 对象 --> <!-- (v,k,i)in 对象 v:值 k:键 i:对象中每对key-value的索引 从0开始 注意: v,k,i是参数名,见名知意即可! --> <p v-for="value in per">{{value}}</p> <hr> <p v-for="(value,key) in per">{{value}}----{{key}}</p> <hr> <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { list: ['a', 'b', 'c'], per: { name: '老王', age: 38, gender: '男' } }, methods: { } }) </script> </body> </html> 复制代码
注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)
<div id="app"> <!-- v-for key属性: 值通常是一个唯一的标识 key是一个可选属性 养成好习惯:建议在写v-for时 设置:key="唯一值" --> <ul> <li v-for="(item,index) in list" :key="index">{{item}}---{{index}}</li> </ul> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#app', data: { list: ['a', 'b', 'c'] }, methods: { } }); </script> 复制代码
v-bind
作用: 可以绑定标签上的任何属性。
绑定src和id属性
<div id="app"> <!-- data中的属性值会替换为标签的属性值 --> <img v-bind:src="src" /> <p v-bind:id="idValue">内容</p> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { src: './logo.png', idValue: 'b' } }); </script> 复制代码
绑定class类名
对象语法和数组语法
对象语法
如果isActive为true，则返回的结果为 <div class="active"></div>
.active { color: red; } 复制代码
<div id="app"> <div v-bind:class="{active: isActive}"> hei </div> <button @click="changeClassName">点击切换类名</button> </div> 复制代码
<script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { isActive: true }, methods: { changeClassName: function() { this.isActive = !this.isActive; } } }); </script> 复制代码
数组语法
渲染的结果 <div class="active text-danger"></div>
<div v-bind:class="[activeClass, dangerClass]"> hei </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { activeClass: 'active', dangerClass: 'text-danger' } }); </script> 复制代码
绑定style
对象语法和数组语法
对象语法
渲染的结果
<div id="app"> <div v-bind:style="{color: redColor, fontSize: font18 + 'px'}"> 文本内容 </div> </div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { redColor: 'red', font18: 18 } }); </script> 复制代码
数组语法
<div v-bind:style="[color, fontSize]">abc</div> <script> var vm = new Vue({ el: '#app', data: { color: { color: 'red' }, fontSize: { 'font-size': '18px' } } }); </script> 复制代码
简化语法
<div v-bind:class="{active: isActive}"> </div> <!-- 可以简化为 :，简化语法更常用 --> <div :class="{active: isActive}"> </div>
