欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue基础知识补充

程序员文章站 2022-05-10 11:49:29
...

计算属性

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()方法来达到目的

  1. 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 自动去除空格

相关标签: 笔记 vue