Vue 基础
程序员文章站
2022-03-04 10:46:14
...
列一个大纲吧,具体的在官网都能找到,只是整理一份自己通俗易懂的版本吧
数据驱动视图
常用指令:
v-if:在DOM中生成或移除一个元素。惰性:如果一开始为假,什么都不做,条件第一次为真,才开始编译,会缓存;组件创建和销毁
v-show:基于css样式,display:block/none,元素始终编译保留。频繁切换选用
v-model:双向数据绑定
v-for:基于数据重复渲染元素
v-text: < span v-text=“msg” > < /span> === < span > {{ msg }}< /span>
v-html:不建议使用,容易XSS攻击
v-bind:绑定属性,取data中值
v-on:绑定事件监听器,修饰符 stop:阻止冒泡,prevent:阻止默认行为
自定义指令:Vue.directive(‘myv’,function(){ })
插槽 slot
< slot > 元素作为承载分发内容的出口
如果 <自定义组件> 没有包含一个 < slot > 元素,则任何传入它的内容都会被抛弃。如果自定义组件内容加上name属性,定义组件内部slot中也加上对应的name属性,形成具名插槽。
过滤器
全局注册
Vue.filter('convertTime', function (data, formatStr) {
return Moment(data).format(formatStr)
})
<p>时间:{{ newsList.date | convertTime}}</p>
模块本地注册
filters: {
convertTime: function (value) {
}
}
计算属性
模板中过多的逻辑,显示会臃肿不雅,维护也变得困难,为了简化逻辑,使用计算属性
computed:{
属性A:{ 属性B 属性C}
}
在属性A中,依赖的属性B和属性C发生改变的时候,属性A自动更新。默认是getter,还可以setter
computed:{
属性A:{
get:{function(){}}
set:{function(){}}
}
}
计算属性默认是有缓存的,cache:true,计算属性只有在其依赖元素属性变化才触发。
watch
一次监听单个属性,默认简单监视
watch:{
deep:true, // 复杂object
属性:function(newV,oldV){
}
}
上一篇: css3兼容ie8吗
下一篇: 五种常用CSS3网页小效果分享