vue3.0入门（二）

前言

• 最近在b站上学习了飞哥的vue教程
• 学习案例已上传，下载地址

指令

#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

防抖和节流

• 当用户点击提交时，每隔1秒才能提交一次，避免用户狂点，以此降低服务器压力

@click="submit"

methods: {
    // 用 Lodash 的防抖函数
    submit: _.debounce(function() {
        // ... 响应点击 ...
        console.log("提交成功！")
      }, 1000)
}

计算属性

{{length > 0 ? 'Yes' : 'No'}}  // 不建议在大括号中写js表达式
{{demo1}}  // 使用计算属性的getter
{{demo2()}}  // 在methods中解析的方式
// 计算属性和methods有同样的效果，区别：计算属性带有缓存效果，只有data发生改变时，才会调用；methods是每次调用
{{demo3}}  // 使用计算属性的setter设置值

const vm = Vue.createApp({
    data(){
        return{}
    }, 
    computed: {  // 计算属性
        demo1(){
            // 在此处解析js表达式
        },
        demo3: {
            get(){  // 方法名必须是get和set，否则不起作用
                // 用于获取值
            },
            set(newValue){ // 使用set方法必须传递参数value
                // 用于设置值
            }
        }
    }, 
    methods: {
        demo2(){
            // 也可在这里解析js表达式
        }
    }
}).mount('#app');

侦听器

v-model='name'

Vue.createApp({
    data() {
        return {
            name: ''
        }
    },
    watch: {  // 侦听器的关键字是watch，侦听器的目的是为了响应数据的变化
        name(oldval,newval){  // 侦听器中的方法名必须和data中的属性一致
            // 对改变前后数据进行操作
            this.demo(newval)  // 同时每次改变时，可调用方法发送请求等操作
        }
    },
    methods: {
        demo(name){
            // 发送请求的方法，这里结合侦听器使用
        }
    }
}).mount("#app");