Vue整理

時間  2020-12-14
標籤 javascript html 前端 vue java node python webpack es6 web 欄目 JavaScript 简体版
原文   原文鏈接

1、Vue

Vue是遵循MVVW架構模式實現的前端框架javascript

npm導入路徑：https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.jshtml

MVVM架構 Model數據 View模板 ViewModel處理數據前端

一、ES6的經常使用語法：

變量的定義，var，let，constvue

  1. Var 變量的提高，函數做用域 全局做用域，從新定義不會報錯，能夠從新賦值
  2. let 塊級做用域 { }，從新定意會報錯，能夠從新賦值
  3. const 定義不可修改的常量，不能夠從新賦值

箭頭函數的this取決於當前的上下文環境：相似於python的匿名函數java

this指當前函數最近的調用者，距離最近的調用者node

解構：
字典解構 {key,key,...} 注：要使用key才行
數組結構 [x,y,.....]python

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);

二、Vue的核心思想是數據驅動視圖

1）Vue的經常使用指令

v-text：獲取文本內容webpack

v-html：獲取html內容es6

<!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：循環獲取數組web

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 指令修飾符組成的對象

2、Vue獲取DOM，數據監聽，組件，混合和插槽

注：「:」 是指令 「v-bind」的縮寫，「@」是指令「v-on」的縮寫；「.」是修飾符。

一、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>

二、數據監聽

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>

三、組件

可複用
全局組件的定義：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>

四、混合

實際上在框架中用的不多
做用：複用共用的代碼塊
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>

五、插槽

做用：實現組件內容的分發
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>

3、VueRouter

特色：經過路由和組件實現一個單頁面的應用。

一、路由的註冊：靜態路由

<!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>

二、路由的註冊：動態路由（路由的參數）

<!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>

三、路由的註冊：自定義路由

<!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>

四、路由的鉤子函數：

<!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>

五、子路由的註冊：靜態路由

<!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>

六、子路由的註冊：動態路由

<!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>

七、命名的路由視圖

<!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>

八、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 路由的重定向

4、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

5、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的跟實例中

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程