vue总结

最新推荐文章于 2024-05-07 16:16:11 发布

缘起笔记

最新推荐文章于 2024-05-07 16:16:11 发布

阅读量116

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46459576/article/details/106882121

版权

vue常见的参数

el 指定vue的模板
data vue的初始数据
methods vue 的方法中心
computed 计算属性，从现有数据计算出新的数据

computed:{
	"rmsg":function(){
		 return this.msg;
	}
}

watch 监听，当数据发生改变时，触发回调函数 handler

watch:{
  obj:{
   handler:function(nval){}，
   deep:true
  }
}

directives自定义指令
<div v-img="">

directives:{
	"img":{
		inserted:function(el,binding){
      	// el 当前指令所在的元素
     	// binding.value  指令值
 		}
	}
}

生命周期函数

创建前后
beforeCreate
created (获取this)
挂载前后
beforeMount
mounted(获取dom)
更新前后
beforeUpdate
updated
卸载前后
beforeDestroy
destroyed(移除监听和事件)

components 注册组件

vue常见指令

v-text 替换文本内容
v-html替换文本内容(可以渲染HTML标签)
v-if v-else-if v-else 条件语句
v-show (通过css display：none隐藏，频繁切换显示与隐藏，建议用v-show)
v-on:click=""可以简写为@click="" 用于绑定事件
v-bind:属性名可以简写为：属性名 用于属性的绑定
v-model 数据的双向绑定

修饰符
- .number 转换为数字用于v-model
- .lazy 延迟更新用于v-model

ref="name"获取dom元素，用this.$refs.name使用dom元素

事件修饰符

.stop 阻止事件冒泡

	<div id="app" @click="say()">
		<button @click.stop="sayName()">点击执行，父元素不执行</button>
	</div>

.once 执行一次

<div id="app">
	<button @click.once="say()">点击</button>
	<!-- 事件只执行一次 -->
</div>

.prevent阻止默认行为

<a href="http://www.baidu.com" @click.prevent="say()">a标签不会跳转</a>

vue的组件

全局组局

<div id="app">
	//使用组件
	<Conter></Conter>
</div>
<script>
	//定义全局组件 Conter
	Vue.component("Conter",{
	template:`<div><button>1</button></div>`
	})
	new Vue({
		el:"#app",
	})
</script>

局部组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用组件-->
			<Counter v-for="(item,index) in list" :key="index" :count="item"></Counter>
			<Counter></Counter>
		</div>
		
		<script>
			//定义局部组件Counter 
			var Counter = {
				template:`<div><button  @click="num++">{{num}}</button></div>`,
				data(){return{num:[]}},
				props:{
					"count":{type:Number,default:0}
				},
				created(){
					this.num = this.count;
				},	
			}
			let vm = new Vue({
				el:"#app",
				data:{
					list:[1,3,5,7,9]
				},
				components:{  //组测组件Couter
					Counter
				}
			})
		</script>
	</body>
</html>

组件插槽

<div id="app">
	<parent>
	<!-- 使用插槽 -->
		<p>我是插槽</p>
	</parent>
</div>
		
<script>
	var Parent = {
		template:`<div class="parent">
		<p>parent 组件</p>
		<slot></slot>
		</div>`
		//<slot></slot> 在组件中定义插槽
	}
	let vm = new Vue({
		el:"#app",
		data:{
			
		},
		components:{Parent}
	})
</script>