Vue基础知识补充

文章目录

• 计算属性
• 事件监听
• `v-for`绑定`:key`属性
• 数组中响应式的方法
• 表单绑定`v-model`

计算属性

setter与getter

    <div id="app">
        <h2>{{fullName}}</h2>
    </div>

//fullName是一个属性，不用加括号

     const app = new Vue({
            el: '#app',
            data: {
                firstName: 'uzi',
                lastName: 'jianzihao'
            },
            computed: {
                //完整写法
                fullName: {
                    set: function(newValue) {
                        const names=newValue.spilt(' ');
                        this.firstName=name[0];
                        this.lastName=name[1];
                    },
                    get: function() {
                        return this.firstName + ' ' + 
                            this.lastName
                    }
                }, 
                
                //计算属性一般没有set方法，只读属性
                fullName: function() {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })

与methods的比较

• 计算属性是基于他们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时才会重新求值。相比之下，调用方法总会再次执行函数。所以计算属性的性能会比调用方法好。

    <div id="app">
        <!-- 1.直接拼接:语法繁杂 -->
        <h2>{{firstName}} {{lastName}}</h2>
        <!-- 2.通过定义methods -->
        <h2>{{getFullName()}}</h2>
        <!-- 3.通过computed -->
        <h2>{{fullName}}</h2>
    </div>

         const app = new Vue({
            el: '#app',
            data: {
                firstName: 'uzi',
                lastName: 'jianzihao'
            },            
            //2.通过定义methods
            methods: {
                getFullName: function() {
                    return this.firstName + ' ' + this.lastName
                }
            },
            //3.通过computed
            computed: {
                fullName: function() {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })

事件监听

• 当通过methods中定义方法，以供@click调用时，需要注意：

1. 该方法没有额外的参数时，方法后面可以不添加（），但如果方法需要一个参数时，vue会默认将原生事件event参数传递到方法中

2. 如果需要传入某个参数，同时需要event时，通过$event传入事件

<div id="app">
    <h2>点击次数：{{counter}}</h2>
    <button @click='btn0Click'>点我</button>   //没有参数
    <button @click='btn1Click'>+</button>	  //一个参数
    <button @click='btn2Click(abc,$event)'>-</button>//同时两个参数
</div>										

        const app = new Vue({
            el: '#app',
            data: {
                counter: 0,
                abc: 123
            },
            methods: {
                btn0Click() {
                    console.log("hello vue"); 
                    //=>hello vue
                },
                btn1Click(abc) {
                    this.counter++;
                    console.log(abc); 
                    //=>MouseEvent
                },
                btn2Click(abc, event) {
                    this.counter--;
                    console.log('----', abc, event); 
                    //=>---- 123 MouseEvent
                }
            }
        })

v-on修饰符

• 防止事件冒泡 .stop

• 防止自动提交 .prevent

• 监听一个特殊的键帽抬起 @keyup.enter

• 只触发一次回调 .once

v-for绑定:key属性

• 当某一层有很多节点时，也就是列表节点时，我们希望插入一个新的节点。Diff算法默认执行方法效率太低。
• key的作用就是给每一个节点做一个唯一的标识，能高效的更新虚拟DOM。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HgZvHjd3-1627485239533)(C:\Users\aaaay丶\AppData\Roaming\Typora\typora-user-images\image-20210728183825848.png)]

数组中响应式的方法

1. push（）
2. pop（） 删除数组中最后一个元素
3. shift（） 删除数组中第一个元素
4. unshift（） 在数组最前面添加元素
5. sort（） 排序
6. reverse（）反转
7. splice（） 删除元素、插入元素、替换元素

• 删除：第一个参数是从那个位置开始，第二个参数是要删除几个元素（如果没有传，就删除后面的元素）
• 替换： 第二个参数表示我们要替换几个元素，后面要跟用于替换前面的元素
• 插入：第二个参数传0，后面跟上要插入的元素

注意：通过索引值改变数组元素不是响应式的。但可以通过splice（）和set（）方法来达到目的

8. set（要修改的对象，索引值，修改后的值）

表单绑定v-model

双向绑定

<div id="app">
        <input type="text" v-model='message'>{{message}}
    </div>

 const app = new Vue({
            el: '#app',
            data: {
                message: 'nihao '
            },
        })

原理

V-model其实是一个语法糖，本质包含两个操作：

1. v-blind绑定以个values属性
2. v-on指令给当前元素绑定input事件

 <input type="text" :value='message' @input='message=$event.target.value'>
//等于
<input type="text" v-model='message'>{{message}}

结合radio

        <label for="male">
            <input type="radio" id="male" value="男" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio" id="female" value="女" v-model="sex">女
        </label>

const app = new Vue({
            el: '#app',
            data: {
                sex: "男"  //默认选择男
            },
        })
//达到互斥效果

结合checkbox

    <div id="app">
        <!-- 单选框对应的是布尔类型 -->
        <!-- 多选框 -->
        <input type="checkbox" value="篮球" v-model='hobbies'>篮球
        <input type="checkbox" value="足球" v-model='hobbies'>足球
        <input type="checkbox" value="羽毛球" v-model='hobbies'>羽毛球
        <h2>你的爱好是:{{hobbies}}</h2>
    </div>

        const app = new Vue({
            el: '#app',
            data: {
                hobbies: []
            },
        })
//数组可以做到选中而响应式变化

修饰符

1. .lazy 让数据在失去焦点或回车时才绑定

2. .number 只能输数字类型

3. .trim 自动去除空格