vue.js学习

2020-11-19

vue.js学习

1. 插值操作

：Mustache语法：可以直接写变量，也可以书写简单的表达式

<div id="app">
    <h2>{{message}}</h2>
    <h2>{{message}} + !!!</h2>
    <h2>{{message + message}}</h2>
    <h2>{{message}} {{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: "hello vue.js",
            url: '<a href="http://jing126.top/">博客</a>'
        }
    })
</script>

v-once: (后面不用跟表达式)表示元素和组件只渲染一次，不会随着数据的改变而改变

1	<h1 v-once>{{message}}</h1>

v-html: 后面跟一个string类型，会将string的html解析出来并且进行渲染

1 2	<h1 v-html="url"></h1> <!-- url: '<a href="http://jing126.top/">博客</a>' 将a标签解析 -->

v-text: 作用与Mustache比较相似，都是用于将数据显示在界面中，接收一个string类型

1 2	<h1>{{message}}</h1> <h1 v-text="message"></h1>

v-pre: 用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

1 2	<h1 v-pre>{{message}} </h1> <!-- 不解析，页面直接输出 {{message}} -->

v-cloak：解决页面显示未编译的Mustache标签

<style>
    [v-cloak]{
        display: none;
    }
</style>
<div id="app" v-cloak>
    <h1>{{message}}</h1>
</div> 
<!-- vue解析之后会删除属性v-cloak -->

2. V-bind

用于绑定一个或多个属性值，或者向另一个组件传递props值（动态绑定）

<!-- 两种写法 -->
<div id="app">
    <img v-bind:src="imgURL" alt="">
    <!-- 语法糖写法 -->
    <a :href="aHref">哔哩哔哩</a>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "hello vue.js",
            imgURL: "https://www.runoob.com/wp-content/uploads/2017/01/vue.png",
            aHref: "https://www.bilibili.com/video/BV15741177Eh?p=14s"
        }
    })
</script>

1.v-bind动态绑定class（对象语法）

<style>
    .active{
        color: red;
    }
</style>
<div id="app2">
    <!--
    直接通过{}绑定一个类
    <h1 v-bind:class="{类名: boolean}">{{message}}</h1>
    -->
    <!--
    通过判断传入多个值
    h1 v-bind:class="{类名1: boolean, 类名2: boolean}">{{message}}</h1>
    -->
    <!-- 和普通类同时存在 不会覆盖原有class属性，只进行合并 -->
    <h1 class="title" :class="{active: isActive, line: isLine}">{{message}}</h1>
    <!--
		如果过于复杂，可以放在一个method或者computed中
		classes是一个计算属性
		<h1 class="title" :class="classes">{{message}}</h1>
	-->
    <button v-on:click="btnClick">点击</button>
</div>
<script>
    const app2 = new Vue({
        el: "#app2",
        data: {
            message: "动态绑定class(对象语法)",
            isActive: true,
            isLine: false
        },
        methods: {
            btnClick: function(){
                this.isActive = !this.isActive
            }
        },
        computed: {
            classes: function(){
                return {active: isActive, line: isLine}
            }
        },
    })
</script>

2.v-bind绑定class（数组语法）

<div  id="app">
    <h1 class="active" :class="['aaa', 'bbb']"></h1>
    <h1 class="active" :class="getClasses()">{{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
            class1: 'aaa',
            class2: 'bbb' 
        },
        methods: {
            getClasses: function(){
                return [this.class1, this.class2]
            }
        },
    })
</script>

3.v-bind绑定style
对象语法
:style=”{key(css属性名):value(属性值)}” ：属性名中不能有“-”
数组语法
:style=”[style,style2]”

<div  id="app">
    <!-- 对象语法 -->
    <h1  :style="{fontSize: finalFontSize + 'px', color: finalColor}">{{message}}</h1>
    <!-- 数组语法 -->
    <h1 :style="[style,style2]">{{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
            finalFontSize: 30,
            finalColor: 'red',
            style: {'font-size':'40px'},
            style2: {'color': 'blue', 'font-style': 'italic'}
        }
    })
</script>

3. 计算属性

某些情况，需要对数据进行转化在显示，或者需要将多个数据结合起来进行显示

<div id="app">
    <h2>{{first + ' ' + second}}</h2>
    <h2>{{first}} {{second}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            first: 'hello',
            second: 'vue.js'
        },
        computed: {
            fullName: function(){
                return this.first + ' ' + this.second
            }
        },
        methods: {
            getFullName: function(){
                return this.first + ' ' + this.second
            }
        },
    })
</script>

计算属性getter和setter方法：

// 完整写法
fullName: {
    set: function(){},
    get: function(){}
}
// 计算属性一般没有set方法，只读属性
fullName: {                  
    get: function(){
        return this.first + ' ' + this.second
    }
}
// 如果使用set方法，可以传递参数修改
set: function(newValue){
    const nums = newValue.split(' ');
    this.first = nums[0];
    this.second = nums[1];
}
// 没有set方法可以简写为：  
fullName: function(){
    return this.first + ' ' + this.second
}

多次调用，且内容不发生改变时，使用计算属性性能更高；内部有缓存，多次使用时只调用一次；当数据发生改变时才重新计算

4. 事件监听

v-on：
作用：绑定事件监听器
缩写：@

<div id="app">
    <h1>{{count}}</h1>
    <button v-on:click="count++">+</button>
    <button v-on:click="count--">-</button>
    <button v-on:click="increment">+</button>
    <button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            // increment: function(){}
            // ES6 对象字面量增强写法
            increment(){
                this.count++;
            },
            decrement(){
                this.count--;
            }
        },
    })
</script>

v-on参数：
1.方法不需要额外参数，方法后的()可以不添加（如果方法本身中有一个参数，会默认将原生事件event参数传递进去）@click=”handle”
2.方法需要传入某个参数，同时需要event时，可以通过$event传入事件 @click=”handle(参数, $event)”

<div id="app">
    <!-- 事件调用的方法没有参数 -->
    <button @click="btn1click">按钮1</button>
    <!-- 输出结果：btn1 ----------- -->
    <button @click="btn1click()">按钮1</button>
    <!-- 输出结果：btn1 ----------- -->
    <!-- 在事件定义时，写函数时省略小括号，但是方法需要一个参数，
vue会默认将浏览器产生的event事件对象作为参数传入到方法 -->
    <button @click="btn2click(123)">按钮2</button>
    <!-- 输出结果：123 "-----------" -->
    <button @click="btn2click()">按钮2</button>
    <!-- 加上()不传递参数，参数为undefined -->
    <!-- 输出结果：undefined  "-----------" -->
    <button @click="btn2click">按钮2</button>
    <!-- 如果只需要event，参数可写为event，使用此写法 -->
    <!-- 输出结果：MouseEvent {isTrusted: true, screenX: 352, screenY: 148, clientX: 263, clientY: 22, …} -->
    <!-- --------------------------------------- -->
    <!-- 方法定义时，需要event对象，同时又需要其他参数，使用$event获取event对象 -->
    <button @click="btn3click(123, $event)">按钮3</button>
    <!-- 输出结果：123 MouseEvent {isTrusted: true, screenX: 345, screenY: 144, clientX: 308, clientY: 13, …} -->
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        },
        methods: {
            btn1click(){
                console.log("btn1","-----------");
            },
            btn2click(abc){           
                console.log(abc,"-----------");
            },
            btn3click(abc, event){           
                console.log(abc,event);
            }
        },
    })
</script>

v-on修饰符
vue提供修饰符来方便处理一些时间：
.stop：调用event.stopPropagation() 停止冒泡
.prevent 调用event.preventDefault() 阻止默认行为
.{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调键修饰符
.native 监听组件根元素的原生事件
.once 只触发一次回调

<div id="app">
    <!-- .stop 阻止冒泡事件 -->
    <div @click="divClick">
        {{message}}
        <button @click.stop="btnClick">按钮1</button>
    </div>
    <!-- .prevent 阻止默认事件 -->
    <form action="/jing126.top">
        <input type="submit" value="提交" @click.prevent="btn2Click">
    </form>
    <!-- .{keyCode | keyAlias}特定键位触发时，回调 -->
    <!-- 回车点击后触发 -->
    <!-- 键别名 -->
    <input type="text" @keyup.enter="keyup">
    <!-- 键代码 -->
    <input type="text" @keyup.enter="keyup">
    <!-- .once 只触发一次 -->
    <button @click.once="btnClick">按钮3</button>

</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        },
        methods: {
            btnClick(){
                console.log('btnClick');
            },
            divClick(){
                console.log('divClick');
            },
            btn2Click(){
                console.log('btn2Click');
            },
            keyup(){
                console.log('keyup');
            }
        },
    })
</script>

5. 条件判断

v-if后面条件为false时，对应的元素及其子元素不会渲染，不会有对应的标签出现在DOM中

<div id="app">
    <h2 v-if="score >= 90">优秀</h2>
    <h2 v-else-if="score >= 80">良好</h2>
    <h2 v-else-if="score >= 60">及格</h2>
    <h2 v-else>不及格</h2>
    <h1>{{level}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
            score: 99
        },
        // 复杂判断建议使用计算属性
        computed: {
            level(){
                let str = '';
                if(this.score >= 90){
                    str = '优秀'
                }else if(this.score >= 80){
                    str = '良好'
                }else if(this.score >= 60){
                    str = '及格'
                }else{
                    str = '不及格'
                }
                return str    
            }
        }
    })
</script>

v-show:用法与v-if相似，决定一个元素是否渲染
v-if当条件为false时，不会有对应的元素在DOM中。
v-show当条件为false时，将元素的display属性设为none。
选择：
如果只有一次切换时，使用v-if
当需要频繁的在显示和隐藏之间切换时，使用v-show

<div id="app">
    <!-- v-if:当条件为false时，包含v-if指令的元素，不会出现在dom中 -->
    <h1 v-if="isShow">{{message}}</h1>
    <!-- v-show:当条件为false时，v-show添加一个行内样式display:none -->
    <h1 v-show="isShow">{{message}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
            isShow: true
        }
    })
</script>

6. 循环遍历

遍历数组：

<div id="app">
    <!-- 不使用索引值 -->
    <ul>
        <li v-for="item in arr" >{{item}}</li>
    </ul>
    <!-- 使用索引值 -->
    <ul>
        <li v-for="(item, index) in arr" >
            {{index + 1}}.{{item}}
        </li>
    </ul>
</div>

遍历对象：

<div id="app">
    <!-- 遍历对象时，如果只获取一个值，获取的是value -->
    <ul>
        <li v-for="value in info" >{{value}}</li>
    </ul>
    <!-- 获取key和value (value,key) -->
    <ul>
        <li v-for="(value, key) in info" >
            {{value}}--{{key}}
        </li>
    </ul>
    <!-- 获取key和value和index (value,key, index) -->
    <ul>
        <li v-for="(value, key, index) in info" >
            {{value}}--{{key}}--{{index}}
        </li>
    </ul>
</div>

:key属性：使用v-for，给对应的元素和组件添加:key属性（需要保证唯一性），给每个节点做一个唯一标识，与Vue的虚拟DOM的Diff算法有关，有了标识可以正确的识别节点，可以找到正确的位置区插入新的节点。作用就是为了高效的更新虚拟DOM。https://www.bilibili.com/video/BV15741177Eh?p=37

7. JavaScript高阶函数使用

const nums = [10, 20, 101, 200, 40, 300, 50]
let newNums = []
// 1.
for(let i = 0; i < nums.length; i++){
    if(nums[i] < 100){
        newNums.push(nums[i])
    }
}
// 2. for(item in items) 
for(i in nums){
    //i为角标
    if(nums[i] < 100){
        newNums.push(nums[i])
    }
}
// 3. for(item of items)
for(i of nums){
    //i为value值
    if(i < 100){
        newNums.push(nums[i])
    }
}

filter、map、reduce

// 取出小于100的数字
const nums = [10, 20, 101, 200, 40, 300, 50]
// filter中的回调函数的返回值必须为boolean值
// true：当返回true时，函数内部会自动将这次回调的n加入到新的数组
// false：当返回false时，函数内部会过滤掉这次的n
let newNums = nums.filter(function(n){
    return n < 100
})
// 将newNums中的结果都*2
// map 
let new2Nums = newNums.map(function(n){
    return n * 2
})
// reduce 对数组中的所有内容进行汇总
let total = nums.reduce(function(preValue, n){
    return prevalue + n //prevalue += n
},0)//0为preValue初始值
// --------------------------------------------
let total = nums.filter(function(n){
    return n < 100
}).map(function(n){
    return n * 2
}).reduce(function(preValue, n){
    return preValue + n
},0)
// ---------------------------------------------
let total = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n);

8. v-model使用

Vue中使用v-model指定实现表单元素和数据的双向绑定

<div id="app">
    <input type="text" v-model="message">
    {{message}}<br>
    <textarea cols="30" rows="10" v-model="message"></textarea>
</div>

原理：v-model其实是一个语法糖，包含v-bind绑定一个value属性和v-on给当前元素绑定input事件

<div id="app">
    <!-- @input= "changeValue" -->
    <input type="text" 
           :value="message"
           @input="message = $event.target.value">
    {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        },
        methods: {
            changeValue(event){
                this.message = event.target.value;
            }
        },
    })
</script>

<!-- input radio使用 v-model -->
<div id="app">
    <!-- 使用 v-modle 绑定单选框时可以不添加name属性 -->
    <label for="male">
        <input type="radio" value="男" id="male" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" value="女"  id="male" v-model="sex">女
    </label>
</div>
<!-- CheckBox使用 -->
<!-- CheckBox单选框 -->
<label for="agree">
    <input type="checkbox"   id="agree" v-model="agree">同意
    <button :disabled="!agree">下一步</button>
</label>
<br>
<!-- checkbox多选框 -->
<input type="checkbox" v-model="hobbies" value="足球">足球
<input type="checkbox" v-model="hobbies" value="篮球">篮球
<input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球
<input type="checkbox" v-model="hobbies" value="乒乓球">乒乓球
<h2>{{hobbies}}</h2>
<!-- select使用 -->
<!-- 选择一个 -->
<select name="check" v-model="hobby">
    <option value="" disabled>---请选择---</option>
    <option >足球</option>
    <option >篮球</option>
    <option >羽毛球</option>
    <option >乒乓球</option>
</select>
<h2>当前选择：{{hobby}}</h2>
<!-- 选择多个 -->
<select name="check" v-model="hobbies" multiple>
    <option value="" disabled>---请选择---</option>
    <option >足球</option>
    <option >篮球</option>
    <option >羽毛球</option>
    <option >乒乓球</option>
</select>
<h2>当前选择：{{hobbies}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
            sex: '男',
            agree: false,//单选框
            hobbies: [],//多选框
            hobby: ''
        },

    })
</script>

修饰符：
lazy修饰符：
默认情况下，v-model默认是在input事件中同步输入框数据，一旦数据发生改变，data中的数据就会自动发生改变；lazy修饰符可以让数据在失去焦点或者回车时才更新
number修饰符：
默认情况下，输入框中输入的字母或者数字都会当做字符串类型进行处理，number修饰符可以让输入框中输入的内容自动转为数字类型
trim修饰符：
如果输入的内容首尾有很多空格，trim修饰符可以过滤内容左右两边的空格

<!-- 修饰符 -->
<!-- lazy -->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!-- number -->
<input type="number" v-model.number="age">
<h2>{{age + '---' + typeof age}}</h2>
<!-- trim -->
<input type="text" v-model.trim="message">

9. 组件

将一个完整的页面分成多个组件，每个组件用于实现页面的一个功能块，每个组件又可以细分多个组件。

vue.js组件化思想： Component Tree

使用步骤：
创建组件构造器（调用Vue.extend()方法创建组件构造器）
注册组件（调用Vue.component()方法注册组件）
使用组件（在Vue实例的作用范围内使用组件）

<div id="app">
    <!-- 3.使用组件 -->
    <my-component></my-component>

</div>
<script src="../js/vue.js"></script>
<script>
    // 1.创建组件构造器
    const con = Vue.extend({
        template: '<div><h1>vue.js 组件使用</h1></div>'    
    })
    // 2.注册组件
    Vue.component('my-component', con)
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        }
    })
</script>

9.1 全局组件和局部组件

// 1.创建组件构造器
const con = Vue.extend({
    template:'<div><h1>vue.js 组件使用</h1></div>'    
})
// 2.注册组件(全局组件，多个Vue实例都可以使用)
Vue.component('my-component', con)
const app = new Vue({
    el: '#app',
    data: {
        message: 'hello vue.js'
    },
    // 局部组件
    components: {
        myCpn: con //<my-cpn></my-cpn>
    }
})

9.2 父组件与子组件

// 子组件
const con1 = Vue.extend({
    template: '<div><h1>组件1</h1></div>' 
});
// 父组件
const con2 = Vue.extend({
    template: '<div><h1>组件1</h1></div>',
    components: {
        // 注册子组件
        myCpn1: con1
    }
});
const app = new Vue({
    el: '#app',
    data: {
        message: 'hello vue.js'
    },
    // 局部组件
    components: {
        myCpn2: con2
    }
})

9.3 组件注册语法糖

// 全局组件注册
Vue.component('my-component', {
    template:'<div><h1>vue.js 组件使用</h1></div>'    
})
const app = new Vue({
    el: '#app',
    data: {
        message: 'hello vue.js'
    },
    // 局部组件注册
    components: {
        myCpn: {
            template:'<div><h1>vue.js 组件使用</h1></div>'    
        } //<my-cpn></my-cpn>
    }
})

9.4 组件模板分离

<!-- 使用script标签 -->
<script type="text/x-template" id="con1">
        <div>
            <h1>使用script标签抽离</h1>
    </div>
</script>
<!-- 使用template标签 -->
<template id="con2">
    <div>
        <h1>使用template标签抽离</h1>
    </div>
</template>
<script>
    Vue.component('my-cpn', {
        // template:'#con1'
        template: '#con2'
    })
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        },           
    })
</script>

9.5 组件数据存放

组件对象也有一个data属性（也有methods等属性），但必须是一个函数，这个函数返回一个对象，对象内部保存数据。

Vue.component('my-cpn', {
    template: '#con2',
    data() {
        return {
            title: 'data函数返回对象'
        }
    },
})

组件中的data为什么必须是个函数？
避免共用一个对象，造成相互影响，每个实例可以维护一份被返回对象的拷贝

9.6 父子组件的通信

通过props向子组件传递数据
方式一：字符串数组，数组中的字符串就是传递时的名称

<!-- 组件通信 -->
<div id="app">       
    <cpn :citems='items' :cmessage='message'></cpn>
</div>
<template id="cpn">
    <!-- 使用props中的属性 -->
    <div>
        <h1>{{cmessage}}</h1>
        <ul>
            <li v-for="item in citems" >{{item}}</li>
        </ul>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const cpn = {
        template: '#cpn',
        props: ['citems', 'cmessage']
    }
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
            items: ['A', 'B', 'C', 'D']
        }, 
        components: {
            // 对象增强写法 cpn: cpn
            cpn
        }          
    })
</script>

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等；使用对象写法可以进行数据验证
支持类型：
String、Number、Boolean、Array、Object、Date、Function、Symbol
当有自定义构造函数时，验证也支持自定义的类型

const cpn ={
    template: '#cpn',
    props:{
    	//1.类型限制
        //citems: Array,
        //cmessage: String,
        //cmessage: [String, Number] 多个可能类型
        //2.提供默认值
        cmessage: {
            type: String,
            default: 'hello',
            //加上required就必须传值，没有传值就报错
            required: true
        },
        //类型是对象或者数组时，默认值必须是一个函数
        citems: {
        	type: Array,
            default(){
                return []
            }
    	}
	}
}
function Person(name, age){
    
}

通过事件向父组件发送消息

自定义事件流程：
在子组件中，通过$emit()来触发事件；在父组件中，通过v-on来监听子组件事件（使用this.$emit(‘事件名’, 参数)，给父组件添加v-on:事件名进行绑定）

<!-- 组件通信 -->
<!-- 子传父 -->
<div id="app">
    <!-- 绑定自定义事件 -->
    <cpn @cpn-click='cpnClick'></cpn>
</div>
<!-- 模板 -->
<template id="cpn">
    <div>
        <button v-for="(item, index) in categories" 
                :key="index"
                @click="btnClick(item)">
            {{item.name}}
        </button>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    // 子组件
    const cpn = {
        template: '#cpn',
        data() {
            return {
                categories: [
                    {id: 'aaa', name: '热门推荐'},
                    {id: 'bbb', name: 'hello'},
                    {id: 'ccc', name: 'vue.'},
                    {id: 'ddd', name: 'js'},
                ]
            }
        },
        methods: {
            //自定义事件，使用this.$emit将数据发送给父组件
            btnClick(item){
                this.$emit('cpn-click',item)
            }    
        },

    }
    // 父组件
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        },
        components: {
            cpn
        },
        methods: {
            cpnClick(item){
                console.log(item)
            }
        }
    })
</script>

9.7 父子组件的访问

父组件访问子组件：使用$children或$refs

<div id="app">
    <cpn></cpn>
    <cpn ref="reference"></cpn>
    <button @click="btnClick">调用子组件中方法</button>
</div>
<template id="cpn">
    <div>
        <h1>子组件</h1>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        },
        components: {
            cpn: {
                template: '#cpn',
                methods: {
                    showMessage(){
                        console.log('showMessage执行')
                    }
                },
            }
        },
        methods: {
            btnClick(){
            // 1.使用$children获取子组件（数组）
            // this.$children[0].showMessage()
            // 2.使用$refs获取子组件（对象类型）默认空对象，需要给标签加上ref=''
                console.log(this.$refs.reference)
                this.$refs.reference.showMessage()
            }
        },
    })
</script>

子组件访问父组件：使用$parent访问父组件，使用$root访问根组件

<div id="app">
    <cpn></cpn>
</div>
<template id="cpn">
    <div>
        <h1>子组件</h1>
        <cpn-child></cpn-child>
    </div>
</template>
<template id="cpnChild">
    <div>
        <h1>cpn子组件</h1>
        <button @click='btnClick'>访问父组件</button>
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        },
        //注册cpn组件
        components: {
            cpn: {
                template: '#cpn',
                methods: {
                    showMessage(){
                        console.log('showMessage执行')
                    }
                },
                //注册cpn子组件
                components: {
                    cpnChild:{
                        template: '#cpnChild',
                        methods: {
                            btnClick(){
                                // 访问父组件
                                this.$parent.showMessage()
                                // 访问根组件
                                console.log(this.$root.message)
                            }
                        },
                    }
                }
            }
        },
    })
</script>

10. slot插槽

组件插槽：为了让封装的组件更加具有扩展性，让使用者可以决定组件内部展示的内容

10.1 基本使用

<!-- 插槽基本使用 -->
<div id="app">
    <!-- 不添加内容 -->
    <cpn></cpn>
    <!-- 覆盖插槽中的按钮 -->
    <cpn><span>{{message}}</span></cpn>
    <!-- 添加多个都会显示 -->
    <cpn>
        <span>{{message}}</span>
        <h2>{{message}}</h2>
    </cpn>
</div>
<script src="../js/vue.js"></script>
<template id="cpn">
    <div>
        <h2>{{message}}</h2>
        <!-- <slot></slot> -->
        <!--
可以加默认值，如果使用组件时不添加就会展示，如果添加标签则会被覆盖
-->
        <slot><button>按钮</button></slot>
    </div>
</template>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js'
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        message: '插槽的基本使用'
                    }
                },
            }
        }
    })
</script>

10.2 具名插槽

添加替换内容时必须要给标签添加solt=’’属性才能使用。

<!-- 具名插槽使用 -->
<div id="app">        
    <!-- 不添加solt属性无法替换 -->
    <cpn><span>{{message}}</span></cpn>
    <!-- name为left的插槽使用 -->
    <cpn>
        <span slot="left">{{message}}</span> 
        <!-- 2.6.0之后写法，只能加载template上 -->
        <template v-slot:center>              
            <input type="text" >                                         
        </template>
    </cpn>
</div>
<script src="../js/vue.js"></script>
<template id="cpn">
    <div>
        <!-- <h2>{{message}}</h2>             -->
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
    </div>
</template>
<!--
	结果：
	左边 中间 右边
	hello vue.js 中间 右边
-->

10.3 编译作用域

<!-- 编译作用域 -->
<!-- 父组件模板的所有东西都会在父级作用域内编译 -->
<!-- 子组件模板的所有东西都会在子级作用域内编译 -->
<div id="app">
    <!-- 使用的是vue实例作用域，组件显示 -->
    <cpn v-show="isShow"></cpn>
</div>
<script src="../js/vue.js"></script>
<template id="cpn">
    <div>
        <!-- 使用的是cpn组件中的message -->
        <h1>{{message}}</h1>
        <!-- 使用的是cpn组件的作用域，按钮不显示 -->
        <button v-show="isShow">按钮</button>
    </div>
</template>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
            isShow: true
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        message: 'cpn组件',
                        isShow: false
                    }
                },
            }
        }
    })
</script>

10.4 作用域插槽

父组件替换插槽的标签，内容由子组件提供

<!-- 作用域插槽 -->
<div id="app">
    <cpn></cpn>
    <cpn>
        <!-- v-slot绑定一个对象 -->
        <template v-slot="language">
            <span>{{language.data.join(' - ')}}</span>
        </template>
    </cpn>
</div>
<script src="../js/vue.js"></script>
<template id="cpn">
    <div>
        <!-- :任意的名字='data' -->
        <slot :data='pLanguages'>
            <ul>
                <li v-for="item  in pLanguages" >{{item}}</li>
            </ul>
        </slot>
    </div>
</template>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return {
                        pLanguages: ['Java', 'JavaScript', 'c++', 'php', 'C#']
                    }
                },
            }
        }
    })
</script>

模块化开发

ES6模块化实现

export基本使用：（用于导出变量）导出模块对外提供的接口

// 导出 1
let flag = true;
function sum(){}
export {
    flag,
    sum
}
// 2.
export let name = '';
// 3.导出函数/类
export function sum(){}
export class Person(){
    run(){}
}
// 4 export default 同一个模块中，不允许同时存在多个
export default function(){
    console.log("hello vue.js")
}
import myFunction from "./a.js";
//----------------------------------------------
let address = '';
export default address;
import addr from "./a.js";

import导出：加载模块引入js文件，类型设置为module import {} from “”

// 导入{}中定义的变量
import {flag, sum} from "./a.js";
// 直接导入export定义的变量
import {flag, sum} from "./a.js";
// 导入function/class
import {sum, Person} from "./a.js";
// 导入export default中的内容（可以修改变量名）
import myFunction from "./a.js";
import addr from "./a.js";
// 全部导入 as：起别名
import * as aaa from "./a.js";
//aaa.flag

Vue CLI

安装 cnpm install -g @vue/cli

拉取2.x模板：cnpm install -g @vue/cli-init

初始化项目：
2.x：vue init webpack my-project
3.x：vue create my-project

runtime-compiler
template -> ast(抽象语法树) -> render -> vdom(虚拟dom) -> UI

runtime-only(性能更高，代码量更少)
render -> vdom -> UI

vue cli 4创建项目：vue create 项目名

1
2
3

new Vue({
  render: h => h(App),
}).$mount('#app')//$mount相当于el: "app"

Vue-Router

核心：改变URL页面不进行整体的刷新
单页面富应用阶段(SPA)：前后端分离的基础上加上一层前端路由

路由index.js

// 配置路由相关的信息
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter);
// 3.配置路由和组件之间的应用关系
const routes = [
    {
        path: "/",
        name: "Home",
        component: Home,
    },
    {
        path: "/about",
        name: "About",
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () =>
        import(/* webpackChunkName: "about" */ "../views/About.vue"),
    },
        ];
        // 2.创建VueRouter对象
        const router = new VueRouter({
        routes,
    });
    // 4.将router对象传入到Vue实例
    export default router;

1. 安装vue-router

安装：npm install vue-router –save
模块化工程中使用（通过Vue.use(插件)使用）
导入路由对象，并且调用Vue.use(VueRouter)
创建路由实例，并且传入路由映射配置
在vue实例中挂载创建的路由实例

import Vue from "vue";
import VueRouter from "vue-router";
// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter);
// 2.创建VueRouter对象
const router = new VueRouter({
  routes,
});
// main.js中
new Vue({
    // 挂载路由实例
  router,
  render: h => h(App)
}).$mount('#app')

2. 使用vue-router

1.创建路由组件
2.配置路由映射：组件和路径映射关系
3.使用路由：通过<router-link>和<router-view>

// 3.配置路由和组件之间的应用关系
const routes = [
    {
        path: "/home",
        component: Home,
    },
    {
        path: "/about",
        component: About,
    },
];
// 2.创建VueRouter对象
const router = new VueRouter({
    routes,
    mode: "history", //默认hash url：#/xxx history模式：/xxx
});

<!-- App.vue中使用router-link和router-view -->
<template>
    <div id="app">
        <!-- router-link 是vue-router中内置组件，默认会被渲染成<a>标签 -->
        <!-- tag属性可以指定<router-link>之后渲染成什么组件 tag="button" -->
        <!-- replace不会留下history记录，指定replace后退键不能返回到上一个页面 -->
        <!--active-class：router-link对应的路由匹配成功时，自动给当前元素添加一个router-link-active的class属性 通过active-class可以修改默认的名称；也可以在router文件夹下的index.js中可以添加linkActiveClass："" 进行修改-->
        <router-link to="/home" replace>首页</router-link>
        <router-link to="/about">关于</router-link>
        <!-- 根据当前的路径，动态渲染出不同的组件 -->
        <router-view></router-view>
    </div>
</template>

通过代码方式修改路由：this.$router.push(“path”) 、this.$router.replace(“path”)

<button @click="btnHome">首页</button>
<button @click="btnAbout">关于</button>
<script>
    export default {
        name: "App",
        methods: {
            btnHome() {
                this.$router.push("/home");
            },
            btnAbout() {
                this.$router.replace("/about");
            },
        },
    };
</script>

3. 动态路由

<!-- user.vue -->
<template>
<div>
    <h2>{{ userId }}</h2>
    <!-- 通过$route.params.userId拿到属性 -->
    <h2>{{ $route.params.userId }}</h2>
    </div>
</template>
<script>
    export default {
        name: "User",
        computed: {
            userId() {
                this.$route.params.userId;
            },
        },
    };
</script>
<!-- App.vue -->
<router-link :to="'/user/' + userId">用户</router-link>
<script>
    export default {
        name: "App",
        data() {
            return {
                userId: "zhangsan",
            };
        },
    };
</script>

// 导入User组件
import User from "../components/User.vue";
// 配置路由和组件关系
const routes = [
    {
        path: "/user/:userId",
        component: User,
    },
]

4. 路由懒加载

打包构建应用时，JavaScript包变得非常大，影响页面的加载；将不同路由对应的组件分割成不同的代码块，然后当路由被访问时在加载对应组件，就会更加高效

懒加载方式：
1.结合Vue的异步组件和webpack的代码

const Home = 
      resolve => {
          require.ensure(
              ['../components/Home.vue'],
              () => {resolve(require('../components/Home.vue'))}
          )
      };

2.AMD写法

1	const About = resolve => require(['../components/About.vue'],resolve);

3.ES6中，更简单的写法组织Vue异步组件和webpack的代码分割

1	const Home = () => import('../components/Home.vue')

// router/index.js
import Vue from "vue";
import VueRouter from "vue-router";
// import Home from "../components/Home.vue";
// import About from "../components/About.vue";
// import User from "../components/User.vue";
const Home = () => import("../components/Home.vue");
const About = () => import("../components/About.vue");
const User = () => import("../components/User.vue");
// 1.通过Vue.use(插件)，安装插件
Vue.use(VueRouter);
// 3.配置路由和组件之间的应用关系
const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: Home,
  },
  {
    path: "/about",
    component: About,
  },
  {
    path: "/user/:userId",
    // component: User,
    component: () => import("../components/User.vue"),
  },
];
// 2.创建VueRouter对象
const router = new VueRouter({
  routes,
  mode: "history",
});
// 4.将router对象传入到Vue实例
export default router;

5. 嵌套路由

一个路径映射一个组件，访问这两个路径也会分别渲染两个组件

实现步骤：
创建对应的子组件，并且在路由映射中配置对应的子路由
在组件内部使用route-view标签

<!-- 1.创建组件 -->
<template>
  <div>
    <h2>嵌套路由使用</h2>
  </div>
</template>

<script>
export default {
  name: "HomeNews",
  data() {
    return {};
  },
  components: {},
};
</script>

<style scoped>
</style>

// es6配置懒加载
const HomeMessage = () => import("../components/HomeMessage.vue");
const HomeNews = () => import("../components/HomeNews.vue");
// 通过children配置子路由
{
    path: "/home",
    component: Home,
    children: [
      // 默认路径
      {
        path: "",
        redirect: "news",
      },
      {
        path: "news",
        component: HomeNews,
      },
      {
        path: "message",
        component: HomeMessage,
      },
    ],
  },

6. 传递参数

两种类型：params和query

params类型：
配置路由格式：/router/:id
传递方式：path后面跟上对应的值
传递后形成的路径：/router/xxx
取值： $route.params.id

{
    path: "/user/:userId",
    // component: User,
    component: () => import("../components/User.vue"),
},
// <router-link :to="'/user/' + userId">用户</router-link>    
// url: http://localhost:8080/user/zhangsan
// {{ $route.params.userId }}
// userId() {
//      this.$route.params.userId;
//    },

query类型：
配置路由格式：/router
传递方式：对象中使用query的key作为传递方式
传递后形成的路径：/router?xxx=xxx
取值：$route.query.xxx

//配置路径
{
    path: "/profile",
    component: Profile,
},
// router-link 配置
//<router-link
//      :to="{ path: '/profile', query: { name: 'jing', age: '22' } }"
//></router-link>
// url:http://localhost:8080/profile?name=jing&age=22   
//  取值
//<h3>{{ $route.query }}</h3>
//<h3>name: {{ $route.query.name }}</h3>
//<h3>age: {{ $route.query.age }}</h3>

*. 导航守卫

前置守卫：beforeEach(guard: NavigationGuard): Function
beforeEach((to, from, next) => {next()})

后置钩子：afterEach(hook: (to: Route, from: Route) => any): Function

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

动态修改标题

// 全局守卫
{
    path: "/profile",
    component: Profile,
    meta: {//元数据 （描述数据）
      title: "档案",
    },
  },
// 前置钩子      
router.beforeEach(function(to, from, next) {
    // 修改标题
  document.title = to.matched[0].meta.title;
  next();//必须调用，之后才能执行其他的钩子
});

*.keep-alive

keep-alive是Vue内置组件，可以使被包含的组件保留状态，或避免重新渲染
include属性：字符或正在表达式，只有匹配的组件会被缓存
exclude属性：字符或正在表达式，匹配的组件不会被缓存
include=”name,name…”
router-view也是组件，如果直接被包在keep-alive中，所有路径匹配到的视图组件都会被缓存

1
2
3

<keep-alive>
    <router-view></router-view>
</keep-alive

*当点击其他组件后，再次点击当前组件后，返回的是跳转前的状态

// Home.vue
export default {
  name: "Home",
  data() {
    return {
      path: "/home/news",
    };
  },
  components: {},
  created() {
    console.log("创建");
  },
  destroyed() {
    console.log("销毁");
  },
    // **
  activated() {
    this.$router.push(this.path);
  },
  beforeRouteLeave(to, from, next) {
      // 记录离开时路径
    this.path = this.$route.path;
    next();
  },
};

*解决重复点击菜单跳转报错

// router/index.js
// 解决重复点菜单报错
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};

Vuex

为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
多个组件共享时需要：用户登录状态、用户名称、商品收藏等把这些状态信息，放在统一的地方进行保存和管理（响应式）

单向数据流

state单一状态树，单一数据源https://vuex.vuejs.org/zh/guide/state.html一个项目中使用一个store，存放数据

getters类似计算属性

Mutation状态更新（同步函数）：vuex的store状态的更新唯一方式，提交Mutation，Mutation主要包括两部分：字符串的事件类型，回调函数（handler），该回调函数的第一个参数就是state；事件类型：increment，回调函数(state) {}；mutation更新数据时，携带参数（载荷Payload）(state,参数)；使用时在组件中使用this.$store.commit(“事件类型”)进行提交封装
提交风格：
普通提交：方法中使用this.$store.commit(“事件类型”)进行提交封装
特殊提交封装：使用this.$store.commit({
type: ‘事件类型’,
参数// mutation中拿到的是个对象，payload.属性
})
Mutation响应规则：Vuex的store中的state是响应式的，当state中的数据发生改变时，Vue组件会自动更新，但必须要遵守一些Vuex对应的规则：
提前在store中初始化好所需要的属性
当给state中的对象添加新属性时，使用Vue.set(obj,key|Number,值)或者用新对象给旧对象重新赋值

// store/index.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    counter: 0,
  },
  getters: {
    powerCounter(state) {
      return state.counter * state.counter;
    },
  },
  mutations: {
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
  },
  actions: {
      // this.$store.dispatch('aIncrement')
      aIncrement(context){
          setTimeout(() => {
              context.commit("increment")
          },1000)
      }
  },
  modules: {},
});

actions：类似Mutation，代替Mutation进行异步操作

modules：解决store对象变得臃肿，可以将store分割成模块，每个模块拥有自己的state、mutations、actions、getters等

axios

基本使用： npm install axios

import Vue from "vue";
import App from "./App.vue";
import axios from "axios";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

// 使用全局axios请求
axios({
  url: "http://123.207.32.32:8000/home/multidata",
  method: "get",
}).then((response) => {
  console.log(response);
});

axios({
  url: "http://123.207.32.32:8000/home/data",
  method: "get",
  // get 请求参数拼接
  params: {
    type: "pop",
    page: 1,
  },
}).then((response) => {
  console.log(response);
});

并发请求：

// axios发送并发请求
axios
  .all([
    axios({
      url: "http://123.207.32.32:8000/home/multidata",
    }),
    axios({
      url: "http://123.207.32.32:8000/home/data",
      method: "get",
      // get 请求参数拼接
      params: {
        type: "pop",
        page: 1,
      },
    }),
  ])
  /*.then((results) => {
    console.log(results);
  });*/
	.then(axios.spread(res1, res2) => {
    // 获取两个结果
})

全局配置：
axios.defaults.baseURL = ‘’请求根路径
axios.defaults.timeout = 超时时间（毫秒）
常见配置：
url：请求地址
method：请求类型
baseURL：请求根路径
transformRequest:[function(data)]：请求前的数据处理
transformResponse:[function(data)]：请求后的数据处理
headers:{‘x-Requested-With’:’XMLHttpRequest’}自定义请求头
params：URL查询对象
paramsSerializer:function(params){}查询对象序列化函数
data:{key:’’}：request body请求体
timeout：超时设置
withCredentials:false：跨域是否带Token
adapter:funtion(resolve, reject, config){}：自定义请求处理
auth:{}身份验证信息
responseType:’’：响应的数据格式json、blob、document、arraybuffer、text、stream

创建对应axios实例：

// 创建对应axios实例
const instance1 = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 5000,
});
instance1({
    url: "/home/multidata",
}).then((res) => {
    console.log(res);
});

拦截：
请求拦截：
全局：axios.interceptors.request.use(config => {
进行操作后必须return config
}, err => {})
局部：创建的axios实例.intercetors.request.use()
响应拦截：
全局：axios.interceptors.response.use(result => {result.data}, err => {})
局部：创建的axios实例.intercetors.response.use()

webpack

安装：npm install webpack webpack-cli -g

打包：webpack [file]

使用webpack.config.js配置文件：