Vue学习总结

数据绑定:

1 插值表达式
<span>{{变量名}}</span>

2 v-html
用来输入一段html文本

3 v-pre
用来原样输入内容，告诉vue不要编译这个指令声明的元素中的内容

4 v-once
只使用数据一次，后续数据也不再更新到页面上

5 v-text
只输出文本内容

条件判断:

1 v-if v-else v-else-if
条件为真，当前的dom节点会被真正渲染到dom树中，否则不会渲染到dom树中

2 v-show
通过控制css来显示元素，反之不显示，无论条件为真假都会渲染

循环渲染:

 数组
   v-for=“（item，index） in list”

对象
	v-for =“（value, key） in  obj”

在循环渲染中 vue建议添加key值,标识出当前这些兄弟元素的唯一性，在下次更新dom是可以方便识别变化项，不变化项

样式绑定:

class：

	：class = “active” 将来渲染的结果就是class = “active变量的值”
	
	：class= “[active,{className:动态值1}]” 将来渲染的结果：如果值1是真值，结果是 class="active的值 className" 如果动态值1为假值，结果是class="active的值"

style:

：style=" {  属性名：属性值，属性名2：属性值2  } "

事件绑定:

@click = “事件处理函数” fn定义在methods节点下,是一个函数

@input = " 事件处理函数 " fn定义在methods节点下,上一个函数

通过绑定事件用户在触发所绑定的事件时，将页面上的数据传递到[业务逻辑层，mode层]

v-model双向绑定指令,等于如下3个步骤：

在input上使用属性绑定:value = "data"
在input上绑定input事件处理函数fn
在fn事件处理函数执行this.data = $event.target.value

事件修饰符：

.prevent 阻止默认行为

.stopProPagation 阻止事件冒泡

v-model的修饰符:

.number 将输入内容转成数字

.lazy 将事件触发的时机从input调整到change

.trim 去除输入框内容的两端空格

input事件：监听输入框内容变化(增加 减少 粘贴)的事件

change事件：当输入框内容变化 且失去焦点时触发

组件传值:

1
父子组件通信
父组件给子组件通过传递属性的形式，可以是动态数据( :title = " 变量 " ) 也可以是静态数据(“title = 固定值”)
子组件内部使用props属性来声明接收父组件的数据

2
子向父传值
子组件通过自定义事件来完成
1 父组件调用子组件时传递一个自定义事件,事件处理函数在父组件中的methods节点下定义
2 子组件内在合适的时机触发上一步传递过来的自定义事件，可以传递参数$emit(“自定义事件名称” 传递的数据)
3 父组件内定义接收传递过来的数据

3
兄弟组件间的通信
1 定义事件中心，生成一个实例对象
2 在组件内hub.￥on(‘a’ fn) 监听一个事件 同时定义这个事件的处理函数fn
3 在组件2内 使用 hub.$emit(’ a ’ 传递过来的数据) 触发事件a 同时传递数据

4
父子传递数据的类型
基本数据类型
引用数据类型
自定义事件

5
自定义组件的v-model双向数据绑定
默认情况下 父=>子通信 和 子 =>父通信按照前面的1 和 2 的方式进行，但是有些数据比较简单或者有些组件之间就传递了一个数据，此时使用前面的流程就显示很冗余和麻烦，所以vue提供了v-model指令来在组件间进行双向数据绑定 父组件传递给子组件数据 子组件受到并使用 在操作的过程中对该数据进行的改变会自动的被父组件收到