Vue 3.x 指令整理

1.v-text(设置标签的文本值)

//html:
<div id="app">
    <h2 v-text="message+'!'"></h2> //标签里的内容全部改变
    <h2>学习{{message+"!"}}</h2> //推荐写法，标签里的内容可部分改变
</div>

//js:
const app={
    data(){
        return{
            message:"v-text语法",
        }
    }
}
Vue.createApp(app).mount('#app')

2.v-html(设置标签的innerHTML)

//html:
<div id="app">
    <p v-html="content"></p> //带链接的“v-html语法”
</div>

//js:
const app={
    data(){
        return{
            content:"<a href="#">v-html语法</a>"
        }
    }
}
Vue.createApp(app).mount('#app')

3.v-on(为元素绑定事件)

(1)事件：点击、按下键盘、滚动......

//html:
<div id="app">
    <input type="button" value="事件绑定" v-on:click="todo"></p> //点击
    <input type="button" value="事件绑定" v-on:monseenter="todo"></p> //鼠标移入
    <input type="button" value="事件绑定" v-on:dblclick="todo"></p> //双击
</div>

//js:
const app={
    methods:{
        todo(){
            //事件
        }
    }
}
Vue.createApp(app).mount('#app')

(2)传递自定义参数，事件修饰符

事件修饰符文档：https://cn.vuejs.org/v2/api/#v-on

//html:
<div id="app">
    <input type="button" @click="todo(参数)"></p> //传递自定义参数
    <input type="text" @keyup.enter="sayHi"></p> //事件修饰符
    
</div>

//js:
const app={
    methods:{
        todo(参数){
            //事件
        },
        sayHi(){
        }      
    }
}
Vue.createApp(app).mount('#app')

4.v-show(根据表达值的真假，切换元素的显示与隐藏)

//html:
<div id="app">
    <img src="地址" v-show="isShow">
    <img src="地址" v-show="age>=18">
</div>

//js:
const app={
    data(){
        return{
            isShow:false,
            age:16
        }
    }
}
Vue.createApp(app).mount('#app')

5.v-if(根据表达值的真假，切换元素的显示与隐藏(操纵dom元素))

本质是通过操作dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，为false，从dom树中移除

//html:
<div id="app">
    <p v-if="isShow">v-if语法</p>
    <p v-if="表达式">v-if语法</p>
</div>

//js:
const app={
    data(){
        return{
            isShow:false
        }
    }
}
Vue.createApp(app).mount('#app')

v-show和v-if区别：

v-show:更高的初始渲染开销，适合非常频繁地切换情况

v-if:更高的切换开销，适合运行时条件很少改变的情况 

6.v-bind(设置元素的属性)

图像的地址src、鼠标悬停的文本title、类class......

语法：v-bind:属性名=表达式

//html:
<div id="app">
    <img v-bind:src="imgSrc">
    <img v-bind:title="imgtitle+'!!!'">
    <img v-bind:class="isActive?'active':''">
    <img v-bind:class="{active:isActive}">    //v-bind可省略
</div>

//js:
const app={
    data(){
        return{
            imgSrc:"图片地址",
            imgTitle:"v-bind语法",
            isActive:false
        }
    }
}
Vue.createApp(app).mount('#app')

7.v-for(根据数据生成列表结构)

//html:
<div id="app">
    <ul>
        <li v-for="(item,index) in arr" :title="item">{{index}}{{item}}</li>
        <li v-for="(item,index) in objArr">{{item.name}}</li>
    </ul>
</div>

//js:
const app={
    data(){
        return{
            arr:[1,2,3,4,5],
            objArr:[
                {name:"jack"},
                {name:"rose"}
                ]
        }
    }
}
Vue.createApp(app).mount('#app')

8.v-model(获取和设置表单元素的值（双向数据绑定）)

//html:
<div id="app">
    <input type="text" v-model="message">
</div>

//js:
const app={
    data(){
        return{
            message:"v-model语法"
        }
    }
}
Vue.createApp(app).mount('#app')