1. 事件修饰符

Vue官方推崇方法内只有纯粹的数据逻辑，而不是去处理 DOM 事件细节同时也建议把阻止冒泡阻止默认行为这些事件使用修饰符进行处理。

修饰符是紧跟方法名之后，使用"."加上下面的关键字：

.stop       // 类似使用stopPropagation阻止冒泡
.prevent    // 类似使用preventDefault阻止默认行为
.once       // 事件执行一次后自动移除
.capture    // 监听事件切换成捕获模式
.self       // 事件只在目标元素上触发才会执行，忽略冒泡的事件

有如下的例子验证stop、capture、once修饰符作用：

<ul @click="testModel">
    <li @click="printInfo" v-for="item in clickInfo">{{item.msg}}</li>
</ul>

data中添加如下数据：

clickInfo: [
    {msg: '标题'},
    {msg: '内容'},
    {msg: '落款'}
]

methods下添加如下事件：

methods: {
    printInfo () {
        console.log('li标签的点击事件');
    },
    testModel () {
        console.log('ul标签的点击事件');
    }
}

点击页面渲染后的任意元素，控制台会输出

li标签的点击事件
ul标签的点击事件

说明事件监听按冒泡模式触发，进行如下改动，添加capture修饰符：

<ul @click.capture="testModel">
...

再点击页面元素，此时控制台输出为

ul标签的点击事件
li标签的点击事件

事件监听换成了捕获模式，清除刚刚添加的capture修饰符，添加stop修饰符

<li @click.stop="printInfo" v-for="item in clickInfo">{{item.msg}}</li>

这时添加页面任意元素，控制台输出：

li标签的点击事件

并不会执行ul的绑定事件

<li @click.stop.once="printInfo" v-for="item in clickInfo">{{item.msg}}</li>

使用once修饰符，可以使该方法只执行一次，这里这么操作会有一个有意思的现象，你对任意一个li进行多次点击，我们会发现li标签上的事件只执行一次，但是ul标签上的事件除了第一次点击不执行，其后的点击都会执行，如果要避免这种情况可以使用self修饰符，完整代码如下:

<ul @click.self="testModel">
    <li @click.stop.once="printInfo" v-for="item in clickInfo">{{item.msg}}</li>
</ul>

这时页面点击后的表现行为就和我们预期的一致，点击li标签只会执行一次li标签上的事件，再次点击没有任何事件执行，点击li标签之外ul之内的区域，则会触发ul上的绑定事件

<a href="http://www.baidu.com" @click.prevent>百度</a>

.prevent修饰符是阻止标签的默认行为，比如按上面的调用方式，就会阻止a标签的跳转行为

.left .right .middle修饰符

<p @click.right="editInfo('修改info值', $event)">{{info}}</p>

这三个修饰符分别代表事件只在鼠标的点击左键，右键，中键时触发，如上代码只会在鼠标点击右键时触发

使用.passive修饰符提升移动端滚动体验

该修饰符设置后事件就不会等待事件执行完成再进行默认的行为，下面是一个很夸张的例子：

<p @touchmove="scrollEvt" style="height: 3000px">{{info}}</p>

在methods中建立方法scrollEvt

methods: {
    scrollEvt () {
        let j = 0;
        for (let i = 0; i < 1000000000; i++) {
            j = i;
        }
        console.log('页面发生了滚动');
    }
}

此时如果你在浏览器中使用移动版模式，点击拉动页面，你会感觉有明显的卡顿之感，因为这时会等待scrollEvt事件执行完成后才会继续进行滚动，要解决这个问题可以使用.passive修饰符

<p @touchmove.passive="scrollEvt" style="height: 3000px">{{info}}</p>

这时就会发现页面可以流畅拖动，控制台会在事件完成后输出

事件修饰符可以串起来使用，但要注意顺序，不同的顺序下，事件执行不同
@click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击

<ul @click.self.prevent="testModel">
    <li v-for="item in clickInfo"><a href="http://www.baidu.com">{{item.msg}}</a></li>
</ul>

这种情况下，并不会阻止a标签的跳转行为

<ul @click.prevent.self="testModel">

如果修改成这样，则会阻止所有a标签的跳转行为

2. 按键修饰符

事件修饰符主要是针对事件进行的一些限制条件，按键修饰符是点击特定按键时触发

<input placeholder="输入内容" @keyup.enter="printMsg"/>

执行上述代码，输入框在选中状态，点击回车键就会触发printMsg事件，以下时Vue支持的键盘修饰符

.enter              // 捕获回车键
.tab                // 捕获tab键
.delete             // 捕获“删除”和“退格”键
.esc                // 捕获esc键
.space              // 捕获空格 
.up                 // 捕获键盘向上按钮
.down               // 捕获键盘向下按钮
.left               // 捕获键盘向左按钮
.right              // 捕获键盘向右按钮

3. 系统修饰键

系统修饰符是实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

<p @click.shift="printMsg">{{info}}</p>

这个点击事件只会在按住shift按钮时，进行点击才会触发，类似的键盘事件还有

.ctrl
.alt
.shift
.meta

.exact精确控制系统修饰符的组合事件

上例，除了按住shift外，如果你同时按住shift和其他任意键，进行点击是亦然可以触发绑定事件，为了修正这个错误，可以添加exact修饰符达到精确控制，只在shift被按住才会触发

<p @click.shift.exact="printMsg">{{info}}</p>

4. v-model

表单相关的元素是页面进行交互时比较重要的元素，很多操作都是这些元素进行操作的。Vue对此进行了增强，专门添加了该指令

1) 文本

<input v-model="msg" placeholder="edit me">
<p>Message is: {{ msg }}</p>

在data中建立msg属性

msg: '',

在页面，输入框中输入任意数据，会发现p标签内容会同步更新

2) 多行文本

<p style="white-space: pre-line;">多行文本信息：{{msg}}</p>
<textarea v-model="msg" placeholder="edit me"></textarea>

同文本，输入信息会同步到绑定属性中

3) 单选框

<input type="radio" name="gender" value="man" id="manRadio" v-model="gender"/>
<label for="manRadio">男</label><br/>
<input type="radio" name="gender" value="woman" id="womanRadio" v-model="gender"/>
<label for="womanRadio">女</label><br/>
<p>你选择的性别为：{{gender}}</p>

在data中建立gender属性

gender: '',

绑定属性gender会同步为选中单选的value值

4) 复选框

复选框会因为设定的绑定值类型不同，展示的不同

<input type="checkbox" name="vehicle" id="vehicle" value="bike" v-model="vehicle"/>
<label for="vehicle">自行车</label>
<p>你的车辆为：{{vehicle}}</p>

在data中建立属性vehicle

vehicle: '',

此时使用的是单个复选框，按照单选框的例子，很容易就认为我们选中复选框时p标签显示的应该是复选框的value值，但实际上这里显示的true值，不勾选后显示的是false值，原因是此时Vue期望绑定值是数组，如果把绑定值换成数组

vehicle: [],

选中后数据显示正常

<input type="checkbox" name="vehicle" id="bike" value="bike" v-model="vehicle"/>
<label for="bike">自行车</label>
<input type="checkbox" name="vehicle" id="car" value="car" v-model="vehicle"/>
<label for="car">汽车</label>
<p>你的车辆为：{{vehicle}}</p>

多个条目进行选择或者移除选择，数组会同步删除指定数据

5) 下拉列表

<select v-model="selValue">
    <option disabled value="">你出行的方式</option>
    <option>步行</option>
    <option>自行车</option>
    <option>汽车</option>
</select>
<p>你的出行方式：{{selValue}}</p>

在data中设置selValue值

selValue: '',

与复选框类似，如果要多选时，绑定的属性要是数组类型

<select v-model="selValue" multiple>
    <option disabled value="">你出行的方式</option>
    <option>步行</option>
    <option>自行车</option>
    <option>汽车</option>
</select>
<p>你的出行方式：{{selValue}}</p>

如果此时selValue设定值还是字符串，Vue会在控制台抛出警告，提醒你此时应该使用数组数据

6) v-model修饰符附带修饰符

对v-model的适当补充的修饰符有：

.lazy       // 取代 input 监听 change 事件
.number     // 输入字符串转为数字
.trim       // 输入首尾空格过滤

上文文本的事例：

<input v-model.lazy="msg" placeholder="edit me">
<p>Message is: {{ msg }}</p>

v-model对input元素默认进行的input监听，添加.lazy修饰符后，进行的change监听

v-model.number

换成number修饰符，就会把输入的字符串转为数字的形式，比如你输入:1.34e+5; 1.34e-5，Vue会进行string-to-number的操作

v-model.trim

使用trim修饰符会对输入框进行头尾去除空格的操作

5. v-pre

该指令是用来跳过这个元素和它的子元素的编译过程，跳过大量没有指令的节点会加快编译。按指令设定的意义来看，是想当模版元素是纯静态内容时，使用这个指令，指定某个区域不行编译，提升Vue的编译速度。不过可能就只有纯背景的DOM区域会需求这个指令吧

6. v-cloak

很少用，按现在构建代码的形式，只要在进入页面加上一个全局loading，load完再展示页面

7. 自定义指令（糟粕）

除了Vue自带的指令，还可以自定义一些自己需要的指令，自定义指令可以放在组件内部使用directives属性，也可以把公用的指令，放到外部文件然后引用扩展到内部属性directives上

<input placeholder="edit name" v-focus/>

...
directives: {
    focus: {
        inserted: function (el) {
            el.focus()
        }
    }
}

此时渲染页面进到页面就会自动获取输入框焦点，如果是要把公共指令放到外部文件可以这么操作

• 在src根目录下，建立directives文件夹，然后建立directives.js，在其内部输入

let focus = {
    inserted: function (el) {
        el.focus()
    }
};

export { focus }

• 在组件的目录下引入该文件

<script>
    import * as directives from './../../directives/directives'; // 引入公共指令
    ...

• 在组件内部的相关属性上扩展相关属性

directives: {
    ...directives
},  

8. 自定义指令的相关钩子函数（糟粕）

自定义指令的钩子一共有如下几个

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

在directives.js中做如下改造

let focus = {
    bind () {
        console.log('bind focus');
    },
    inserted (el) {
        console.log('inserted focus');
        el.focus()
    },
    update () {
        console.log('update focus');
    },
    componentUpdated () {
        console.log('componentUpdated focus');
    },
    unbind () {
        console.log('unbind focus');
    }
};

export { focus }

模板中做如下调整

<input placeholder="edit name" v-focus="focusValue" v-model="focusValue"/>

...
// data中设定focusValue属性值
focusValue: ''

刷新页面，在未进行任何操作前控制台输出

console.log('bind focus');
console.log('inserted focus');

在输入框输入任意字符触发focus指令更新，控制台输出

console.log('update focus');
console.log('componentUpdated focus');

多次输入，控制也同样多次输出，证明update、componentUpdated钩子函数会多次执行，而bind、inserted钩子函数只会在初始化时执行一次

自定义指令的钩子函数，可以接收如下几个参数：

el：指令所绑定的元素，可以用来直接操作 DOM
binding：一个对象，包含以下属性：
  - arg：指令的参数(可选值)，修饰符和参数的顺序会影响这个值的取值，比如:v-focus:gool.foo.rel:bar，arg的取值为gool，如果为v-focus.foo.rel:bar:gool，arg的取值就为空不展示，此时指令会把gool当作修饰符rel的值
  - def：指令的方法，显示的是添加的钩子函数(添加了几个钩子函数就显示几个)
  - expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  - modifiers：一个包含修饰符的对象。比如:v-focus:gool.foo.rel:bar中，修饰符对象为 {foo: true, rel:bar: true}
  - name：指令名，不包括 v- 前缀，不包括修饰符和参数。
  - rawName：指令名全称，包括v-前缀，包括修饰符和参数
  - value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  - oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
vnode：Vue 编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

这四个参数，在钩子函数中都是通用的，做如下改造

inserted (el, binding, vnode, oldVnode) {
    console.log('inserted focus');
    console.log(binding);
    console.log(vnode);
    console.log(oldVnode);
    el.focus();
},
update (el, binding, vnode, oldVnode) {
    console.log('update focus');
    console.log(binding);
    console.log(vnode);
    console.log(oldVnode);
},

这时再控制台就输出相关信息binding，vnode和oldVnode的值了，这三个对象的值，官方建议是只进行只读操作，从中读取需要的信息，并不要进行相关修改

focusValue: {color: 'red', size: '14px'}

如果传入的指令的值是对象，那么binding对象中的value也是对象，方便调用

9.计算属性(computed)和观察属性(watch) (精华)

计算属性在上文已经使用了多次，只要插值展示的值包含一定程度的计算量，而不能直观看出变量信息时均可使用计算属性。

<p>你的姓名: {{name}}</p>
<p>你的性别: {{gender}}</p>
<p>你的学校: {{school}}</p>
<p>你的学院: {{college}}</p>

在data中建立相关信息

name: 'Tom',
gender: '男',
school: '深圳大学',
college: '软件学院'

如所见，这些信息都非常的直观，如果我们换一个稍微复杂些的信息

<p>你的全名是: {{fullName}}</p>
<input placeholder="edit firstName" v-model="firstName"/><br/>
<input placeholder="edit lastName" v-model="lastName"/><br/>

在data下建立如下信息：

firstName: 'Lin',
lastName: 'Ken',

在computed中建立如下信息：

computed: {
    fullName () {
        return `${this.firstName} ${this.lastName}`
    }
}

这个例子是一个不合理的例子，只为了简单说明计算属性包含了逻辑处理，在输入框修改相关信息p标签信息就会更新，在开发中还有可能碰到类似这样的需求，虽然插值fullName是依赖firstName和lastName计算出来的值，但偶尔需要直接修改fullName的情况，我们先直接在页面上添加对应方法

<button @click="changeFullName">改变姓名</button>

methods: {
    changeFullName () {
        this.fullName = '李 寻欢';
    }
}

这时如果你直接点击页面上的按钮，Vue会在控制台报错，告知fullName没有setter属性，那是因为我们直接使用计算属性时，其实是直接使用getter属性，要解决这个问题我们可以做如下改造

computed: {
    fullName: {
        get () {
            return `${this.firstName} ${this.lastName}`
        },
        set (newValue) {
            let names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[names.length - 1];
        }
    }
}

再次点击页面按钮，页面逻辑就会正常，我们要记得这个思路，就算我们要修改一个计算属性值，实际上是修改计算属性相关联的属性中的值(比如这里的firstName和lastName)，依赖这些关联值更新触发相关计算属性的更新，不要尝试直接在set中直接返回相关值，比如这样：

set (newValue) {
    return newValue;
}

计算属性可以满足我们常见的数据关联更新需求，但还有些会是自更新触发不相关数据更新的需求，不如下面的问题：

<p>你的职业为：{{occupation}}</p>

在模板中添加上面内容，对应data中设置occupation的值

occupation: '程序员',

我们现在有这么一个需求，就是当用户姓名变成指定姓名时，occupation的值变成特定值，也就是当firstName或lastName发生更新时，触发器occupation值的更新，这个时候我们如果尝试用计算属性来处理，会感觉有些逻辑上的问题，毕竟occupation的值和firstName与lastName值，并不像它们和fullName那样有很强的逻辑关联型，这时如果使用观察属性来进行处理(watch)一切就变得很好理解

watch: {
    firstName (val) {
        if (val === '李') {
            if (this.lastName === '寻欢') {
                this.occupation = '小李飞刀的传人'
            } else {
                this.occupation = '程序员';
            }
        } else {
            this.occupation = '程序员';
        }
    },
    lastName (val) {
        if (val === '寻欢') {
            if (this.firstName === '李') {
                this.occupation = '小李飞刀的传人'
            } else {
                this.occupation = '程序员';
            }
        } else {
            this.occupation = '程序员';
        }
    }
}

这时的逻辑就是当firstName或lastName数据发生变化时，判断变化后的值是不是指定名称，然后进行相关更新

10.过滤(filter) （精华）

过滤是对插值和v-bind指令的补充，是对其返回值再进行一次筛选，过滤器的使用分为组件内和全局两种

<p>{{info | upperCase}}</p>

此时我们先使用组件内的过滤器，在组件内使用filters属性

filters: {
    upperCase (val) {
        return val.toUpperCase();
    }
}

过滤器默认接收的第一个参数是表达式的值，如果在使用过滤器时需求传参数，可以用下面这种形式

<p>{{info | upperCase('进行大写转换后为：')}}</p>

...
// filters下的upperCase做如下修改
upperCase (val, str) {
    return `${val} ${str} ${val.toUpperCase()}`;
},

过滤器支持多个条件过滤，按如下写法进行

<p>{{info | upperCase | reverse}}</p>

多个过滤器类型管道的写法，下一个过滤器会把上一个过滤器处理后的值当作入参处理

filters: {
    upperCase (val) {
        return `${val.toUpperCase()}`;
    },
    reverse (val) {
        return val.split("").reverse().join("");
    }
}

以上都是过滤器在组件内的使用方法，这些过滤器只适合处理没有很强复用型的过滤器，其他比如币种的转换，金额的格式化，这些都是那种很通用的过滤器，还用组件内的写法就不合适了，这时就需要把过滤器放在公共的地方，通过全局方式进行引用

• 在src的根目录下建立filters文件夹，然后在文件夹内建立filters.js文件，里面内容如下

let upperCase = (val) => {
    return `${val.toUpperCase()}`;
};

let reverse = (val) => {
    return val.split("").reverse().join("");
};

export { upperCase, reverse }

• 在组件内引入刚刚添加的文件

<script>
    import * as filter from './../../filters/filters'; // 引入公共过滤器
    ...

• 在filters下把刚刚引入的文件扩展到组件内过滤器(把上一步相关过滤器删除)

filters:{
    ...filter
}

这样页面的过滤器一样正常生效，不过这种把部分过滤器提取到一个公共文件夹下做法，比较易于维护

11.总结：关于data，computed，watch和filters的使用 （精华）

这四个属性是我们处理数据最常用的操作属性，很多操作都是围绕这些属性展开，下面说下我对这些属性的理解：

data通常是定义基础数据，在模板中使用的插值，一般都是由这些数据演变而来，比如现在是一个产品详情页，在页面模板中，有关于产品的信息，而这些信息通常来源于接口，一般会在接口请求的回调函数中，把接口返回的产品数据赋值给某个data中代表产品的属性值(比如为prdInfo，这个值默认会是空值，在接口请求的成功回调中会把这个接口返回的产品信息赋给prdInfo)，模版中会引用多个计算属性来动态的设定包括比如产品名称，产品图片之类的信息，而这些计算属性(computed)触发更新的条件就是prdInfo值的变化，watch关注的是值的更新，这个值可以是data中的值，也可以是computed的值，只要值发生变化就会触发watch，至于filters是对模板插值的补充，会对模板输出的插值(以及v-bind的绑定数据)再进行一次过滤

12. 组件 （精华）

组件是Vue最强大的功能，对Html进行了很强的扩展，对相关代码进行了封装。

在整个项目中，因为我们使用了vue-loader，所以会使用.vue的形式去创建组件。

1）创建一个组件

上面所有例子，其实都是在index.vue这个组件中进行的，为了强化理解组件的感念，下面所进行的例子都是在组件内进行，这也是Vue官方推崇的一种思路，即把界面抽象成一个组件树，页面由一个个独立的组件拼接而成，组件也可以由多个组件拼接而成

2）全局组件和局部组件

通过Vue.component进行注册的组件就是全局组件，不过在这里有一个需要注意的地方，因为我们是通过npm进行安装的Vue，最新版的Vue是一个运行时的版本，不包含支持template的编译功能，我们上面可以使用template是因为使用了vue-loader并使用了vue-template-compiler这个插件，如果在我们当前的项目中使用全局组件，需要使用render而不是template(后面渲染函数会详细讲解)

在index.js中添加全局插件的注册

...
Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement(
            'h' + this.level,   // tag name 标签名称
            this.$slots.default // 子组件中的阵列
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
});

let vm = new Vue({
    el: "#app",
    render: h => h(app)
});

在index.vue的模板中添加如下代码

<anchored-heading :level="1">Hello world!</anchored-heading>

这样页面就能渲染出如下内容

<h1>Hello world!</h1>

在实例选项components中注册的组件就是局部组件，只在组件内使用，比如在hello-world的目录下建立一个新的组件header.vue，在其中输入如下内容

<template>
    <header>{{title}}</header>
</template>
<script>
    export default {
        data () {
            return {
                title: '这是头部'
            }
        }
    }
</script>

在index.vue中引入这个组件，在components中组册该组件

<script>
...
import cusHeader from './header.vue'; // 引入头部组件

...
components: {
    cusHeader
}

在模板中引用这个组件

<cusHeader></cusHeader>

最终渲染结果为

<header>这是头部</header> 

由于我们使用的是.vue组件形式，所以无需考虑自定义组件无法在普通DOM中不能使用(渲染出错)的情况(比如table标签下出现了出现了自定义标签)，如果碰到这种情况需要使用is关键字，告诉编译器使用的是特殊字符，这个不在我的考虑。

3）组件组合

像上面局部组件的例子，就是在一个组件内引用另外一个组件，这个例子并没有涉及父子组件之间的通信，下面用一个例子来说明父子组件之间如何通信：

父组件向子组件传递数据

// 在模板中添加title属性，在自定义组件添加的属性就会被作为props传递给组件
<cusHeader title="头部信息"></cusHeader>

在组件内部设置接收这个属性的参数(props):

props: ['title'],

这时如果直接渲染Vue会提示你data中的title被声明为prop，要使用默认值代替在data中声明，因为上一步我们在data中声明了title，而在这里我们用props来接收一个传入的title值，从这个例子我们推测在Vue中props的优先级应该是高于data的优先级(?这个地方有点疑问，按官方文档所说，因为prop会在组件实例创建之前进行校验，此时data，computed，methods等实例属性都还不能使用，这里应该能解释为什么props的优先级为什么会比data的优先级高，但判断使用默认值代替data中声明的逻辑是在哪里进行的？)，解决方法就是删除在data中的声明，如果你确实希望这个title有个默认值要像下面这样做改造：

props: {
    title: {
        default: '这是头部'
    }
}

这时如果你删除模板中cusHeader设定的title值，页面就渲染成这个指定的默认值，上面对象的写法，除了可以指定默认值以外还可以对接收参数的类型以及值进行设定

• 接收参数，直接跟一个数据类型，这时是指定当前值只接收某类数据

props: {
    title: Number
}

这样写就表示接收的值必须是数字类型，如果传入其他类似的值，Vue会渲染出来，但是会在控制台报错，此例中，控制台会报错提示title期望的是一个Number类型，但是接收的却是一个String类型，Vue可以设置如下的参数类型：

String
Number
Boolean
Function
Object
Array
Symbol

如果要设置可以同时接收多种数据类型，可以使用数组的形式

title: [Number, String], // 接收数字或字符类型

• 接收参数，跟一个对象，可以在对象中对接收参数设置更多参数

参数必传：required设为true

props: {
    title: {
        type: String,
        required: true
    }
}

如果做了这种设定，在cusHeader中如果不传title值，控制台报错告知缺少必须的参数

默认值：default跟相关值

如上所述，可以使用default跟一个值，表示接收参数的默认值，这个跟随的值，根据type类型的不同，其值也不同

// 如果是数字类型，默认值为数字
type: Number,
default: 100
...
// 如果是数组或值对象，默认值也必须是工厂函数的返回值(如果不用工厂函数，直接把数组值赋值给default，控制台会报错，提示props的type类型为数组/对象，必须使用工厂函数返回)
title: {
    type: Array,
    default: function () {
        return ['这是头部', '这是主体']
    }
}

自定义验证函数：validator

title: {
    type: Number,
    validator: function (val) {
        return val > 10;
    }
}

如果在index.vue中模板这么写

<cusHeader title="12"></cusHeader>

控制台会报错，提示传值的类型错误，因为props进行父子组件通信时默认传值类型是String，如果要传其他类型数据，要使用绑定属性，做如下处理

// 在data中建立一个titleNum
titleNum: 12
...
// 模板中改为
<cusHeader :title="titleNum"></cusHeader>

这时页面就能正常渲染，如果把titleNum换成1，控制台报错提示不符合验证条件

3） 普通HTML属性添加到组件上

如果在组件内部的props没有设置对某个属性的接收，那么那个属性就会当作普通HTML属性加载到组件内最外层的DOM元素上

// index.vue模板做如下改造
<cusHeader class="header" :title="titleNum"></cusHeader>
...
// header.vue组件做如下改造
<template>
    <div>
        <header>{{title}}</header>
    </div>
</template>

这时页面会渲染为

<div class="header"><header>12</header></div>

4）替换/合并现有特性

如果组件内部的外层元素和要添加的属性存在相同属性，那么这个属性就会进行替换或合并，例如：

// 模板内做如下修改，添加一个自定义的info属性
<cusHeader info="header" style="color: red" class="header" :title="titleNum"></cusHeader>
...
// 组件内部也一样做调整
<template>
    <div class="basis" info="basis" style="color: yellow; font-size: 14px">
        <header>{{title}}</header>
    </div>
</template>

此时页面渲染为

<div class="basis header" info="basis" style="color: red; font-size: 14px;">
    <header>12</header>
</div>

我们发现info属性被替换，class属性进行了合并，而style属性被有选择型合并了(组件内的color被父组件的color覆盖了，而font-size被保留)，Vue在处理这些组件传递的特性时大部分会被直接替换，只有在处理class和style时才会有选择性的合并

5）子组件向父组件传递数据

使用props我们可以很容易的从父组件向子组件传递数据，但是如果反过来，要从子组件向父组件传递数据时，就要借助自定义事件来完成：

// index.vue模板中做如下改造
<cusHeader :title="titleNum" @concat="changeNum"></cusHeader>
...
// 在index.vue的methods下新建方法changeNum
methods: {
    changeNum (val) {
        this.titleNum = val;
    }
}
...
// header.vue做如下改造
<template>
    <div @click="clickEvt">
        <header>{{title}}</header>
    </div>
</template>
...
// header.vue的methods下添加下面方法
clickEvt () {
    this.$emit('concat', 20);
}

渲染完成的页面，当你点击页面元素，就会发现，对应数值发生了改变，在这里主要关心这几个方面：

// concat是自定义事件，这里表示监听自定义事件concat，当concat被触发时，再触发changeNum
@concat="changeNum"; 
...
// 表示触发concat事件，并传值20
this.$emit('concat', 20); 
...
// 在changeNum中接收的参数val，就是上面从子组件中传递而来
changeNum (val) {
    this.titleNum = val;
}

从上面的例子可以看出，借用自定义事件，我们实现了从子组件向父组件传递数据的能力，Vue推崇的单向数据流，所以才会用父组件到子组件通过props，子组件到父组件使用自定义事件，下图是官网解释父子组件通信的图片：

image.png

不过Vue针对子组件对父组件通信，提供了一个语法糖修饰符sync，让子组件可以通过事件直接触发父组件中值或状态的修改，形成类似双向绑定。

<cusHeader :title.sync="titleNum"></cusHeader>
...
// 在header.vue做如下改动，update:title是显示触发相关更新
clickEvt () {
    this.$emit('update:title', 30)
}

这时点击页面元素，我们发现对应数值也一样发生了变动，此时页面的数据就形成了一种类似双向绑定的交互逻辑：
子组件传值到父组件，父组件更新数据，又回传给子组件，子组件数据更新

6）使用native修饰符触发事件 （精华）

// 比如，你想直接在组件上绑定一个click事件
<cusHeader :title="titleNum" @click="changeNum"></cusHeader>
...
methods: {
    changeNum () {
        console.log('changeNum');
    }
}
...
// 此时Vue是会把@click="changeNum"中的click识别成一个自定义事件，如果想正常触发，需要在组件内添加相应的事件进行触发
// 在header.vue中的事件做改造，这时组件上的click事件就能正常触发
clickEvt () {
    console.log('从子组件触发');
    this.$emit('click');
}

为了解决上面的问题，Vue制定了一个.native的修饰符

<cusHeader :title="titleNum" @click.native="changeNum"></cusHeader>
...
// header.vue把触发click的代码删除
clickEvt () {
    console.log('从子组件触发');
}

这时组件的click事件就能正常触发

子组件之间的通信 （其他章节详细描述）

上面探讨了父组件和子组件，子组件和父组件通信的问题，为了解决子组件之间的通信，官方提供了Vuex，内容偏多，分开讨论

使用插槽分发内容

如果我们把新建的组件当作普通的HTML元素，在其中引用普通元素

<cusHeader>
    <p>内部元素</p>
</cusHeader>

最终渲染会忽略插在组件内部的元素，如果要解决这个问题，需要借助插槽(slot)，在header.vue组件做如下改造：

<template>
    <div>
        <header>{{title}}</header>
        <slot>只有在没有要分发的内容时才会显示</slot>
    </div>
</template>

这时页面就可以正常渲染出p标签中的内容，现在如果删除p标签，那么页面就显示slot中的文字，这个地方就会有一个问题，比如slot中这段文字，你希望是按需展示出来，而不是当没有插槽内容就直接展示，这时可以借助作用域插槽来解决这个问题

// header.vue做如下修改，把插槽的默认值放到text(自定义属性，可以是任意值)属性中
<slot text="只有在没有要分发的内容时才会显示"></slot>
...
// index.vue做如下修改，在组件引用的地方调用这个插槽存储的值
// 下面slot-scope可以用在p标签是在Vue 2.5+以上的版本
// prop也可以是任意值
<cusHeader>
    <p slot-scope="prop">{{prop.text}}</p>
</cusHeader>

通过这种方式，我们就可以在组件内定义一些默认信息，同时可以按需进行加载，形成来类似父组件通过props向子组件传值的能力，此时绑在组件插槽的内容只能在组件调用的域中可用。

slot最初被设定为备用内容，但当和name属性一并使用时，其就具备了分发内容的能力

// header.vue下模板改造为
<template>
    <div>
        <div class="header">
            <slot name="header"></slot>
        </div>
        <div class="body">
            <slot></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>
...
// index.vue下模板修改为
<cusHeader>
    <h1 slot="header">这是头部</h1>
    <p>这个会放到默认body中</p>
    <h1 slot="footer">这是底部</h1>
</cusHeader>
...
// 页面渲染为
<div>
    <div class="header">
        <h1>这是头部</h1>
    </div> 
    <div class="body"> 
        <p>这个会放到默认body中</p> 
    </div> 
    <div class="footer">
        <h1>这是底部</h1>
    </div>
</div>

使用具名插槽在组件设计上，会使组件更加灵活

动态组件

官网上提到的动态组件并不是动态加载的组件，而是可以动态切换的组件，是指利用保留的component标签，在结合is特性，对某一处的加挂点动态切换组件，在这里我们实现一个相对复杂点tab页切换

// 在hello-world目录下，新建三个.vue文件，分别表示三个新闻块的内容
game.vue
sport.vue
news.vue
...
// game.vue内添加如下内容
<template>
    <ul>
        <li v-for="item in gameList">{{item.title}} - {{item.time}}</li>
    </ul>
</template>
<script>
    export default {
        data () {
            return {
                gameList: [
                    {id: 'g01', title: '游戏新闻1', time: '03-07'},
                    {id: 'g02', title: '游戏新闻2', time: '03-07'},
                    {id: 'g03', title: '游戏新闻3', time: '03-07'},
                    {id: 'g04', title: '游戏新闻4', time: '03-07'},
                    {id: 'g05', title: '游戏新闻5', time: '03-07'},
                ]
            }
        },
        created () {
            console.log('game module');
        }
    }
</script>
...
// news.vue添加如下内容
<template>
    <ul>
        <li v-for="item in gameList">{{item.title}} - {{item.time}}</li>
    </ul>
</template>
<script>
    export default {
        data () {
            return {
                gameList: [
                    {id: 'n01', title: '新闻1', time: '03-07'},
                    {id: 'n02', title: '新闻2', time: '03-07'},
                    {id: 'n03', title: '新闻3', time: '03-07'},
                    {id: 'n04', title: '新闻4', time: '03-07'},
                    {id: 'n05', title: '新闻5', time: '03-07'},
                ]
            }
        },
        created () {
            console.log('news module');
        }
    }
</script>
...
// sport.vue添加如下内容
<template>
    <ul>
        <li v-for="item in gameList">{{item.title}} - {{item.time}}</li>
    </ul>
</template>
<script>
    export default {
        data () {
            return {
                gameList: [
                    {id: 's01', title: '体育新闻1', time: '03-07'},
                    {id: 's02', title: '体育新闻2', time: '03-07'},
                    {id: 's03', title: '体育新闻3', time: '03-07'},
                    {id: 's04', title: '体育新闻4', time: '03-07'},
                    {id: 's05', title: '体育新闻5', time: '03-07'},
                ]
            }
        },
        created () {
            console.log('sport module');
        }
    }
</script>
...
// index.vue引入添加的三个组件
import gameList from './game.vue'; // 引入游戏列表
import newsList from './news.vue'; // 引入新闻列表
import sportList from './sport.vue'; // 引入运动新闻列表
...
// index.vue的components注册这三个组件
components: {
    gameList,
    newsList,
    sportList
}
...
// index.vue的data中添加如下信息
tabList: ['新闻', '游戏新闻', '体育新闻'],
showTabView: 'gameList'
...
// index.vue的模板做如下修改
<ul>
    <li v-for="item in tabList" @click="changeTab(item)">{{item}}</li>
</ul>
<component :is="showTabView"></component>
...
// index.vue的methods下添加changeTab方法
changeTab (val) {
    if (val === '新闻') {
        this.showTabView = 'newsList';
    } else if (val === '游戏新闻') {
        this.showTabView = 'gameList';
    } else if (val === '体育新闻') {
        this.showTabView = 'sportList';
    }
}

当然这个例子是有点不合适的，这三个列表应该是复用一个列表组件，只不过根据不同数据源展示不同，我们在点击进行切换时，会发现控制台会一直输出我们设置在created中的log，证明在切换组件时，组件每一次都是重新加载，这个从性能上考虑是需要进行优化的，使用Vue尽可能的复用重复代码

使用keep-alive标签保留组件状态以及静态资源，避免重新渲染

// 在动态加载组件的标签外添加keep-alive标签
<keep-alive>
    <component :is="showTabView"></component>
</keep-alive>

这时如果我们再点击页面进行组件切换，会发现各个组件created方法，只会执行一次，再次切换回相关组件时，created就不会执行，不过这样虽然达到了组件的复用保留了静态资源，而且也不会进行也避免了不必要的渲染，但是要如何知道这个组件发生了切换或值停用？Vue针对keep-alive的特性，添加了两个钩子函数activated 和 deactivated

// game.vue添加下面代码
activated () {
    console.log('game activated');
},
deactivated () {
    console.log('game deactivated');
}
...
// news.vue添加下面代码
activated () {
    console.log('new activated');
},
deactivated () {
    console.log('new deactivated');
}
...
// sport.vue添加下面代码
activated () {
    console.log('sport activated');
},
deactivated () {
    console.log('sport deactivated');
}

这时我们点击页面元素，进行组件切换时，发现控制台，会按上一个组件的deactivated和切换后组件的activated的顺序执行，这样我们在进行组件切换时依然可以通过这两个钩子函数，动态控制组件的加载

include／exclude控制缓存组件

默认Vue会对keep-alive包裹下的所有切换组件进行缓存，但在某些情况下，我们可能只打算对部分组件进行缓存，这时就要借助include和exclude进行细化控制

// 字符形式：这么就表示缓存gameList,newsList两个模块，注意“,”后面不能有空格，要不Vue识别有误，模块名直接使用，不需添加引号
<keep-alive include="gameList,newsList">
...
// 数组形式：这么也表示缓存gameList和newsList两个模块，模块名要用字符形式表示
<keep-alive :include="['gameList', 'newsList']">
...
// 正则表达式：模块名直接使用无需添加引号
<keep-alive :include="/gameList|newsList/">

exclude使用方式和include一致，区别在于exclude表示除此之外，与include功能相反

组件的设计

官方文档提示我们在设计组件时，要考虑下面内容：

• Prop：接收从组件外部传递数据；

• 事件： 从组件内触发组件外部的方法达到从组件内部向外传递数据的能力；

• 插槽： 允许从组件外部将额外的内容组合在组件中。

使用ref获取子组件引用

ref是用来获取元素或子组件的引用信息，针对元素ref获取就是元素对应的Dom对象，可以使用原声js写法获取相关属性，针对组件获取的是一个VueComponent

// 在组件和p标签都添加ref属性
<keep-alive :include="/gameList|newsList/">
    <component ref="listChild" :is="showTabView"></component>
</keep-alive>
<p class="info" ref="info">{{info}}</p>
...
// 在mounted方法中使用this.$refs查看ref的引用，如果你把这个引用放到created中是无法生效的，因为$refs只有在元素渲染完成才会被添加到实例对象上
// 如果用在普通标签上，获取其引用可以使用原生js属性
mounted () {
    console.log(this.$refs);
    console.log(this.$refs.info.className);
}

异步组件

异步组件要结合webpack来进行使用，可以参看webpack中的介绍

递归组件

递归组件和递归调用类似，是组件反复套用组件本身，当符合某个条件时不再引用

// 在header-world目录下，建立list.vue，在其中输入如下内容
<template>
    <div class="list">
        <p>{{listInfo}}</p>
        <p v-if="closeList"><list :info="list" :flag="listFlag"></list></p>
    </div>
</template>
<script>
    export default {
        name: 'list',
        props: ['flag', 'info'],
        data () {
            return {
                list: '这时递归内部调用的数据',
                listFlag: false
            }
        },
        computed: {
            closeList () {
                return this.flag;
            },
            listInfo () {
                return this.info;
            }
        }
    }
</script>
...
// index.vue中引入list.vue，并引用
<script>
    import list from './list.vue'; // 引入递归组件
...
    components:{
        list
    }
...
// 模板中调用这个组件，info，showFlag都是之前设定的值
<list :info="info" :flag="showFlag"></list>

这时页面就会渲染为：

<div class="list">
    <p>Hello vue!</p> 
    <p><div class="list"><p>这时递归内部调用的数据</p> <!----></div></p>
</div>

我们可以看到，我们在组件内部复用了组件本身，在这里有几个点需要注意

• 组件内部的name属性需要添加，要不在组件内使用list组件是编程出错的
• 组件递归的终止条件一定要明确，要不组件会陷入一种死循环

递归组件非常适合去开发那种不确定有几层循环的组件，比如多级菜单，后续在实例开发部分会有案例

组件之间的循环引用

递归组件可以认为成是相同组件之间的循环调用，当是不同组件形成类似递归组件的调用，就会出现组件调用异常的情况

// 在项目目录新建两个文件moduleA.vue和moduleB.vue
// moduleA.vue内容如下
<template>
    <div>
        <p>{{info}}</p>
        <ul>
            <li v-for="item in listData">
                <module-b v-if="item.child" :listData="item.child"></module-b>
                <p v-else>{{item.title}}</p>
            </li>
        </ul>

    </div>
</template>
<script>
    import moduleB from './moduleB.vue'; // 引入moduleB

    export default {
        data () {
            return {
                info: 'from moduleA'
            }
        },
        props: ['listData'],
        components: {
            moduleB
        }
    }
</script>
...
// moduleB.vue内容如下
<template>
    <div>
        <p>{{info}}</p>
        <ul>
            <li v-for="item in listData">
                <module-a v-if="item.child" :listData="item.child"></module-a>
                <p v-else>{{item.title}}</p>
            </li>
        </ul>

    </div>
</template>
<script>
    import moduleA from './moduleA.vue';

    export default {
        data () {
            return {
                info: 'from moduleB'
            }
        },
        props: ['listData'],
        components: {
            moduleA
        }
    }
</script>
...
// index.vue引入moduleA.vue和moduleB.vue并添加相关数据
<module-a :listData="moduleList"></module-a>
...
<script>
    import moduleA from './moduleA.vue';
    ...
    data: {
        moduleList: [
            {title: '新闻',
           child: [
                {title: '本地新闻', 
                 child: [
                    {title: '本地新闻1', 
                        child: [{title:'本地新闻11'}, {title:'本地新闻12'}]}, {title: '本地新闻2'}]},
                 {title: '社会新闻'},
                 {title: '社会民生'}
               ]
            }, {title: '游戏新闻'}, {title: '体育新闻'}],
    }
    ...
    components: {
        moduleA
    }

这时控制台会报错，提示你在moduleB.vue文件中module-a没有注册，我们回看整个调用逻辑会发现，moduleA组件中引用了moduleB组件，moduleB组件又引用了moduleA组件，并且根据我们造的数据能看出，moduleA和moduleB也彼此产生了调用，这个时候两个组件形成了类似递归组件的那种调用的情况，只不过区别在于递归组件调用自己，是一定存在，但是moduleA和moduleB就无法保证在彼此调用时一定存在，而且这个问题按官方的说法，只有在使用webpack等模块管理工具才会有这问题，如果使用Vue.component进行注册，Vue会直接处理这个冲突，要解决此问题，就需要借助beforeCreate这个钩子函数，我们在moduleA(因为moduleA针对moduleB是入口组件)

// moduleA.vue中进行相关修改，保证moduleB不会在moduleA之前引用
<script>
    export default {
        data () {
            return {
                info: 'from moduleA'
            }
        },
        props: ['listData'],
        beforeCreate () {
            this.$options.components.moduleB = require('./moduleB.vue').default;
        },
        components: {
        }
    }
</script>

经过上面的改造，页面就可以正常展示，以上就是Vue的基础内容，下一章讨论Vue其他的一些混合特性，以及过渡和动画