Vue2 概述

两个版本：

• vue.js开发版，其中有vue的完整代码，格式方便查看源代码，想研究源代码的可以使用此版本
• vue.min.js生产版，压缩后的版本，代码中删除了无效的字符和空格，代码紧凑，体积较小,不便于查看源码

在HTML页面中引入vue.js文件

<script src="js/vue.js"></script>

创建Vue实例，并设置相关选项

• el：指定Vue要渲染的元素，在vue.js中只有放在渲染元素中vue才起作用,渲染的元素可以是div、body等任意HTML元素，开发中一般使用div。

• data：VUE的数据属性区，在此区域中定义VUE中要使用的相关属性数据。

• methods：VUE的方法区，在此区域中定义VUE中要使用的方法(函数)。

• template：用于定义组件模板，VUE中的HTML元素标签、VUE相关指令都可以在此区域定义，运行时会进行渲染并在页面中显示，template的渲染优先级高于el指定的渲染元素，也就是说如果在template中和el渲染元素中都定义的内容，则显示的结果为template中的内容，而el中指定的渲染元素不会显示，如果没有template则会显示el指定的渲染元素。

• created:created()函数是VUE实例创建后自动执行的函数,可以在该函数中初始化data属性、发送ajax请求等操作。

<script src="../js/vue.min.js"></script>
<script>
    /*创建VUE实例(注意Vue的V是大写的)，并设置相关选项*/
    new Vue({
        el: "#app",/*通过id选择器指定要渲染的元素*/
        data() { /*数据属性区，其中定义相关属性*/
            return {
                name: "关为",
                age: 18,
                sex: "男"
            }
        },
        methods: {/*方法区，其中定义功能函数*/
            showMsg() {
                //方法中调用属性需要使用this关键字调用
                console.log(this.name);
            },
            showClick() {
                alert("你好，欢迎来到召唤师峡谷!");
            }
        },
        created() {/*created函数，在vue实例创建后自动执行*/
            //调用方法区中的方法需要使用this关键字
            this.showMsg();
        },
        /*
        模板区中的内容使用模板字符串括起来
        渲染优先级高于el指定的渲染元素
        */
        template: `
          <div>模板区显示</div>
        `
    });
</script>

在页面或模板中使用属性

VUE中通过插值运算符{{}}来访问data区中的属性

<div id="app">
  <!--获得data中的属性值-->
  <p>{{name}}</p>
  <!--字符串原样显示-->
  <p>{{"西安欢迎您"}}</p>
  <!--进行计算并显示-->
  <p>{{10+2}}</p>
</div>

VUE 中的插值运算符不但可以获取data中的属性还可以进行计算并显示,如果要显示字符串常量则需要加上单引号或双引号否则vue会当成属性名获取该属性的值 。

VUE 通过事件调用方法 

VUE 中通过 v-on:事件="函数()"来调用函数也可以通过缩写形式@事件名调用函数

<div id="app">
    姓名：{{name}}<br/>
    年龄：{{age}}
    <hr/>
    <!--注意：必须写在被绑定的div中-->
    <button @click="funA()">缩写函数调用</button>
    <button v-on:click="funB()">标准函数调用</button>
    <button @click="age++">操纵属性</button>
    <button @click="funC()">操纵属性</button>
</div>
<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                id: 1,
                name: '关为',
                age: 19
            }
        },
        methods: {
            funA() {
                console.log(this.name+"输出了一段内容！");
            },
            funB() {
                console.log(this.name);
            },
            // 函数的复杂写法
            funC: function(param) {
                this.name = "关老师";
            }
        }
    });
</script>

Vue 中的选项

根实例中的 data 选项

Vue 的数据属性区，在此区域中定义 VUE 中要使用的相关属性数据。也可以看成是变量定义区域。

<div id="app">
    {{name}}
</div>
<script>
    // data选项对象的写法
    new Vue({
       el:'#app',
       data:{
           name:'对象的写法'
       }
    });
    // data选项函数的写法--标准
    new Vue({
        el:'#app',
        data:function (){
            return {
                name:'函数标准写法'
            }
        }
    });
    // data选项函数的写法--缩写
    new Vue({
        el: '#app',
        data() {
            return {
                name: '函数缩写写法'
            }
        }
    });
</script>

Vue 指令

什么是 Vue 的指令

• 在 VUE 中在页面上提供了一套便于页面和数据交互的操作，这些操作就叫做指令，VUE 中的指令都是以"v-xxx"的形式表示。如: <div v-xxx></div>

• 每个 VUE 指令完成一个功能，VUE 指令中封装了一些 DOM 行为，通过指令的属性赋值，根据不同的值，VUE 会进行相应的 DOM 操作，以完成既定的功能。

Vue 中常用的指令

v-text:等同于 DOM 中的 innerText 属性,用于向标签体中写入文本，该指令和{{}}的功能一样，使用较少(注:该指令不会对 HTML 元素进行解释执行,而是原样输出)。

<!--name是data中定义的一个变量名-->
<div id="app" v-text="name"></div>

v-html:等同于 DOM 中的 innerHTML 属性,用于向标签体中写入文本(注:该指令会对HTML元素进行解释执行)。

<!--name是data中定义的一个变量名-->
<div id="app" v-html="name"></div>

v-bind:设置元素属性指令,如：v-bind:href="数据属性|表达式",一般使用简写方式:href="数据属性|表达式"，其实简单的说，就是给属性赋予定义变量的值。

<div id="app">
    <h1>基本写法</h1>
    <!--标准形式 这里的content就是变量名-->
    绑定文本框：<input type="text" v-bind:value="content"/><br/>
    <!--缩写(语法糖)形式-->
    绑定文本框：<input type="text" :value="content"/><br/>
    <!--原封不动的显示content文字-->
    非绑定文本框：<input type="text" value="content"/>
    <hr/>
    <h1>动态绑定对象</h1>
    <span>{{i}}</span><br/>
    <input type="text" :value="i"/><br/>
    <button @click="i++">点击我改变i的值</button>
    <hr/>
    <h2 v-bind:class="{active:isActive,line:isLine}">{{content}}</h2>
    <h2 :class="{active:isActive,line:isLine}">{{content}}</h2>
    <!--这里的url就是变量名，在data中定义的变量-->
    <a :href="url">动态连接</a><br/>
    <a v-bind:href="url">动态连接</a>
    <button @click="changeColor">改变class</button>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                content: '动态的内容',
                i: 1,
                isActive: true,
                isLine: true,
                url: 'https://www.baidu.com'
            }
        },
        methods: {
            changeColor() {
                this.isActive = !this.isActive;
            }
        }
    });
</script>

v-if:等同于JavaScript中的if判断，当条件为true时显示页面内容，为false时不显示。

<!--生成一个随机数 分支案例中都会用到这个-->
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                number: 1
            }
        },
        methods: {
            funA() {
                let random = Math.floor(Math.random() * 100 + 1);
                this.number = random;
            }
        },
        created() {
            // 页面加载时 执行函数funA()
            this.funA();
        }
    });
</script>
<!--当条件为true时显示数字是偶数-->
<span v-if="number%2==0">
        {{number}}是偶数
</span>

v-show:该指令与v-if的效果一样，当值为true时显示内容，为false时不显示，但底层实现有区别。

<span v-show="number>60">
    {{number}}大于60！
</span>

v-if 和 v-show 的区别？

• v-if是"真正"的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show就简单多了，它不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换(通过修改display样式来进行显示或隐藏)。
• 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

v-else-if:等同于JavaScript中的else if判断，当条件为true时显示条件块中的内容,v-else-if一般和v-if搭配使用。
v-else:等同于JavaScript中else判断，当if条件不成立时自动显示else中的元素,v-else和v-if|或v-if-else搭配使用。

<span v-if="number==100">
    {{number}}，完美！
</span>
<span v-else-if="number>=90">
    {{number}}，优秀！
</span>
<span v-else-if="number>=75">
    {{number}}，良好！
</span>
<span v-else-if="number>=60">
    {{number}}，及格！
</span>
<span v-else>
    {{number}}，很差！
</span>

v-on:事件绑定指令,如v-on:click="方法"，一般使用简写方式@click="方法"。

<button @click="funA()">缩写函数调用</button>
<button v-on:click="funB()">标准函数调用</button>

v-for:遍历指令，主要用于遍历集合或对象中的属性。

<div id="app">
    <!--遍历1-10-->
    <span v-for="i in 10">
        <b>{{i}}</b>&nbsp;
    </span>
    <hr/>
    <!--遍历数组中的元素-->
    <span v-for="name in names">
        <b>{{name}}</b>&nbsp;
    </span>
    <hr/>
    <!--遍历数组中的元素 带索引号-->
    <span v-for="(name,index) in names">
        <b>{{index}}->{{name}}</b>&nbsp;
    </span>
    <hr/>
    <!--遍历对象的属性值-->
    <span v-for="value in users">
        <b>{{value}}</b>&nbsp;
    </span>
    <hr/>
    <!--遍历对象的属性值 (值,键)-->
    <span v-for="(value,key) in users">
        <b>{{key}}--->{{value}}</b>&nbsp;
    </span>
    <hr/>
    <!--遍历对象的属性值 (值,键,索引号)-->
    <span v-for="(value,key,index) in users">
        <b>{{key}}--->{{value}}--->{{index}}</b>&nbsp;
    </span>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                names: ['张三', '李四', '王五', '关为', '马六', '刘德华'],
                users: {
                    userId: 1,
                    userName: '张三',
                    userSex: '男',
                    userAge: 19
                }
            }
        }
    });
</script>

v-model:该指令用于实现数据与视图的双向绑定,当数据改变时视图发生改变，视图改变时数据也同时发生改变,v-model只能在带有value属性的HTML元素中使用。

<div id="app">
    <!--双向绑定实现原理-->
    <!--绑定了遍历val,如果val发生改变这里也发生改变，这里发生改变也会影响到遍历val的内容从而影响到下边文本框的内容-->
    <input type="text" v-model="val"/>
    <input type="text" :value="val" @input="changeValue"/>
    {{val}}
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                val: 'hello'
            }
        },
        methods: {
            changeValue(e){
                // e.target获得事件源对象
                this.val = e.target.value;
            }
        }
    });
</script>

v-bind 和 v-model 的区别？ 

• v-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。
• v-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。
• v-bind可以给任何属性赋值，v-model只能给具备value属性的元素进行数据双向绑定。

Vue 组件

组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装为整体。这样，当我们页面的某一个功能出现问题，只需要将这个功能进行维护就行。提高功能的复用性与可维护性，更好的专注于业务逻辑。

从形式来说，Vue组件其实就是自定义的HTML标签，通过组件名来作为自定义标签名。我们可以把页面的一些功能封装成自定义的HTML标签，也就是Vue组件的形式，当使用时，只需要调用Vue组件就行。

<div id="app">
    <b>HTML的b标签</b>
    <!--全局组件 就是一个自定义HTML标签 不要书写成<guanwei/>-->
    <guanwei></guanwei>
</div>

这里面的<guanwei></guanwei>标签就是Vue组件，它是封装好的功能，使用时，只需调用这个标签就行。 

组件注册

1. 全局组件

1.1 全局组件的基本使用

全局注册的组件在注册后可以用于任意实例或组件中。

Vue.component('组件名', {/*选项对象*/});

注意：

• 全局注册必须设置在根Vue实例创建之前。
• 全局组件只能使用在根Vue绑定的标签内。 

<div id="app">
    <b>HTML的b标签</b>
    <!--全局组件 就是一个自定义HTML标签 不要书写成<guanwei/>-->
    <guanwei></guanwei>
</div>
<hr/>
<!--错误，必须在绑定的根实例内使用-->
<guanwei></guanwei>

<script src="../js/vue.min.js"></script>
<script>
    // 注册全局组件 V必须大写 全局注册必须设置在Vue根实例创建之前。
    Vue.component('guanwei', {
        template: '<b>我是自定义的组件关为</b>'
    });
    // Vue根实例
    new Vue({
        el: '#app'
    });
</script>

1.2 组件命名规则

无论全局组件还是局部组件都具有两种命名规则：

• kebab-case：'guan-wei'
• PascalCase：'GuanWei'

// kebab-case写法
Vue.component('guan-wei1', {/*组件选项*/});
// PascalCase写法
Vue.component('GuanWei2', {/*组件选项*/});

注意：无论采用哪种命名方式，在DOM中都只能通过kebab-case可以使用。因为HTML中不区分大小写。

<div id="app">
    <guan-wei1></guan-wei1>
    <!--PascalCase写法使用时必须使用kebab-case来获取 这里获取不到-->
    <GuanWei2></GuanWei2>
    <!--正确的引用方式-->
    <guan-wei2></guan-wei2>
</div>

2. 组件基础

本职上，组件是可重复的Vue实例，所以它们可与new Vue接收相同的选项，例如data、methods以及生命周期钩子等。

注意：el这个选项是根实例特有的，组件中不能进行设置。

2.1 template选项

template选项用于设置组件的结构，最终被引入根实例或其他组件中。

Vue.component('guan-wei1', {
     template: `
          <div>
               <b>我是组件内的标签1</b>
          </div>
     `
});

注意：template中不能有平级的根实例，如果有多个平级的div，只会显示第一个div的内容。 

<script>
    Vue.component('guan-wei1', {
        template: `
                <div>
                    <b>我是组件内的标签1</b>
                </div>
            `
    });

    Vue.component('guan-wei2', {
        template: `
                <div>
                    <b>我是组件内的标签2</b>
                    <b>我是组件内的标签2</b>
                </div>
            `
    });
    // ✖ template中只能有一个根实例 不能有平级实例 第二个div不会显示
    Vue.component('guan-wei3', {
        template: `
                <div>
                    <b>我是组件内的标签31</b>
                </div>
                <div>
                    <b>我是组件内的标签32</b>
                </div>
            `
    });
    new Vue({
        el: '#app'
    });
</script>

2.2 data选项

data选项用于存储组件的数据，与根实例的data不同，组件的data选项必须为函数，数据设置在返回值对象中。

Vue.component('guan-wei1',{
    template:'<b>{{name}}</b>',
    data:function (){
        return {
            name:'关为'
        }
    }
})

使用函数写法的目的是因为data中定义的每一个变量都是独立的存在，不同的实例(<guan-wei1></guan-wei1>)都有各自独立的变量name，其中一个name的值发生改变，其他实例的name值不受干扰。 

例如，如下实例：

<div id="app">
    <!--定义了3个guan-wei1全局组件的实例-->
    <guan-wei1></guan-wei1><br/>
    <guan-wei1></guan-wei1><br/>
    <guan-wei1></guan-wei1>
</div>
<script>
    Vue.component('guan-wei1', {
        template: '<b>{{age}}</b>',
        data: function () {
            return {
                age: Math.floor(Math.random() * 100 + 1) // 年龄随机，每个实例的年龄都不相同
            }
        }
    });
    new Vue({
        el: '#app'
    });
</script>

3. 局部组件

局部注册的组件只能用在当前实例或组件中。

3.1 直接书写组件选项

new Vue({
    el: '#app',
	....
    components: {
        '组件名': {/*组件选项*/},
        '组件名': {/*组件选项*/},
		....
    }
});

3.2 单独配置组件的选项对象 

// 单独配置组件的选项对象
let guanwei = {/*组件选项*/};
new Vue({
    el: '#app',
    components: {
        '组件名': guanwei
    }
});

3.3 ES6 简写形式

let guanwei = {/*组件选项*/};
// ES6简写形式 兼容性较差
new Vue({
    el:'#app',
    components: {
        // 这里直接引入变量名就行，那么组件名也是guanwei，自定义标签<guanwei></guanwei> 
        guanwei
    }
})

4. 全局注册和局部注册的区别 

全局注册的组件能够被不同根实例所使用，而局部组件只能在当前根实例中使用。

<div id="app">
    <guan-wei1></guan-wei1>
    <guan-wei2></guan-wei2>
</div>
<hr/>
<div id="app2">
    <!--全局组件在这里可以使用 因为全局组件能够被所有实例使用-->
    <guan-wei2></guan-wei2>
    <!--这里看不到效果，因为局部组件注册到了app中-->
    <guan-wei1></guan-wei1>
</div>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('guan-wei2',{
       template: '<b>全局组件关为</b>'
    });
    new Vue({
        el: '#app',
        components: {
            'guan-wei1': {
                template: '<b>局部组件关为</b>'
            }
        }
    });
    new Vue({
        el: '#app2'
    });
</script>

组件通信

在组件间传递数据的操作，称为组件通信。

1. 父组件向子组件传值

通过子组件的 props 选项接收父组件的传值。

<!--父组件-->
<div id="app">
    <!--三个子组件-->
    <!--静态内容写法-->
    <guan-wei id="2" name="张三" did="20" dname="销售部"></guan-wei>
    <!--动态绑定写法 传递静态内容-->
    <guan-wei v-bind:id="3" :name="'李四'" :did="30" :dname="'财务部'"></guan-wei>
    <!--动态绑定写法 父组件给子组件传值-->
    <guan-wei :id="id" :name="name" :did="dept.id" :dname="dept.dname"></guan-wei>
</div>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('guan-wei', {
        props: ['id', 'name', 'did', 'dname'],
        template: `
          <div>
              <b>编号：{{ id }}</b><br/>
              <b>姓名：{{ name }}</b><br/>
              <b>部门编号：{{ did }}</b><br/>
              <b>部门名称：{{ dname }}</b>
          </div>
        `
    })
    new Vue({
        el: '#app',
        data: {
            id: 1,
            name: '关为',
            dept: {
                id: 10,
                dname: '研发部'
            }
        }
    });
</script>

注意：

1. 子组件 props 不要与子组件的 data 存在同名属性。
2. props 选项是一个数组形式，其中的值(prop)可以看成是组件(自定义标签)的属性。
3. 父子组件间的所有 prop 都是单向下行绑定的，只能从父组件向子组件传值。
4. 动态绑定以 :prop 或者 v-bind:prop 命名。
5. 动态绑定时，如果要传递常量字符串需要使用''将字符串给包含，如果不加''认为是父组件中的变量名。

Props 命名规则 

建议 prop 命名使用 camelCase ，父组件绑定时使用 kebab-case 。因为 props 中定义的 prop 是书写在 JavaScript 中的，是区分大小写的，而页面中标签的引用是 HTML 效果，HTML 不区分大小写。

<!--html 标签引用 名称是 kebab-case 方式-->
<guan-wei user-id="1" :user-name="'关为'" v-bind:user-age="19" user-sex="男"></guan-wei>
Vue.component('guan-wei', {
        // prop 的命名以驼峰形式书写
        props: ['userId', 'userName', 'userAge', 'userSex']
})

2. 子组件向父组件传值

子组件通过自定义事件的方式向父组件传值。

<!--
    子组件通过事件向父组件传值
    1.当点击子组件的+1按钮时，触发了函数 addNumber2
    2.在函数 addNumber2 中执行了子组件变量 number2 自增和触发了自定义事件 guan
    3.@guan事件触发后执行了函数 addNumber1 自增了 number1 的值
-->
<div id="app">
    <b>{{number1}}</b>
    <guanwei @guan="addNumber1()"></guanwei>
</div>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('guanwei', {
        data() {
            return {
                number2: 1
            }
        },
        template: `
          <div>
          <b>{{ number2 }}</b>
          <button @click="addNumber2">+1</button>
          </div>
        `,
        methods: {
            addNumber2() {
                // 触发了自定义事件guan
                this.$emit('guan');
                this.number2++;
            }
        }
    })
    new Vue({
        el: '#app',
        data() {
            return {
                number1: 1
            }
        },
        methods: {
            addNumber1() {
                this.number1++;
            }
        }
    });
</script>

练习

通过子组件向父组件传值的方式完成如下效果

 

一共有四个子组件，当点击每一个按钮时，子组件的数量自增1，同时父组件书籍总量的值也会自增1。 

刚才的案例中，我们了解到了当子组件触发事件时，父组件可以监控到子组件的触发，那么如何直接在子组件中向父组件传递具体的值呢？

子组件触发事件时可以向父组件传值。

// 触发了自定义事件guan 并且传递了当前文本框的值和一个常量字符串
this.$emit('guan',e.target.value,'aa');

父组件在监听事件时需要接受子组件传递的数据。

// 这里的的参数a和b就是事件传递过来的值
addNumber1(a,b) {
     this.number1 = a + ',' + b;
}

3. 非父子组件传值

非父子组件指的是兄弟组件或完全无关的两个组件。

3.1 兄弟组件传值

兄弟组件之间可以通过父组件进行数据中转。

<div id="app">
    组件1：
    <guanwei01 @guan="change01"></guanwei01>
    <br/>
    父组件：{{value}}<br/>
    组件2：<guanwei02 :value02="value"></guanwei02>
</div>
<script src="../js/vue.min.js"></script>
<script>
    // 第一个组件，当这个组件文本框的值发生改变时，将文本框的值传递给父组件
    Vue.component('guanwei01', {
        data() {
            return {
                value01: 'a'
            }
        },
        template: `
          <div>
          <input v-model="value01"/>
          <button @click="changeComponent">点击我</button>
          </div>
        `,
        methods: {
            changeComponent() {
                // 触发了guan事件 并将value的值传递出去了
                this.$emit('guan', this.value01);
            }
        }
    });
    // 第二个组件，负责接收父组件传递过来的值
    Vue.component('guanwei02', {
        props: ['value02'],
        template: `
          <div>
          {{ value02 }}
          </div>
        `
    });
    new Vue({
        el: '#app',
        data: {
            value: '原始的值'
        },
        methods:{
            change01(a) {
                // 将传递过来的参数赋予变量value
                this.value = a;
            }
        }
    });
</script>

3.2 EventBus 传值

当组件嵌套关系复杂时，根据组件关系传值会较为繁琐。组件为了数据中转，data 中会存在许多与当前组件功能无关的数据。

有没有一种方式能够让任意组件直接进行传值，而不需要找到组件与组件之间的关系在进行中转操作呢？

EventBus（事件总线）是一个独立的事件中心，用于管理不同组件间的传值问题。

好处是：

• 组件和组件之间不需要设置多余的 data 数据。
• 组件和组件不需要找到之间的关系，只需要 EventBus 中心中进行处理就行。

EventBus 仅仅存储的用来进行传值操作的事件功能，而不会真正的通过 EventBus 来存储数据。它只是一个中转操作。

EventBus 通过一个新的 Vue 实例来管理组件传值操作，组件通过给实例注册事件、调用事件来实现数据传递。

// EventBus 通过一个新的 Vue 实例来管理，新的 Vue 实例不需要设置事件选项。空的 Vue 实例。
let bus = new Vue();

EventBus 实现步骤

1. 发送数据的组件触发 bus 事件，接收的组件给 bus 注册对应事件。
2. 接收事件的组件给 bus 注册对应事件通过 $on() 操作。

//传值的组件中
函数(){
    bus.$emit('事件名',参数列表);
}
// 接收的组件中 一般写入到组件选项的 created 中
created(){
    bus.$on('事件名',(参数列表)=>{函数体});
}

完整的代码内容

<div id="app">
    <guanwei01></guanwei01>
    <guanwei02></guanwei02>
</div>
<script src="../js/vue.min.js"></script>
<script>
    let bus = new Vue();
    Vue.component('guanwei01', {
        data() {
            return {
                count: 1
            }
        },
        template: `
          <div>
          <p>{{ count }}</p>
          <button @click="changeCount">+1</button>
          </div>
        `,
        methods: {
            changeCount() {
                this.count++;
                bus.$emit('guan', this.count);
            }
        }
    });
    Vue.component('guanwei02', {
        data() {
            return {
                count: 1
            }
        },
        template: `<b>{{ count }}</b>`,
        created() {
            bus.$on('guan', (yourCount) => {
                this.count = yourCount;
            });
        }
    });
    new Vue({
        el: '#app'
    });
</script>

3.3 其他传值方式

4. 其他通信方式

组件插槽

组件插槽可以快捷的设置组件内容。

<div id="app">
    <!--组件-->
    <guanwei>
        <b>我是一段内容</b>
    </guanwei>
</div>

1. 单个插槽

如果我们希望组件标签可以像 HTML 标签一样设置内容，那么组件的使用灵活度会很高。

但问题是平常我们书写的组件，组件内部书写的内容会被抛弃。这时候我们如果需要内容生效，就需要组件插槽来实现。

1.1 可以通过 <slot> 进行插槽设置。

<div id="app">
    <guanwei>
        <b>自己书写的内容</b>
    </guanwei>
    <guanwei>
        另一段内容<br/>
        <span>组件的主体内容</span>
    </guanwei>
    <guanwei>
        <!--只能获取到父组件的 data 数据-->
        {{ content }}
    </guanwei>
</div>

Vue.component('guanwei',{
    template:`
       <div>
           <b>我是组件的内容</b>
           <slot></slot>
       </div>
    `
});

<slot> 代表的是组件的内容区域， <guanwei> 标签内部书写的内容会自动替换<slot> 位置的内容，这样在多次使用<guanwei> 自定义标签时，可以传递不同的内容来达到快速传值的目的。有点像我们在 Java 中学习的占位符效果，<slot> 就是占位符，自定义中的内容就是要传递的值。

1.2 可以在 <slot> 中为插槽设置默认值

Vue.component('guanwei',{
    template:`
       <div>
           <b>我是组件的内容</b>
           <slot>我是插槽的默认值</slot>
       </div>
    `
});

2. 具名插槽

如果组件中有多个位置需要设置插槽，需要给 <slot> 设置name，这种具有名称的插槽，称为具名插槽。

2.1 具名插槽的写法

<guanwei>
      <!--template标记没有其他作用 就是标识当前内容是赋予那个slot。v-slot:名字-->
      <template v-slot:top>
          {{title}}
      </template>
      <template v-slot:default>
          {{content}}
      </template>
      <template v-slot:bottom>
          {{bottom}}
      </template>
</guanwei>

Vue.component('guanwei', {
    template: `
         <div>
              <h1>我是头部部分</h1>
              <slot name="top"></slot>
              <h1>我是中间部分</h1>
              <slot>我的默认名字是default</slot>
              <h1>我是底部部分</h1>
              <slot name="bottom"></slot>
         </div>
     `
});

2.2 具名插槽的缩写形式

<guanwei>
    <!--可以使用#name的写法，其中默认的部分可以忽略 <template>-->
    <template #top>
        {{title}}
    </template>
    {{content}}
    <template #bottom>
        {{bottom}}
    </template>
</guanwei>

3. 作用域插槽

前边所学到的插槽中只能使用父组件的 data 数据，那么如何能够在插槽中使用子组件的数据呢？

这时候我们就会用到作用域插槽。那么如何设置呢？

组件将需要被插槽使用的数据通过 v-bind:要传递的变量名="要传递的变量名" 绑定给 <slot> ，这种用于给插槽传递数据的属性称为插槽 prop 。

<div id="app">
    <guanwei>
        <!--gwObj是子组件的实例 可以通过子组件的实例获取数据-->
        <template v-slot:default="gwObj">
            父组件内容：{{content}}<br/>
            子组件内容：{{gwObj.content}}
        </template>
    </guanwei>
</div>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('guanwei', {
        template: `
          <div>
          <h3>v-bind:变量名绑定要使用的数据 前后 content 建议一致</h3>
          <h4>第一个 content 是我们起的名称供 template 调用,第二个是 变量名</h4>
          <slot v-bind:content="content"></slot>
          </div>
        `,
        data() {
            return {
                title: '子组件的标题',
                content: '子组件的内容'
            }
        }
    });
    new Vue({
        el: '#app',
        data: {
            title: '父组件的标题',
            content: '父组件的内容'
        }
    });
</script>

内置组件

动态组件

动态组件适用于多个组件频繁切换的处理。

<component> 用于将一个“元组件”渲染为动态组件，以 is 属性值决定渲染那个组件，类似于 v-if 或 v-show 的效果。

<div id="app">
    <!--注意这里组件名如果是常量字符串 必须加入''-->
    <component :is="组件名"></component>
</div>

用于实现多个组件的快速切换，例如选项卡效果。 

<div id="app">
    <component :is="name">{{name}}</component>
    <br/>
    <button @click="changeName('guanwei01')">guanwei01</button>
    <button @click="changeName('guanwei02')">guanwei02</button>
    <button @click="changeName('guanwei03')">guanwei03</button>
</div>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('guanwei01', {template: '<div><b>我是组件关为01</b><br/><slot></slot></div>'});
    Vue.component('guanwei02', {template: '<div><b>我是组件关为02</b><br/><slot></slot></div>'});
    Vue.component('guanwei03', {template: '<div><b>我是组件关为03</b><br/><slot></slot></div>'});
    // Vue根实例
    new Vue({
        el: '#app',
        data: {
            name: 'guanwei01'
        },
        methods: {
            changeName(n) {
                this.name = n;
            }
        }
    });
</script>

is 属性会在每次切换组件时，Vue 都会创建一个新的组件实例。在组件进行切换时都会销毁原有组件，在新建(重新渲染)新的组件。

// 输入框在每次切换时 值都会消失，因为切换组件会导致原有组件销毁并新建新的组件（重新渲染）
Vue.component('guanwei01', {template: '<div><b>我是组件关为01</b><br/><input/></div>'});
Vue.component('guanwei02', {template: '<div><b>我是组件关为02</b><br/><input/></div>'});
Vue.component('guanwei03', {template: '<div><b>我是组件关为03</b><br/><input/></div>'});

keep-alive 组件

主要用于保留组件状态或避免组件重新渲染。

<!--keep-alive 可以使得在切换组件时 避免重新渲染-->
<keep-alive>
  <component :is="name">{{name}}</component>
</keep-alive>

include 属性可以指定哪些组件会被缓存。 

<keep-alive include="guanwei01,guanwei02">
  <component :is="name">{{name}}</component>
</keep-alive>

exclude 属性指定哪些组件不会被缓存。

<keep-alive exclude="guanwei01,guanwei02">
  <component :is="name">{{name}}</component>
</keep-alive>

过渡组件

用于在 Vue 插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡、动画效果。

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

过滤器的基本使用

定义过滤器

new Vue({
     el: '#app',
     data: {
         content: 'Hello,World!'
     },
     filters: {
         guanwei(value) {
             return value.toLowerCase();
         }
     }
});

使用过滤器

<!-- 在双花括号中 -->
{{ 变量名 | 过滤器名}}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="变量名 | 过滤器名"></div>

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，guanwei 过滤器函数将会收到 变量名 的值作为第一个参数。 

过滤器的分类

局部过滤器：只能在当前实例中使用的过滤器。

filters: {
  capitalize: function (value) {
    if (!value) return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

全局过滤器：定义在根实例书写之前，可以被所有实例使用。

Vue.filter('capitalize', function (value) {
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
})

注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器。 

传入多个参数

在定义过滤器时，我们可以接受多个参数值，其中第一个参数永远是固定的，它都是要过滤的文本信息，其他参数值根据需要可以灵活设置。

定义过滤器

Vue.filter('guanwei', function (value, a, b) {
    if (!value) {
        return '';
    }
    return value.substr(a, b);
});

其中，这里的 value 就是要过滤的文本信息，a 和 b 是传递过来的其他值。 

使用过滤器

<div id="app">
    {{ content | guanwei(begin,count) }}
</div>

content 是要传递过去的第一个参数，而 being 和 count 是传递过去的第二个和第三个参数。 

过滤器链

过滤器还可以串联：

{{ content|guanwei01|guanwei02}}

在这个例子中，guanwei01 被定义为接收单个参数的过滤器函数，表达式 content 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 guanwei02，将 guanwei01 的结果传递到 guanwei02 中。 

监听器

VUE 中的监听器 watch 用于监听 data 中的各个属性，当所监听的属性值发生改变时，监听器就会被自动执行。

监听单个属性

<script>
    // vm 起名字是为了另一种写法调用
    let vm = new Vue({
        el: '#app',
        data: {
            message: '初始内容'
        },
        watch: {
            message: function (newValue, oldValue) {
                console.log(this.message + '内容被修改了');
                console.log('原来的内容是：' + oldValue);
                console.log('修改后内容是：' + newValue);
            }
        }
    });
    // 也可以书写成这种形式，注意 vm 是根实例名称 
    vm.$watch('message', function (newValue, oldValue) {
        console.log('全局监听属性：' + newValue + "," + oldValue);
    });
</script>

监听对象属性

监听复杂类型就需要使用到”深度监听“(deep:true) 。 

new Vue({
    el: '#app',
    data: {
        stu: {
            id: 1,
            name: '张三'
        }
    },
    watch: {
        stu: {
            deep: true,  //深度监听,消耗性能
            handler: function (newValue) {
                // 这里的 newValue 都是代表 stu 对象 只能获取到新值
                console.log('修改了stu对象的值，name的新值：' + newValue.name);
            }
        }

    }
});

还有其他几种方式，这里就不一一讲解了。 

计算属性 

计算属性也属于监听的一种，单独的监听器只能监听一个属性，当我们在一个功能中需要监听多个属性时，我们就可以使用“计算属性”来实现，计算属性中可以监听多个属性，当所监听的属性中任意一个被修改时，计算属性就会自动执行。

<div id="app">
    <img :src="'../img/'+getSrc" width="800" height="600"/>
    {{getName}}
    <ul>
        <li v-for="(item,index) in imageData" @click="clickHandler(index)">
            <h3>编号：{{item.id}}-介绍：{{item.name}}</h3>
            <p>路径：{{item.src}}</p>
        </li>
    </ul>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                imageData: [
                    {id: 1, name: '家门口的大湖', src: '1.png'},
                    {id: 2, name: '河对岸树下的猴子', src: '2.png'},
                    {id: 3, name: '下雪天的景色', src: '3.png'},
                    {id: 4, name: '家里养的宠物', src: '4.png'},
                    {id: 5, name: '额 (⊙o⊙)… 这个？', src: '5.png'}
                ],
                imgIndex: 0
            }
        },
        methods: {
            clickHandler(index) {
                this.imgIndex = index;
            }
        },
        /**定义计算属性*/
        computed: {
            /*
                计算属性中默认使用的是getter(获取数据)
                当前函数监控imgData属性和imgIndex属性,当这两个属性任一个
                发生改变时，都会被computed监控到，并执行对应的函数
            */
            getSrc: function () {
                return this.imageData[this.imgIndex].src;
            },
            getName: function () {
                return this.imageData[this.imgIndex].name;
            }
        }
    });
</script>

Vue 路由

Vue-Router 路由是 VUE 中的一个核心插件，该插件用于组件间的切换,在 VUE 中路由是用于选择或指定组件。

Vue-Router 中默认使用的是 hash 模式( VUE 支持多种模式，如 history 和 Abstract 模式，此处只讲 hash 模式)，也就是当出现如下的 URL：http://localhost:8080/#/login 在 URL 中带有#号，#号后面的称为 hash 值，它使用 hash 值做为路由使用。

当 hash 值改变时会执行 onhashchange 事件，根据路由指定的组件重新构建 DOM 结构并显示指定的视图。

下边通过一个 JavaScript 的原生案例，理解 Vue 路由的原理。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由---原生案例</title>
</head>
<body>
<a href="#/login">用户登录</a>
<a href="#/register">用户注册</a>
<div id="app">
</div>
</body>
</html>
<script>
    window.onhashchange = function () {
        let hashVal = location.hash;
        switch (hashVal) {
            case "#/login":
                document.getElementById("app").innerHTML = "用户登录";
                break;
            case "#/register":
                document.getElementById("app").innerHTML = "用户注册";
                break;
        }
    }
</script>

Vue 路由的使用