对于Vue2.x的个人小结（一）

一、指令的基本用法

v-show

用法:v-show="表达式|布尔值"，当条件为false的时候，v-show只是对元素添加一个行内样式display:none

v-if

用法:v-if="表达式|布尔值"，当条件为false的时候，包含v-if指令的元素，会销毁于dom中

v-else

用法:v-else,必须要与v-if一起使用

v-else-if

用法:v-else-if:"表达式|布尔值"，可以由v-if，v-else-if，v-else形成一个链式调用

v-for、循环遍历

用法：v-for=“item in items”，可以用来遍历对象/数组
遍历数组(可以传2个参数)：v-for="(item,index) in items"
遍历对象(可以传3个参数)：v-for="(value,item,index) in items"
key的使用:相当于一个标识,在differ算法寻找元素的时候有奇妙的功效

v-on、事件监听、语法糖@

用法:v-on:click="btnClick" 语法糖：@click="btnClick"
参数的引用：.top/.prevent/.{keyCode | keyAlias}/.native/.once
---.stop防止冒泡
<div @click="divClick">
    <button @click.stop="btn1Click">按钮</button>
</div>
---.prevent阻止默认事件发生
<form>
    <input type="submit" value="提交" @click.prevent="submitClick">
</form>
---.{keyCode | keyAlias}
<input type="text" @keyup="keyUp">
<input type="text" @keyup.enter="keyUp">
---.native监听组件根元素的监听事件
 <nav-bar @click.native="navBarClick"></nav-bar>
---once触发一次
<button @click.once=""btn2CLick>按钮</button>

v-bind、属性绑定,语法糖：

<img :src="src"></img>
data(){
    return{
        scr:'https://vuejs.org/images/logo.svg'
    }
}

v-model、双向绑定

v-model指令用于表单组件的绑定input，select
只要修改表单的value或者message的值，数据就会发生对应的变化
<input type="text" v-model="message">

v-text

v-text指令用于操作纯文本
<h2 v-text="message"></h2>

v-html

v-html指令用于解析html
<h2 v-html="message"></h2>
message:"<span>hello vue.js</span>"

v-slot

看官网吧，不好写

v-pre ->跳过这个元素和它的子元素的编译过程

<span v-pre>{{ this will not be compiled }}</span>
结果：{{this will not be compiled}}

v-once

使用v-once指令，只能执行一次赋值，当数据发生改变，插值处的内容不会改变
<h2 v-one>{{message}}</h2>

v-cloak

v-cloak其实就是隐藏mustache的初始默认值
[v-cloak]{
    display:none;
}
<h2 v-cloak>{{message}}</h2>

二、组件通信

1，父组件传子组件 -- 在子组件中定义props来接收数据

props的值两种方式:

方式一:字符串数组,数组中的字符串就是传递时的名称

方式二:对象，对象可以设置传递时的类型，也可以设置默认值

2，子组件传父组件 -- $emit('传出事件'，参数)

3，兄弟组件 -- $bus

const eventBus = new Vue();
export eventBus;

组件1
import eventBus from '路径'
eventBus.emit('事件名'，参数)

组件2
import eventBus from '路径'
方法名(参数)({
    处理事情
})
mounted(){
    eventBus.$on('事件名',方法名)
}
beforedestroyed(){
    eventBus.$off('事件名'，方法名)//对事件进行解绑避免造成内存泄漏
}

3，父子组件的访问方式

父组件访问子组件:$children(获取结果是个数组)/$refs(reference引用)

子组件访问父组件:$parent/$root

三、选项 1，选项/数据

data，props，propsData，computed，watch，methods，filter

2，选项/生命周期

beforeCreate 创建前
created 创建
beforeMount 挂载前
mounted 挂载
beforeUpdate 更新前
updated 更新
activated 激活
deactivated
beforeDestroy 销毁前
destroyed 销毁
errorCaptured