Vue 3.x 指令整理

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

//html:

    
 //标签里的内容全部改变
    
学习{{message+"!"}}
 //推荐写法，标签里的内容可部分改变


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

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

//html:

    
 //带链接的“v-html语法”


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

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

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

//html:

    
 //点击
    
 //鼠标移入
    
 //双击


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

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

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

//html:

    
 //传递自定义参数
    
 //事件修饰符
    


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

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

//html:

    
    


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

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

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

//html:

    
v-if语法
    
v-if语法


//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:

    
    
    
        //v-bind可省略


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

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

//html:

    

        
{{index}}{{item}}
        
{{item.name}}
    


//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:

    


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