vue知识点【1】

最新推荐文章于 2022-10-26 09:50:19 发布

原创最新推荐文章于 2022-10-26 09:50:19 发布 · 508 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue知识点

vue 专栏收录该内容

3 篇文章

订阅专栏

本文深入解析Vue.js的关键特性，包括数据绑定语法配置、参数指令使用、computed与watch的区别、过滤器应用及父子组件传参技巧。适合初学者和进阶开发者掌握Vue的核心功能。

vue学习知识点汇总

1、vue.js数据绑定语法为可配置，默认为Mustache语法，在Vue.config中Vue.js可以在vue实例化前修改配置

Vue.config.demiliters = ["$","$"] 文本插值

Vue.config.unsafeDemiliters = ["$","$"] html插值

2、vue添加参数指令

v-model-number="val" v-model-lazy="val" 失焦或回车执行

created: function () {
      this.getColumns = _.debounce(this.getColumns, 500)
    }//延时请求数据，用在高频请求数据功能上

3、computed和watch的区别

1、computed

):1.是计算值，
):2.应用：就是简化tempalte里面{{}}计算和处理props或$emit的传值，computed(数据联动)。
):3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数

2、watch

):1.是观察的动作，
):2.应用：监听props，$emit或本组件的值执行异步操作，watch(异步场景)。
):3.无缓存性，页面重新渲染时值不变化也会执行

4、过滤器

)1、limitBy(count,index) v-for="item in items | limitBy(count,index)"

)2、limitBy(count,index) v-for="item in items | filterBy('string'|'obj')"

例子 <li v-for="item in items | filterBy 'xxxx' in 'name')">{{item.name}}</li>

)3、orderBy(string'|'obj'|function) v-for="item in items | orderBy 'year' 'mouth' 'day' "

5、父子传参

parent:

<template>
<div>
    parent：下面是我的子组件
    <childSon :name='name' :firstName='firstName' :age='18' ></childSon>
</div>
</template>
<script>
import childSon from './Childs'
export default {
    name:'Parent',
    components:{
        childSon
    },
    data(){
        return{ 
            name:'大卫',
            firstName:'大华'
        }
    }
}
</script>

child:

<template>
<div>
     child:这是父组件给我传的数据——name:{{name}}——firstName:{{firstName}}——lastName:{{lastName}}——age:{{age}}
</template>
<script>
export default {
    name:'Childs',
    props:{
        name: String,
        firstName: {
            type: String,//规定值的类型
            required: true //必须传值，否则报错
        },
        lastName: {
            type: String,
            default: 'lastNameDefault' //如果不传值，则为default的值
        },
        age: {
            type: [String,Number], //类型可以是多种
            validator: function(value) { //自定义验证

                let num = parseInt(value)
                if (num > 0 && num <100) {
                    return true;
                } else {
                    return false;
                }
            }
        }
    },
    data(){
        return{

        }
    }
}
</script>