Vue指令

Vue常用指令

这篇总结主要介绍Vue指令

内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容

1.v-text

缺点：会覆盖元素内部原有的内容
不会解析标签

<div id="root">
        <p v-text = 'name'></p>
        <div v-text = 'sex'>性别</div>
</div>
<script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                name:'我是大孩',
                sex:'女'
            }
        })
</script>

2.v-html

会覆盖元素内部原有内容
会解析标签

<div id="root">
        <p v-html="name"></p>
        <div v-html='sex'>性别</div>
</div>
<script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                name:`<strong>我是大孩</strong>`,
                sex:'女'
            }
        })
</script>

3.插值语法

{{表达式或者数据}}
不会覆盖元素内部原有内容
不会解析标签

<div id="root">
       <p>{{name}}</p>
       <div>性别{{sex}}</div>
</div>
   <script>
       Vue.config.productionTip = false
       new Vue ({
           el:'#root',
           data:{
               name:'我是大孩',
               sex:'女'
           }
       })
   </script>

属性绑定指令

1.v-bind指令

单向数据绑定
语法：v-bind:需要绑定的属性 = "data配置项中的数据名 / 表达式"
简写： :需要绑定的属性

<div id="root">
        <input type="text" :placeholder="tips"> //简写
        <input type="text" v-bind:placeholder="tips">
</div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                tips:'请输入'
            }
        })
    </script>

事件绑定指令

1.需要定义在methods配置对象中

2. v-on:click 点击事件

v-on:click="事件处理函数名(实参)"
简写：@click = "事件处理函数名(实参)"
可以进行传参

<div id="root">
    <p>值为{{count}}</p>
    //传参  实参  事件对象$event
    <button @click="add($event,1)">+1</button>  
    <button v-on:click="jian">-1</button>
    //@符简写
    <input type="text" :placeholder="tips" @keydown="ok">  
        <a href="http://www.baidu.com" 
        target="_blank" @click.prevent="tz"
        >百度</a> //  事件修饰符 @click.prevent
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue ({
        el:'#root',
        data:{
            count:0,
            tips:'zzz'
        },
        methods: {
            add(e,n){ //传参 形参
                this.count += n
e.target.style.color = this.count % 2 === 0?'red':''  
            },
            jian(){
                this.count -= 1
            },
            ok(){
                this.tips = 'hhh'
                console.log('hhh')
            }
        },
    })
</script>

3.其他事件

v-on:input 输入框事件
v-on:keydown 键盘事件
v-on:keyup 键盘事件
v-on:focus 键盘事件
等等
同样可以写成简写 @input @keydown等

4.事件对象

实参必须使用 $event

绑定事件时，未加小括号的话会默认有e这个时间对象

5.事件修饰符

语法：$click.事件修饰符 = 'methods配置对象的方法名'

1.prevent：阻止默认事件，例如网址的跳转
2.stop：阻止事件冒泡
3.once：事件只触发一次

6.按键修饰符

在监听键盘事件时，经常需要判断详细的按键，为案件相关的事件添加案件修饰符
例如：@keyup.enter = 'methods配置对象的方法名'
@keydown.esc = 'methods配置对象的方法名'

<div id="root">
    <input type="text" @keyup.esc="ku">   //按键修饰符
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue ({
        el:'#root',
        data:{
            count:0,
            tips:'zzz'
        },
        methods: {
            ku(e) {   //事件对象
                e.target.value = ''
            }
        },
    })

双向数据绑定指令

1.v-model指令

双向数据绑定
语法：v-model
只能和表单元素一起使用，例如：input元素，textarea元素，select元素

2.v-model专用修饰符

语法：v-model.修饰符 = 'data配置项中的数据名 / 表达式'

lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

<div id="root">
        <p>姓名：{{user}}</p>
        //trim去掉前后空格
        <input type="text" v-model.trim="user"> 
            //model中的value值与下面的value进行匹配
        <select v-model="ok"> 
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">深圳</option>
        </select>
          //number只允许输入数字
        <input type="text" v-model.number="sum1">+
        <input type="text" v-model.number="sum2">=
        <span>{{sum1+sum2}}</span>
        <button @click="us">获取用户名</button>
        <br>
        <hr>
            //lazy，在表单失去焦点后再进行数据更新
        <input type="text" v-model.lazy="okk">
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                user:'hhh',
                ok:'1',
                sum1:1,
                sum2:2,
               okk:'傻逼'
            },
            methods: {
                us() {
                    console.log(`"${this.user}"`)
                }
            },
        })
    </script>

3.注意点

在与表单元素进行双向数据绑定时，如果type值为text，则v-model则会自动绑定value值

如果type值为单选框或则是多选框时，则v-model则自动绑定的是checked值

条件渲染指令

条件渲染指令用于控制DOM的显示与隐藏

1.v-if

语法：v-if='判断条件'

原理：每次动态创建或移除元素节点，实现元素的显示与隐藏
如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时使用v-if性能更好

2.v-show

语法：v-show='判断条件'

原理：动态为元素添加或移除display:none样式，来实现元素的显示与隐藏
如果频繁的切换元素的显示状态，用v-show性能会更好

3.注意

开发中，绝大多数情况，不用考虑性能问题，直接使用v-if就好了

<div id="root">
        <p v-if="flag">{{name}}</p>  //彻底抹除节点
        <p v-show="flag">{{name}}</p>  //只是将节点隐藏了
        <button @click="vi">隐藏元素</button>
        
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                name:'周江号',
                flag:true
            },
            methods:{
                vi() {
                    this.flag = this.flag ? false :true
                }
            }
        })
    </script>

4.v-if配套指令

v-else-if='判断条件'
v-else 后面不用接判断条件

<div id="root">
       成绩：<input type="text" v-model="flags">
       <div v-if="flags==='A'">优秀</div>
       <div v-else-if="flags==='B'">良好</div>
       <div v-else-if="flags==='C'">一般</div>
       <div v-else>差</div>
   </div>
   <script>
       Vue.config.productionTip = false
       new Vue ({
           el:'#root',
           data:{
               flags:'A'
           }
       })

5.注意

v-if可以和v-else-if，v-else一起使用，但要求结构不能被打断

v-if='n===1',
<div>@</div>
v-else-if ='n===2'
中间插入了一个@符号，结构被打断了，因此，v-else-if不会执行

列表渲染指令

1.v-for

用来辅助开发者基于一个数组来循环渲染一个列表结构

语法：v-for='数组元素 in 数组'
数组元素指的是数组每一项
数组指的是存储在data配置项中的数组

<div id="root">
        <ul v-for="(item,index) in arr" :key="index">
            <li>
                <span>{{item.name}}</span> 
                <span>{{item.subject}}</span> 
                <span>{{item.score}}</span>
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                arr: [
            { name: '古丽扎娜', subject: '语文', score: 20 },
            { name: '佟丽丫丫', subject: '数学', score: 99 },
            { name: '马尔扎哈', subject: '英语', score: 70 },
                ]
            }
        })
    </script>

2.key

1.官方建议，只要用到v-for指令，那么一定要绑定一个 :key 属性
2.key值的类型只能是数字/字符串，其他的值是不能当作key值的
3.key的值必须是唯一值
4.建议把数据项id属性的值作为key值(因为id属性的值具有唯一性)
5.使用index值作为key值是没有任何意义的，因为index具有不确定性

3.扩展

它不仅仅只能用于数组绑定，还能用于对象，字符串，指定次数

对象：
语法:v-for="(value,key) in 对象名" :key="key"
value是data数据所配置的对象的属性值
key是data数据所配置的对象的属性名

字符串：
语法:v-for="(char,index) in 字符串名" :key="index"

指定次数：
语法:v-for="(number,index) in 次数(几次)" :key="index"

其他内置指令

v-cloak指令（没有值）

1.本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性
2.使用css的[v-cloak]{display:none;}配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-once指令 （没有值）

1.v-once所在的节点在初次动态渲染后，就视为静态内容了
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

v-pre指令 （没有值）

1.跳过其所在节点的编译过程
2.可利用它跳过：没有使用指令语法，没有使用插值语法的节点，会加快编译