Vue学习笔记

Vue学习笔记

事件修饰符**：**
.stop // 阻止事件冒泡

<button @click.stop="child">阻止事件冒泡</button>

.prevent // 阻止事件默认行为，一般用于a标签上
<a href="https://www.baidu.com @click.prevent>百度</a>
.comtule // 事件捕获 由外向里执行，先父后子

<button @click.comtule="child">事件捕获</button>

.self // 从自身出发

<div .class="out" @click.self="out">//给out一个事件"out"
	<div .class="inner" @click.self="inner"></div>//给inner一个事件"inner"
</div>//out是inner的父集，.self后点击out出out事件，点inner出inner事件

.once// 只执行一次

<button @click.once="child">只执行一次</button>

组件
组件是Vue最强大的功能之一，
可以扩展html元素，封装可重用的代码
优点：
1 能减少代码重用，提高开发效率
2 降低页面的耦合度，是页面方便维护和管理
语法：

copmponents;(
'myName',{  //组件名，完成后一标签的格式写在html上
template:

`,//模板，里面拼接html元素,模板中不能超过两个同级元素，所以要用div标签包起来
data:function(){
return{
		}
	}，//组件中加data必须是方法，并且return

methods:{
	alt(){
		}
	} //组件中也可以放方法
}) //可以写多个组件，一个组件可以重复使用

父组件给子组件传值：
用属性传，在子组件中要用props定义

子件给父组件传值：
用方法传，$emit('事件‘，’参数‘）
聊天室界面案例：