Vue整理

一、Vue

Vue是遵循MVVM架构模式实现的前端框架

npm导入路径：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js

MVVM架构 Model数据 View模板 ViewModel处理数据

1、ES6的常用语法：

变量的定义，var，let，const

  1. Var 变量的提升，函数作用域 全局作用域，重新定义不会报错，可以重新赋值
  2. let 块级作用域 { }，重新定意会报错，可以重新赋值
  3. const 定义不可修改的常量，不可以重新赋值

箭头函数的this取决于当前的上下文环境：类似于python的匿名函数

this指当前函数最近的调用者，距离最近的调用者

解构：
字典解构 {key,key,...} 注：要使用key才行
数组结构 [x,y,.....]

    let obj = {
        a:1,
        b:2
    };
    let hobby = ["吹牛", "特斯拉", "三里屯"];
    let {a,b} = obj;
    let [hobby1,hobby2,hobby3] = hobby;
    console.log(a);
    console.log(b);
    console.log(hobby1);
    console.log(hobby2);
    console.log(hobby3);

2、Vue的核心思想是数据驱动视图

1）Vue的常用指令

v-text：获取文本内容

v-html：获取html内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-text="name"></h2>
    <h3 v-text="age"></h3>
    <div v-html="hobby"></div>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        name:"PDD",
        age:18,
        hobby:"<ul><li>学习</li><li>刷剧</li><li>Coding</li></ul>"
    }
});
</script>
</body>
</html>

v-for：循环获取数组

v-for：循环获取字典

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(course,index) in course_list" :key="index">{{index}}:{{course}}</li>
        <li v-for="(item,index) in one" :key="index">
            {{index}}:{{item.name}}:{{item.age}}:{{item.hobby}}
        </li>
    </ul>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        course_list:["classname","teacher","student"],
        one:[{name:"eric",age:"18",hobby:"music"},
            {name:"bob",age:"18",hobby:"dance"}]
    }
})
</script>
</body>
</html>

v-bind：自定制显示样式，动态绑定属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_app{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:class="{my_app:is_show}">
    </div>
    <img :src="my_src" alt=""> <!--  v-bind: 可以简写为 : -->
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        is_show:true, //true表示显示style样式，false不显示style样式
        my_src:"http://i0.hdslb.com/bfs/archive/590f87e08f863204820c96a7fe197653e2d8f6e1.jpg@1100w_484h_1c_100q.jpg"
    }
})
</script>
</body>
</html>

v-on@事件名：事件绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- v-on@click只会执行一次，是在第一次进入页面的时候，@click会循环执行 -->

    <button @click="my_click('hello')" v-on="{mouseenter:my_enter,mouseleave:my_leave}">
        点击弹窗
    </button>
<!--    <button @click="my_click('hello')" @mouseenter="my_enter",@mouseleave="my_leave">  繁琐写法-->
<!--        点击弹窗     -->
<!--    </button>    -->
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{},
    methods:{
        my_click:function(x){
            alert("luke" + x)
        },
        my_enter:function(){
            console.log("鼠标移入事件")
        },
        my_leave:function(){
            console.log("鼠标移出事件")
        }
    }
})
</script>
</body>
</html>

v-if：条件判断
v-if v-else-if v-else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="role == 'admin' ">管理员你好</div>
    <div v-else-if="role == 'hr' ">查看简历</div>
    <div v-else>没有权限</div>

</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        role:"admin"
    },
    methods:{}
})
</script>
</body>
</html>

v-show：布尔值类型判断

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-show="admin">管理员你好</div>
    <div v-show="hr">查看简历</div>
    <div v-show="others">没有权限</div>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        admin:true,
        hr:false,
        others:false,
    },
    methods:{}
})
</script>
</body>
</html>

综合案例

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-show="admin">管理员你好</div>
    <div v-show="hr">查看简历</div>
    <div v-show="others">没有权限</div>
    <button @click="my_click">点击显示或隐藏</button>
    <div v-show="is_show">hello</div>
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        admin:true,
        hr:false,
        others:false,
        is_show:false
    },
    methods:{
        my_click:function(){
            this.is_show=!this.is_show
        }
    }
})
</script>
</body>
</html>

v-model：获取数据，标签的属性设置 ，获取其属性值，用户信息等，例如input，select等

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="username">
    {{username}}
    <hr>
    <textarea type="text" cols="30" rows="10" v-model="article">
        {{article}}
    </textarea>
    <hr>
    <select name="" v-model="choices">
        <option value="1">阿萨德</option>
        <option value="2">主线程</option>
        <option value="3">权威</option>
    </select>
    {{choices}}
    <hr>
    <select name="" v-model="choices_multiple" multiple>
        <option value="1">阿萨德</option>
        <option value="2">主线程</option>
        <option value="3">权威</option>
    </select>
    {{choices_multiple}}
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        username:"1234",
        article:"123456",
        choices:"",
        choices_multiple:['1']
    },
    methods:{}
})
</script>
</body>
</html>

v-model.lazy：失去光标绑定数据事件
v-model.lazy.number：数据类型的转换
v-model.lazy.trim：清除空格

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model.lazy="username">
        {{username}}
    <hr>
    <!--  前端默认只显示一个空格，pre使数据原始化展示  -->
    <input type="text" v-model.lazy="username">
        <pre>{{username}}</pre>
    <hr>
    <!--    -->
    <input type="text" v-model.lazy.trim="username_trim">
        <pre>{{username_trim}}</pre>
    <hr>
    <input type="text" v-model.lazy.number="article">
    {{article}}
    {{typeof article}}
</div>
<script>
const app = new Vue({
    el:"#app",
    data:{
        username:"1234",
        username_trim:"1234",
        article:"123456"
    },
    methods:{}
})
</script>
</body>
</html>

2）自定义指令

v-自定义的函数（指令）：自定制函数（指令）
Vue.directive（）

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="my_box" v-pin.right.top="pinned"></div>
</div>
<script>
    Vue.directive("pin",function(el,binding){
        console.log(el); //指令的标签元素
        console.log(binding); //指令的所有信息
        let adr = binding.modifiers;
        if(binding.value){
            //定位到浏览器的右下角
            el.style.position = "fixed";
            // el.style.right='0';
            // el.style.bottom='0';
            //指令修饰符定位
            for (let posi in adr){
                el.style[posi]=0;
            }
        }else{
            el.style.position = "static";
        }
    });
    const app = new Vue({
        el:"#app",
        data:{
            pinned:true
        }
    })
</script>
</body>
</html>

3）方法集合

v-text
v-html
v-for
v-if v-else-if v-else
v-bind 绑定属性
v-on 绑定事件
v-show display
v-model 数据双向绑定
input
textarea
select
指令修饰符
.lazy
.number
.trim
自定义指令
Vue.directive（'指令名'，function(el,参数binding){ }）
el 绑定指令的标签元素
binding 指令的所有信息组成的对象
value 指令绑定数据的值
modifiers 指令修饰符组成的对象

二、Vue获取DOM，数据监听，组件，混合和插槽

注：“:” 是指令 “v-bind”的缩写，“@”是指令“v-on”的缩写；“.”是修饰符。

1、Vue获取DOM

给标签加ref属性：ref="my_box"
获取：this.$refs.my_box;

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div ref="my_box"></div>
    <button v-on:click="my_click">点击显示文本</button>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{},
        methods:{
            my_click: function(){
                let ele = this.$refs.my_box;
                console.log(ele);
                ele.innerText = "hello"
            }
        }
    })
</script>
</body>
</html>

computed：计算属性，放的是需要处理的数据

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>科目</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>Python</td>
            <td><input type="text" v-model.number="python"></td>
        </tr>
        <tr>
            <td>Java</td>
            <td><input type="text" v-model.number="java"></td>
        </tr>
        <tr>
            <td>Go</td>
            <td><input type="text" v-model.number="go"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{total}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{average}}</td>
        </tr>
<!-- 繁琐方法 -->
<!-- <tr> -->
<!-- <td>总分</td> -->
<!-- <td>{{python + java + go}}</td> -->
<!-- </tr>  -->
<!-- <tr> -->
<!-- <td>平均分</td> -->
<!-- <td>{{total/3}}</td> -->
<!-- </tr> -->

    </table>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            python:"",
            java:"",
            go:""
        },
        methods:{},
        computed:{
            total: function(){
                return this.python + this.java + this.go
            },
            average: function(){
                return this.total/3
            }
        }
    })
</script>
</body>
</html>

2、数据监听

watch ：监听不到可以添加deep属性
deep:true ：深度监听，deep监听不到，可以使用 $.set() 属性操作值
$.set()

字符串监听：监听到的新旧值不同。
数组：只能监听到长度的变化，新旧值相同，改变数组值的时候要使用 $set(array,index,value)
对象：只能监听到value的改变，必须深度监听：deep，增加对象的key必须使用：$set(array,key,value)

注：数组监听有坑

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    {{name}}
    <br>
    {{hobby}}
    <br>
    {{obj}}
    <br>
    <button v-on:click="my_click">点我改变数据</button>
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"eric",
            hobby:["打游戏","打豆豆"],
            obj:{
                boy:"PDD",
                age:23
            }
        },
        methods:{
            my_click: function(){
                // 修改name数据
                this.name = "bob";
                // this.hobby.push("潜水");
                // this.hobby[0] = "潜水";
                // app.$set(this.hobby,0,"潜水");
                // this.obj.age = 20;
                // this.obj["sex"] = "男";
                app.$set(this.obj,"sex","男");
            }
        },
        watch: {
            name: {
                handler: function(val,oldVal){
                    console.log(val);
                    console.log(oldVal);
                }
            },
            hobby: {
                handler: function(val,oldVal){
                    // 改变数组的长度的时候新旧值相同
                    console.log(val);
                    console.log(oldVal);
                },
                // deep: true
            },
            obj: {
                handler: function(val,oldVal){
                    console.log(val);
                    console.log(oldVal);
                },
                deep: true
            }
        }
    })
</script>
</body>
</html>

3、组件

可复用
全局组件的定义：Vue.component("myheader",{}）
全局组件的使用：<myheader></myheader>

<!-- 全局注册组件 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <myheader></myheader>
</div>
<div id="apps">
    <myheader></myheader>
</div>
<script>
    Vue.component("myheader",{
        template: '<div><h1>{{ title }}</h1></div>',
        // template: '<div><h1>Hello world!</h1></div>',
        data(){  // 对象的单体模式
            return{
                title: "HelloWorld！"
            }
        },
        methods:{}
    });
    const app = new Vue({
        el:"#app",
        data:{},
        methods:{}
    });
    const apps = new Vue({
        el:"#apps",
        data:{},
        methods:{}
    })
</script>
</body>
</html>

局部组件的定义：components: {my_com: my_com_config}
局部组件的使用：<my_com></my_com>

<!-- 局部注册组件 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <my_com></my_com>
</div>
<script>
    let my_com_config = {
        template: '<div><h1>局部组件</h1></div>'
    };
    const app = new Vue({
        el:"#app",
        components: {
            my_com: my_com_config
        }
    })
</script>
</body>
</html>

父子组件：
注：组件只识别一个作用域块

<!-- 父子组件的进本使用 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <my_com></my_com>
</div>
<script>
    let child_config = {
        template: '<div><h2>子组件</h2></div>'
    };
    let my_com_config = {
        template: '<div><h1>父组件</h1><child></child></div>',
        components: {
            child: child_config
        }
    };
    const app = new Vue({
        el:"#app",
        components: {
            my_com: my_com_config
        }
    })
</script>
</body>
</html>

父子组件的通信：
父子通信（主操作在父级）：
父级定义方法：:father_say="f_say"
子级调用方法：props: ['father_say']
子级使用方法（模板语言直接调用）：{{father_say}}

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <my_com></my_com>
</div>
<script>
    let child_config = {
        template: '<div><h2>子组件</h2><p>father_say：{{father_say}}</p></div>',
        props: ['father_say']
    };
    let my_com_config = {
        template: '<div><h1>父组件</h1><child :father_say="f_say"></child></div>',
        components: {
            child: child_config
        },
        data(){
            return {
                f_say: "滚~~"
            }
        }
    };
    const app = new Vue({
        el:"#app",
        components: {
            my_com: my_com_config
        }
    })
</script>
</body>
</html>

子父通信（主操作在子级）：
子集定义方法：@click='my_click'
子级提交事件：this.$emit("事件名",data)
父级绑定子级提交的事件：@事件名="处理的方法"
父级处理方法： methods: {处理的方法: function(data){data 数据处理} }
父级使用方法（模板语言直接调用）：{{say}}

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <my_com></my_com>
</div>
<script>
    let child_config = {
        template: "" +
            "<div>" +
            "<h2>子组件</h2>" +
            "<button @click='my_click'>向父级传送数据</button>" +
            "</div>",
        methods: {
            my_click(){
                // 子组件提交事件名称
                this.$emit("son_say","滚~~")
            }
        }
    };
    let my_com_config = {
        template: '' +
            '<div>' +
            '<h1>父组件</h1>' +
            '<child @son_say="my_son_say"></child>' +
            '<p>son_say：{{say}}</p>' +
            '</div>',
        components: {
            child: child_config
        },
        data(){
            return {
                say:""
            }
        },
        methods: {
            my_son_say: function(data){
                this.say = data
            }
        }
    };
    const app = new Vue({
        el:"#app",
        components: {
            my_com: my_com_config
        }
    })
</script>
</body>
</html>

非父子级通信：
定义中间调度器：let event = new Vue()
需要通信的组件向中间调度器提交事件：event.$emit("事件名", data)
接收通信的组件监听中间调度器里的事件：event.$on("事件名", function(data){data操作(注意：this的问题)})

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
<eric></eric>
<jing></jing>
</div>
<script>
    let midlen = new Vue();
    let eric = {
        template: "" +
            "<div>" +
            "<h1>This is Eric</h1>" +
            "<button @click='my_click'>点击通知静静</button>" +
            "</div>",
        methods: {
            my_click(){
                // 通知bob，晚上等我
                // 向bob，提交事件
                midlen.$emit("email","晚上，一起吃饭")
            }
        }
    };
    let jing = {
        template: "" +
            "<div>" +
            "<h1>This is jing</h1>" +
            "<p>eric和我说：{{ eric_email }}</p>" +
            "</div>",
        data(){
            return {
                eric_email: ""
            }
        },
        mounted(){
            // 组件加载完成后执行的方法
            let that = this;
            midlen.$on("email", function(data){
                that.eric_email = data;
                // console.log(data);
            })
        }
    };
    const app = new Vue({
        el:"#app",
        components: {
            eric: eric,
            jing: jing
        }
    })
</script>
</body>
</html>

4、混合

实际上在框架中用的很少
作用：复用共用的代码块
minxins:[base]

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click=\"show_text\">点击显示文本</button>
    <button @click=\"hide_text\">点击隐藏文本</button>
    <button @mouseenter="show_text" @mouseleave="hide_text">提示框</button>
    <div v-show=\"is_show\"><h1>look wyl and kjj</h1></div>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            is_show:false
        },
        methods: {
            show_text: function(){
                this.is_show = true
            },
            hide_text: function(){
                this.is_show = false
            }
        }
    })
</script>
</body>
</html>

<!-- 混合示例 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <com1></com1>
    <com2></com2>
</div>
<script>
    let base = {
        data(){
            return {
                is_show:false
            };
        },
        methods: {
            show_text(){
                this.is_show = true
            },
            hide_text(){
                this.is_show = false
            }
        }
    };
    let com1 = {
        template:"" +
            "<div>" +
            "<button @click=\"show_text\">点击显示文本</button>" +
            "<button @click=\"hide_text\">点击隐藏文本</button>" +
            "<div v-show=\"is_show\"><h1>look wyl and kjj</h1></div>" +
            "</div>",
        mixins: [base],
        data(){
            return {
                is_show: true
            }
        }
    };
    let com2 = {
        template:"" +
            "<div>" +
            "<button @mouseenter=\"show_text\" @mouseleave=\"hide_text\">提示框</button>" +
            "<div v-show=\"is_show\"><h1>look wyl and kjj</h1></div>" +
            "</div>",
        mixins: [base],
    };
    const app = new Vue({
        el:"#app",
        components: {
            com1: com1,
            com2: com2
        }
    })
</script>
</body>
</html>

5、插槽

作用：实现组件内容的分发
slot:
直接使用slot标签：<slot></slot>
名命slot标签：
先给slot加name属性：<slot name="title"></slot>
给标签元素添加slot属性：<h3 slot="title">Python</h3>

<!-- 未命名的slot标签 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <com>
        <slot>This is jing</slot>
    </com>
    <com>
        <slot>This is wyl</slot>
    </com>
</div>
<template id="my_com">
    <div>
        <h1>这是一个组件</h1>
        <slot></slot>
    </div>
</template>
<script>
    let com = {
        template: "#my_com"
    };
    const app = new Vue({
        el:"#app",
        components: {
            com: com
        }
    })
</script>
</body>
</html>

<!-- 命名的slot标签 -->
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <com>
        <h3 slot="title">Python</h3>
        <p slot="brief">This is jing</p>
    </com>
    <com>
        <h3 slot="title">Git</h3>
        <p slot="brief">This is wyl</p>
    </com>
</div>
<template id="my_com">
    <div>
        <h1>这是一个组件</h1>
        <slot name="title"></slot>
        <slot name="brief"></slot>
    </div>
</template>
<script>
    let com = {
        template: "#my_com"
    };
    const app = new Vue({
        el:"#app",
        components: {
            com: com
        }
    })
</script>
</body>
</html>

三、VueRouter

特点：通过路由和组件实现一个单页面的应用。

1、路由的注册：静态路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:'<div><h1>首页组件</h1></div>'
            }
        },
        {
            path:"/course",
            component:{
                template:'<div><h1>课程组件</h1></div>'
            }
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

2、路由的注册：动态路由（路由的参数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由动态绑定：to -->
    <router-link :to="{name:'home'}">首页</router-link>
    <router-link :to="{name:'course'}">课程</router-link>
    <!--  带有参数的静态路由绑定  -->
    <router-link to="/user/nepenthe?age=20">用户1</router-link>
    <!--  带有参数的动态路由绑定  -->
    <router-link :to="{name:'user',params:{name:'forget-me-not'},query:{age:'23'}}">用户2</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            name:"home",
            component:{
                template:'<div><h1>首页组件</h1></div>'
            }
        },
        {
            path:"/course",
            name: "course",
            component:{
                template:'<div><h1>课程组件</h1></div>'
            }
        },
        {
            path:"/user/:name",
            // 参数设置（？P<name>.*）
            name: "user",
            component:{
                template:'' +
                    '<div>' +
                        // 获取路由name：this.$route.name
                        '<h1>{{this.$route.name}}用户组件</h1>' +
                        // 获取路由中参数：this.$route.params.name
                        '<h1>username:{{this.$route.params.name}}</h1>' +
                        // 获取路由中参数（使用？的参数）：this.$route.query.age
                        '<h1>age:{{this.$route.query.age}}</h1>' +
                    '</div>',
                // Vue属性加载完成后执行的方法
                mounted(){
                    console.log(this.$route)
                }
            }
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

3、路由的注册：自定义路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由绑定：to -->
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>首页组件</h1>' +
                        '<button @click="my_click">点击跳转登录页面</button>' +
                    '</div>',
                methods:{
                    my_click: function(){
                        
                        console.log(this.$route);
                        // $route 当前路由的所有信息
                        console.log(this.$router);
                        // $router VueRouter的实例化对象
                        console.log(this.$el);
                        console.log(this.$data);
                        this.$router.push("/login")
                        // 跳转页面 --> 跳转到登录组件
                    }
                }
            }
        },
        {
            path:"/course",
            component:{
                template:'<div><h1>课程组件</h1></div>'
            }
        },
        {
            path:"/login",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>登录组件</h1>' +
                    '</div>'
            }
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

4、路由的钩子函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由绑定：to -->
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/user">用户</router-link>
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>首页组件</h1>' +
                        '<button @click="my_click">点击跳转登录页面</button>' +
                    '</div>',
                methods:{
                    my_click: function(){

                        console.log(this.$route);
                        // $route 当前路由的所有信息
                        console.log(this.$router);
                        // $router VueRouter的实例化对象
                        console.log(this.$el);
                        console.log(this.$data);
                        // 跳转页面 --> 跳转到登录组件
                        this.$router.push("/login")
                    }
                }
            }
        },
        {
            path:"/course",
            component:{
                template:'<div><h1>课程组件</h1></div>'
            }
        },
        {
            path:"/login",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>登录组件</h1>' +
                    '</div>'
            }
        },
        {
            path:"/user",
            meta:{
                required_login: true
            },
            component:{
                template:'' +
                    '<div>' +
                        '<h1>用户组件</h1>' +
                    '</div>'
            }
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url,
        mode:'history' // 清除路径
    });
    router.beforeEach(function (to, from, next) {
        console.log(to); // 跳转到哪里
        console.log(from); // 从哪来
        console.log(next); // 下一步做什么
        // 直接路径判断
        // if(to.path == "/user"){
        //     next("/login");
        // }
        // 使用meta判断（配置方便）
        if(to.meta.required_login){
            next("login");
        }
        next();
    });
    // router.afterEarch(function(to, from){
        // 智能识别路由要去哪和从哪来，一般用于获取路由从哪来
    // });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

5、子路由的注册：静态路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由绑定：to -->
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/course/detail">课程详情</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>首页组件</h1>' +
                    '</div>'
            }
        },
        {
            path:"/course",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>课程组件</h1>' +
                    '</div>'
            }
        },
        {
            path:"/course/detail",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>课程详情组件</h1>' +
                        '<hr>' +
                        '<router-link to="/course/brief">课程概述</router-link> ' +
                        ' <router-link to="/course/chapter">课程章节</router-link>' +
                        '<router-view></router-view>' +
                    '</div>'
            },
            children:[
                {
                    path:"/course/brief",
                    component:{
                        template:'' +
                            '<div>' +
                                '<h1>课程概述组件</h1>' +
                            '</div>'
                    }
                },{
                    path:"/course/chapter",
                    component:{
                        template:'' +
                            '<div>' +
                                '<h1>课程章节组件</h1>' +
                            '</div>'
                    }
                },
            ]
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

6、子路由的注册：动态路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由绑定：to -->
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/course/detail">课程详情</router-link>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>首页组件</h1>' +
                    '</div>'
            }
        },
        {
            path:"/course",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>课程组件</h1>' +
                    '</div>'
            }
        },
        {
            path:"/course/detail",
            redirect:{name:'brief'}, // 重定向子路由，实现默认页面显示
            component:{
                template:'' +
                    '<div>' +
                        '<h1>课程详情组件</h1>' +
                        '<hr>' +
                        '<router-link :to="{name:\'brief\'}">课程概述</router-link> ' +
                        '<router-link to="/course/chapter">课程章节</router-link>' +
                        '<router-view></router-view>' +
                    '</div>'
            },
            children:[
                {
                    path:"brief",
                    name:"brief",
                    component:{
                        template:'' +
                            '<div>' +
                                '<h1>课程概述组件</h1>' +
                            '</div>'
                    }
                },{
                    path:"/course/chapter",
                    name:"chapter",
                    component:{
                        template:'' +
                            '<div>' +
                                '<h1>课程章节组件</h1>' +
                            '</div>'
                    }
                },
            ]
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

7、命名的路由视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    <!-- 路由绑定：to -->
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/user">用户</router-link>
    <router-view name="head"></router-view>
    <router-view name="footer"></router-view>
    <router-view></router-view>
</div>
<script>
    // 定义路由匹配规则
    let url = [
        {
            path:"/",
            component:{
                template:'' +
                    '<div>' +
                        '<h1>首页组件</h1>' +
                    '</div>',
            }
        },
        {
            path:"/course",
            component:{
                template:'<div><h1>课程组件</h1></div>'
            }
        },
        {
            path:"/user",
            components:{
                head:{
                    template:'' +
                    '<div>' +
                        '<h1>用户head</h1>' +
                    '</div>'
                },
                footer:{
                    template:'' +
                    '<div>' +
                        '<h1>用户footer</h1>' +
                    '</div>'
                }
            }
        }
    ];
    // 实例化VueRouter对象
    let router = new VueRouter({
        routes:url,
        mode:'history' // 清除路径
    });
    router.beforeEach(function (to, from, next) {
        next();
    });
    // 把VueRouter的实例化对象注册到Vue的跟实例
    const app = new Vue({
        el:"#app",
        router:router
    })
</script>
</body>
</html>

8、Vue的路由：

注册：
-- 定义一个匹配规则对象
let url = [
{
path:"/",
component:{}

​ }
​ ]
​ -- 实例化VueRouter对象 并把匹配规则注册进去
​ let router = new VueRouter({
​ routes:url
​ })
​ -- 把VueRouter实例化对象注册到Vue的根实例
​ const app = new Vue({
​ el:""
​ })
​ -- router-link
​ -- router-view

子路由的注册
-- 在父路由里注册children：[{},{}]
-- 在父路由对应的组件里的template里写 router-link router-view

路由的名命
-- name
-- 注意 to 一定动态绑定 ：to=" {name:' '} "

路由的参数
this.$route.params.xxxx
this.$route.query.xxxx

自定义路由
this.$router.push("/course")
this.$router.push({name:' ', params:{ },query:{}})

路由的钩子函数
router.beforeEach(function(to, from, next){
to 路由去哪
from 路由从哪来
next 路由接下来要做什么
}) # 一般用于拦截
router.afterEach(function(to, from){
}) # 一般用于获取

注意
$route 路由的所有信息组成的对象
$router VueRouter 实例化对象
redirect 路由的重定向

四、Vue的生命周期

Vue生命周期的钩子函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    {{name}}
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"eric"
        },
        methods:{
            init:function(){
                console.log(123)
            }
        },
        beforeCreate(){
            console.group("BeforeCreate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        created(){
            console.group("Created");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeMount(){
            console.group("BeforeMount");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        mounted(){
            console.group("Mounted");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeUpdate(){
            console.group("BeforeUpdate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        updated(){
            console.group("Updated");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeDestroy(){
            console.group("BeforeDestroy");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        destroyed(){
            console.group("Destroyed");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        }
    })
</script>
</body>
</html>

Vue的生命周期的钩子 LifeCycle hooks

数据监听之前：beforeCreate()；

监听数据变化：created()；

虚拟dom加载完成前：beforeMount()；

页面真实加载完成后：mounted()；

数据改变前执行的函数：beforeUpdate()；

数据改变后执行的函数：updated()；

Vue实例销毁前：beforeDestroy()；

Vue实例销毁后：destroyed()s

五、Vue-cli脚手架

作用：脚手架帮助搭建Vue项目

下载（下载到全局）：npm i vue-cli -g

用vue-cli搭建项目：vue init webpack 项目名称

启动项目：
cd到项目目录下：npm run dev

vue-cli项目目录：

​ build 打包后存放的所有文件包括配置文件
​ config 配置文件
​ node_models 依赖包
​ src 工作目录
​ static 静态文件
​ index.html 单页面
​ pckage.json 存放所有项目信息

路由的解耦过程：

​ 下载 npm i vue-router
​ 导入 import VueRouter from 'vue-router'
​ Vue.use(VueRouter)
​ 定义匹配规则url
​ 实例化对象VueRouter
​ 把VueRouter对象注册到Vue的跟实例中

posted @ 2020-12-13 13:37  HashFlag  阅读(238)  评论(0)  编辑  收藏  举报