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>