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

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){
		
		}	
	}
相关标签: Vue入门