vue3.0入门（二）

指令

#id2{   // css部分
    font-size: 24px;
    color: green;
}

v-bind:href="myUrl" v-bind:id="myId"  // 等同于：href="www.baidu.com" id="id2"
v-on:blur="myBlur"

Vue.createApp({
    data(){
        return {
            myUrl: ‘www.baidu.com‘
            ,myId: ‘id2‘
        }
    },
    methods: {
        myBlur(){
            //
        }
    }
}).mount("dom节点")

动态绑定参数

v-bind:[attrHref]=‘myUrl‘  // 视图部分，动态绑定的是标签的属性

data(){  // 脚本部分
    return {
        myUrl: ‘www.baidu.com‘
        // ,attrHref: ‘href‘     // 不会解析成驼峰的方式，所以这么写不起作用
        ,attrhref: ‘href‘
    }
}

指令修饰符

• 更多修饰符查看文档：https://v3.cn.vuejs.org/api/directives.html#v-on
• 案例：.prevent

v-on:submit.prevent="mySubmit"  // v-on的内置修饰符.prenent表示阻止表单提交

Vue.createApp({
    data(){
        return{}
    },
    methods:{
        mySubmit(){
            //  
        }
    }
}).mount("dom节点")

指令缩写

• v-bind:href="myUrl" 可缩写成 :href="myUrl"
• v-on:click="mySubmit" 可缩写成 @click="mySubmit"

常用指令

• 更多指令查看文档：https://v3.cn.vuejs.org/api/directives.html#v-text

data函数

• 该函数返回一个对象，并以 $data 的形式存储在组件实例中
• 操作data函数中的数据

const vm = Vue.createApp({
    data(){
        return{
            count: 0
        }
    }
}).mount(‘#app‘);

// vm.count
// vm.$data
// vm.$data.count

防抖和节流

vue3.0入门（二）

原文：https://www.cnblogs.com/chniny/p/14881210.html