Vue整理-有解無憂

一、Vue

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

npm匯入路徑：https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js

MVVM架構 Model資料 View模板 ViewModel處理資料

1、ES6的常用語法：

變數的定義，var，let，const

Var 變數的提升，函式作用域全域作用域，重新定義不會報錯，可以重新賦值
let 塊級作用域 { }，重新定意會報錯，可以重新賦值
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/[email protected]/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/[email protected]/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/[email protected]/dist/vue.js"></script>
    <style>
        .my_app{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-bind:>
    </div>
    <img :src="https://www.cnblogs.com/wylshkjj/p/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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="https://www.cnblogs.com/wylshkjj/p/1">阿薩德</option>
        <option value="https://www.cnblogs.com/wylshkjj/p/2">主執行緒</option>
        <option value="https://www.cnblogs.com/wylshkjj/p/3">權威</option>
    </select>
    {{choices}}
    <hr>
    <select name="" v-model="choices_multiple" multiple>
        <option value="https://www.cnblogs.com/wylshkjj/p/1">阿薩德</option>
        <option value="https://www.cnblogs.com/wylshkjj/p/2">主執行緒</option>
        <option value="https://www.cnblogs.com/wylshkjj/p/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/[email protected]/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/[email protected]/dist/vue.js"></script>
    <style>
        .my_box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="app">
    <div  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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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的跟實體中

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/234180.html

標籤：HTML5

上一篇：職場小白，請各位指點迷津

下一篇：JavaScript的DOM，BOM簡單介紹