vue指令和修饰符

什么是指令

指令就是在Vue中，使用 v- 前缀的html特殊属性

指令就是用来扩展在Vue中标签的功能

语法：写在开标前 v-指令 = " 指令值 "

v-model指令

就是在表单元素中进行双向绑定

可以用于不同的表单元素

{

input文本类型：绑定的是当前元素的value属性，并自动监听input事件

复选框：自动监听change事件，并设置true或者false

下拉列表：自动监听change事件，并且得到对应的value

}

<div id = "demoDiv">
    <input type="text" v-model="inputval">
    <h1>{{inputval}}</h1>
    //h1标签的内容会和input标签里的内容同步改变
</div>

Vue.createApp({
    data(){
        return{
            inputval:""        
        }    
    }
}).mount("#demoDiv")

文本和复选框的双向绑定

<div id = "demoDiv">
    <input type="checkbox" v-model="inputval">
    <h1>{{inputval}}</h1>//初始显示为“你好”，当复选框为选中状态后变为“true”，未选中是“false”
    //给复选框绑定任何数据  再勾选的时候  就会修改成布尔值
</div>

Vue.createApp({
    data(){
        return{
            inputval:"你好"        
        }    
    }
}).mount("#demoDiv")

什么是双向绑定

视图变模型变：Dom监听（Dom Listener）就是view页面改变---》 dom监听---》通知模型改变

模型变视图变：数据绑定 data数据改变---》数据绑定触发 ---》页面视图改变

双向绑定原理

在Vue中是基于数据劫持或数据代理，配合发布订阅者模式完成的

数据劫持/数据代理：

Vue2 在Vue的data在初始化的时候就会吧里面的数据使用Object.defineProperty()监听起来，但任何一个方面（视图或者模型）改变了，他就会通知另外一方进行改变

Vue3 中使用的是Proxy来完成

发布订阅者模式

1 对 多的关系

v-show指令

使用css方式控制元素的显示和隐藏 true就是显示，false就是隐藏

<div id="demoDiv">
    <h1 v-show="bool">登录</h1>
    <h1 v-show="booltwo">欢迎</h1>
    //绑定的属性值为true的显示，为false的隐藏
</div>

Vue.createApp({
    data(){
        return{
            bool:false,
            booltwo:true        
        }    
    }
}).mount("#demoDiv")

v-on指令

在Vue中进行dom事件绑定的

语法：

1.传统写法 v-on:事件名不加on onclick ----》v-on:click="函数"

2.简写 @时间名不加on onclick ----》@click="函数"

事件处理：

1.调用函数方式

2.内联事件方式

{{n}}

函数要写在methods中

<div id="demo">
    <button v-on:click="fun()">点我</button>
    //点击button后在执行fun()里面的代码
    //在控制台输出"再函数中使用data数据需要this.变量名"和data里的text的值：“你好”
</div>

Vue.createApp({
    data(){
        return{
            text:"你好"        
        }    
    },
    //函数写在methods里面
    methods:{
        fun(){
            console.log("在函数中使用data的数据需要this.变量名",this.text)        
        }    
    }
}).mount("#demo")

v-for指令

把data数据遍历展示

语法：v-for="(遍历的值，遍历的下标）in 你要遍历的数据"

<div id="demo">
    <ul>
        <li v-for="(v,i) in arr">{{v}}-------{{i}}</li>
    </ul>
    <table>
        <tr v-for="(v,i) in arrObj">
            <td>{{v.name}}</td>
            <td>{{v.age}}</td>
        </tr>
    </table>
</div> 

Vue.createApp({
    data(){
        return{
            arr:["VN","CM","NOC","QWE"],
            arrObj:[
                {name:"one",age:111},  
                {name:"two",age:222},
                {name:"three",age:333},
                {name:"four",age:444}         
            ]        
        }    
    }
}).mount("#demo")

结果：

 

v-bind指令

给html属性插变量

<div id="demo">
    //传统写法
    <a v-bind:href="ahref">{{text}}</a>
    //简写
    <a :href="ahref">{{text}}</a>
</div>

Vue.createApp({
    data(){
        return {
            text:"点我去百度"，
            ahref:"http://www.baidu.com"        
        }    
    }
}).mount("#demo")

v-if全家桶

作用：对页面的dom元素进行添加和移除 （true添加 false移除）

v-show与v-if的区别：

1.代码不同

2.v-show是通过css的方式进行显示和隐藏，v-if是对dom元素的添加和移除

3.v-show在初始化可能更消耗性能，v-if则相对好一点

4.v-show在频繁切换的时候性能更好，v-if更浪费

v-if 和 v-else

<div id="demo">
    <h1 v-if="ck">如果ck的值为true，显示我</h1>

    <h1 v-else>如果ck的值为false，显示我</h1>
</div>

Vue.createApp({
    data(){
        return{
            ck:true        
        }    
    }
}).mount("#demo")

v-else-if

<div id="demo">
    <select v-model="select">
    <!--与data里的select属性进行双向绑定-->
        <option value="吃">吃</option>
        <option value="喝">喝</option>
        <option value="睡">睡</option>
        <option value="跑">跑</option>
        <!--option的value值是发给后台的,标签间的内容是展示给用户的-->
    </select>
    <h1 v-if="select=='吃'">吃</h1>
    <!--如果select的值为‘吃’，则我显示-->
    <h1 v-else-if="select=='喝'">喝</h1>
    <!--如果select的值为‘喝’，则我显示-->
    <h1 v-else-if="select=='睡'">睡</h1>
    <!--如果select的值为‘睡’，则我显示-->
    <h1 v-else-if="select=='跑'">跑</h1>
    <!--如果select的值为‘跑’，则我显示-->
    <h1 v-else>你什么都没选</h1>
    <!--如果前面的条件都不满足，则我显示-->
</div>

Vue.createApp({
    data(){
        return{
            select:""        
        }    
    }
}).mount("#demo")

v-html指令

作用：把字符串标签渲染到页面

<div id="demo">
    <div v-html="text">
    
    </div>
</div>

Vue.createApp({
    data(){
        return{
            text:"<h2>我是通过v-html渲染出来的标签</h2>"                    
        }    
    }
}).mount("#demo")

结果：

 

v-text指令

作用：向页面插入变量（作用与{{ }}相同）

<div id="demoDiv">
    <h1>{{text}}</h1>
    <h1 v-text="text"></h1>
</div>

Vue.createApp({
    data(){
       return {
           text:"我是初始值"
       }
    },

}).mount("#demoDiv")

结果：

 

v-once指令

作用：一次性插值

<div id="demoDiv">
        <input type="text" v-model="text">
        <h1>{{text}}</h1>
        
        <h1 v-once>{{text}}</h1>
        <!--页面初次加载以后，不管绑定的值有没有改变，v-once里的值都不再变化-->

    </div>

Vue.createApp({
            data(){
                return {
                    text:"我是初始值"
                }
            },
            methods:{

            }
        }).mount("#demoDiv")

事件对象与修饰符

事件对象 —— $event

谁出发这个事件，事件对象就指向谁。

事件对象中包含触发这个事件元素相关信息

<div id="demoDiv"> <input type="text" @keydown="fun($event)"> </div> 

<script> Vue.createApp({ data(){ return { } }, methods:{ fun(e){ if(e.keyCode==13){ //当点击的那个按钮的keyCod值为13时执行 console.log("aaaaa"); } } } }).mount("#demoDiv") </script>

修饰符

就是对事件的细节进行约束

按键修饰符

.up .down .left .right .ctrl .enter .delete .space .esc ......

<div id="demoDiv"> <input type="text" @keydown.enter="fun()"> 
<!--只有在点击回车键时触发--> </div> 

<script> 
Vue.createApp({ 
    data(){ 
        return { 

        } 
    }, 
    methods:{ 
        fun(){ 
            console.log("aaaaaa"); 
        }
    } 
}).mount("#demoDiv") 
</script>

事件修饰符

.stop -- 阻止事件冒泡

.prevent -- 阻止事件默认行为

.captrue -- 设置捕获

.self -- 只触发自己范围的事件，不包含子元素

.once -- 事件只触发一次

v-model修饰符

.trim 去除输入框收尾的空格

<div id="demoDiv"> 
用户名:<input type="text" v-model.trim="text"> 
<button @click="fun()">点我</button> 
</div> 
<script> 

Vue.createApp({ 
    data(){ 
        return { 
            text:"" 
        } 
    },
    methods:{ 
        fun(){ 
            console.log(this.text); 
        } 
    } 
}).mount("#demoDiv") 
</script>

.number修饰符

把输入框接收的数据转成number类型

<div id="demoDiv"> 
第一位:<input type="text" v-model.number="text"> 
第2位:<input type="text" v-model.number="textb"> 
<button @click="fun()">点我</button> 
</div> 
<script> 
    Vue.createApp({ 
        data(){ 
            return { 
                text:"", 
                textb:"" 
            } 
        }, 
        methods:{ 
            fun(){ 
                console.log(this.text+this.textb); 
            } 
        } 
}).mount("#demoDiv") 
</script>

.lazy修饰符

默认情况下，只要给输入框绑定了v-model那么修改内容的时候，边修改内容会跟着变

但是有时候，我们想修改完成后内容再变，当change事件的时候才会修改内容

<div id="demoDiv"> 
<input type="text" v-model.lazy="text"> 
<h1>{{text}}</h1> 
</div> 
<script> 
    Vue.createApp({ 
        data(){ 
            return { 
                text:"" 
            } 
        } 
}).mount("#demoDiv") 
</script>