Python學習二十八周（vue.js）

本文轉載自查看原文 2017-10-28 23:42 3722

一、指令

1、一個例子簡單實用vue：

下載vue.js（這里實用1.0.21版本）

編寫html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            var c =  new Vue({
                el: '#box',//el代碼element的縮寫，定位元素
                data: { //data中編寫數據
                    msg: 'welcome vue!'
                }
            });
        };
    </script>
</head>
<body>
<div id="box">
    {{msg}} <!--通過{{}}方式來調用vue的表現 -->
</div>
</body>
</html>

View Code

2、常見指令：

　　指令：擴展html標簽功能屬性

v-model 一般表單元素（input）雙向數據綁定（如果有了兩個同樣的input，修改其中一個另外一個內容也跟着修改）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            new Vue ({
                el: '#box', //無論class  id   標簽都可以
                data:{
                    msg: 'welcome vue!',
                    msg2: 12,
                    msg3: true,
                    arr:['apple','bananan','orange'],
                    json: {a:"apple",b:"banana",c:"orange"}
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <input type="text" v-model="msg">
    <input type="text" v-model="msg">
    <br>
    {{msg2}}
    <br>
    {{msg3}}
    <br>
    {{arr}}
    <br>
    {{json}}
</div>
</body>
</html>

msg可用數據類型演示

循環 v-for：

　　　　1、數組：

　　　　　　v-for=“value in arr” 如果想到得到index使用{{$index}}

　　　　2、json：

　　　　　　循環json和arr類似
　　　　　　可以使用{{$index}}   {{$key}}方式,也可以使用python字典循環方式類似顯示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            new Vue ({
                el: '#box', //無論class  id   標簽都可以
                data:{
                    arr:['apple','banana','orange'],
                    json: {a:"apple",b:"banana",c:"orange"}
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <ul>
        <!--需要數組v-for
            如果想得到數組的index可以使用{{$index}}
        -->
        <li v-for="value in arr">
            {{value}}   {{$index}}
        </li>
    </ul>
    <hr>
    <ul>
        <!--
            循環json和arr類似
            可以使用{{$index}}   {{$key}}方式
        -->
        <li v-for="value in json">
            {{value}}  {{$index}} {{$key}}
        </li>
    </ul>
    <hr>
    <ul>
        <!--
            使用python字典循環方式類似顯示
        -->
        <li v-for="(k,v) in json">
            {{k}}   {{v}} {{$index}}  {{$key}}
        </li>
    </ul>
</div>
</body>
</html>

View Code

事件:v-on:click="函數"

　1、click

window.onload = function () {
            new Vue ({
                el: '#box', //無論class  id   標簽都可以
                methods:{//onclick通過methods來完成 show:function () { alert(1);
                    }
                }
            });
        }

　　　　2、mouseover 鼠標划到上面觸發

　　　　3、mouseout 鼠標移走時觸發

　　　　4、mousedown

　　　　5、dbclick 雙擊　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            new Vue ({
                el: '#box', //無論class  id   標簽都可以
                data:{
                    arr:['apple','banana','orange'],
                    json: {a:"apple",b:"banana",c:"orange"}
                },
                methods:{//onclick通過methods來完成
                    add:function () {
                        this.arr.push('tomato');
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="box">
    <input type="button" value="按鍵" v-on:mouseover="add()" >
    <br>
    <ul>
        <li v-for="value in arr">
            {{value}}
        </li>
    </ul>
</div>
</body>
</html>

View Code

顯示隱藏 v-show

v-show="true/false"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            new Vue ({
                el: '#box', //無論class  id   標簽都可以
                data:{
                    divShow: true
                },
            });
        }
    </script>
</head>
<body>
<div id="box">
    <input type="button" value="按鍵" v-on:click="divShow=False" >
    <div style="width:100px; height:100px; background:#111" v-show="divShow"></div>
</div>
</body>
</html>

View Code

例子：

簡易留言板（todolist）

要求：bootstrap來完成框架引入，bootstrap.js依賴jqeury

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="css/jquery-1.7.2.js"></script>
    <script src="css/bootstrap.js"></script>
    <script src="css/vue.js"></script>
    <script>
        window.onload = function () {
            new Vue({
                el: "#box",
                data: {
                    myData: [],
                    username: '',
                    age: '',
                    nowIndex:-100,
                },
                methods: {
                    add: function () {
                        this.myData.push({
                            name: this.username,
                            age: this.age,
                        });
                        this.username = '';
                        this.age = '';

                    },
                    deleteMsg:function (n) {
                        if(n=-2){
                           this.myData=[];//當nowIndex=-2時，將數組置為空
                        }else{
                            this.myData.splice(n,1);//對應的nowIndex索引，刪除數組長度為1 
                        }

                    }
                }
            })
        }
    </script>
</head>
<body>
<div class="container" id="box">
    <form role="form">
        <div class="form-group ">
            <label for="username">用戶名</label>
            <input placeholder="輸入用戶名" id="username" type="text" class="form-control" v-model="username">
        </div>
        <div class="form-group ">
            <label for="age">年齡</label>
            <input placeholder="輸入年齡" id="age" type="text" class="form-control" v-model="age">
        </div>
        <div class="form-group">
            <input value="提交" type="button" class="btn btn-primary" v-on:click="add()"/>
            <input value="重置" type="reset" class="btn btn-danger"/>
        </div>
    </form>

    <hr>
    <table class="table table-bordered table-hover">
        <caption class="h3 text-warning">用戶信息表</caption>
        <tr class="text-info">
            <th class="text-center">序號</th>
            <th class="text-center">姓名</th>
            <th class="text-center">年齡</th>
            <th class="text-center">操作</th>
        </tr>
        <tr class="text-center" v-for="item in myData">
            <td>{{ $index +1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>
                <button class="btn btn-danger btn-sm " data-toggle="modal" data-target="#layer" v-on:click="nowIndex={{$index}}">刪除</button>
            </td>
        </tr>
        <tr v-show="myData.length!=0">
            <td colspan="4" class="text-right">
                <button class="btn btn-danger btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">刪除全部</button>
            </td>
        </tr>
        <tr v-show="myData.length==0">
            <td colspan="4" class="text-center text-muted">
                <p>暫無數據</p>
            </td>
        </tr>
    </table>

    <!--模態框-->
    <div role="dialog" class="modal fade" id="layer">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">確認刪除么？</h4>
                </div>
                <div class="modal-body text-right">
                    <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                    <button class="btn btn-danger btn-sm" data-dismiss="modal" v-on:click="deleteMsg(nowIndex)">確認</button>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

View Code

二、事件

　　v-on 簡寫 @

　　事件對象：

　　　　@click="show($event)"

　　事件冒泡：

　　　　默認行為是關聯事件冒泡的，阻止冒泡有兩種方法：

　　　　1、在v-on:click=show($event)中定義event，然后在函數中定義e.cancelButte=true

　　　　2、直接使用vue提供的v-on:click.stop=show()

　　默認行為：

　　　　阻止默認行為：

　　　　1、e.preventDefault();

　　　　2、@contextmenu.prevent=“show（）”

　　鍵盤類事件

　　　　常用鍵：

　　　　　　回車：

　　　　　　　　1、@keyup/keydown.13

　　　　　　　　2、@keyup/keydown.enter

　　　　　　上下左右：

　　　　　　　　@keyup/keydown.(up/down/left/right）可以表示鍵盤的上下左右，同時也可以通過函數中的keyCode抓出來對應的鍵

　　屬性：

　　v-bind:屬性簡寫 :屬性

　　class與style屬性：

　　　　class：

　　　　　　1、:class="[red, blue]" 其中red和blue都是Vue的data中的數據，通過數據對應真正的類

　　　　　　2、:class="{red:true, blue:false}" 通過這種方式來確定，其中red和blue都是真正的類

　　　　　　3、:class="json"

<script>
        window.onload=function () {
            new Vue({
                el: '#box',
                data:{
                    json:{
                           red: true,
                           blue:false
                     }
                }
    
 
            })
        }
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el: '#box',
                data:{
                    url:' http://www.baidu.com'
                }

            })
        }
    </script>
</head>
<body>
<div id="box">
    <!--<a v-bind:href="url" >點我</a>-->
    <a :href="url">點我</a>
</div>
</body>
</html>

View Code

　　style要求都使用json方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el: '#box',
                data:{
                    c:{color: 'red'},
                    d:{backgroundColor:'blue'}
                }

            })
        }
    </script>
</head>
<body>
<div id="box">
    <strong :style="[c, d]">文字、、、</strong>
</div>
</body>
</html>

注意：復合樣式采用駝峰命名法：比如背景色使用backgroundColor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el: '#box',
                data:{
                    a: {
                        color: 'red',
                        backgroundColor: 'blue'
                    }
                }

            })
        }
    </script>
</head>
<body>
<div id="box">
    <strong :style="a">文字、、、</strong>
</div>
</body>
</html>

三、模板

　　　　{{msg}} 數據更新模板也跟着更新

　　　　{{*msg}} 數據只更新一次

　　　　{{{msg}}} html轉義數據

四、過濾器

　　語法：

{{msg|filter}} 添加過濾器
{{msg|filterA|filterB}}  連續多個過濾器

　　系統提供了一些過濾器

　　1、uppercase

　　2、lowercase

　　3、capitalize

　　4、currency 表示錢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el: '#box',
            })
        }
    </script>
</head>
<body>
<div id="box">
    {{12|currency}}
    <br>
    {{12|currency '￥'}}
</div>
</body>
</html>

　　5、debounce 配合鍵盤事件的延遲

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm = new Vue({
                data: {

                },
                methods: {
                    show:function () {
                        alert(1)
                    }
                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    <!--debounce延遲2s后執行-->
    <input type="text"  @keyup="show|debounce 200">

</div>
</body>
</html>

View Code

　　數據配合使用的過濾器：

　　6、limitBy 限制幾個

　　　　limitBy 參數（取幾個）

limitBy 取幾個從哪開始 limitBy 2 3 表示從3開始取兩個數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm = new Vue({
                data: {
                    arr:[1,2,3,4,5]
                },
                methods: {


                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="val in arr|limitBy 3 2">{{val}}</li>
    </ul>
     <ul>
        <li v-for="val in arr|limitBy 3  arr.length-2">{{val}}</li>
    </ul>

</div>
</body>
</html>

View Code

　　7、filterBy '選中的數據'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm = new Vue({
                data: {
                    arr:['width', 'length','background', 'orange']
                },
                methods: {


                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    <ul>
        <!--只過濾取出帶字母 o的數據-->
        <li v-for="val in arr|filterBy 't'">{{val}}</li>
    </ul>


</div>
</body>
</html>

View Code

　　8、orderBy

　　　　其中orderBy 1表示正序 orderBy -1表示倒序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm = new Vue({
                data: {
                    arr:['width', 'length','background', 'orange']
                },
                methods: {


                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    <ul>
        <!--只過濾取出帶字母 o的數據-->
        <li v-for="val in arr|filterBy 't'">{{val}}</li>
    </ul>
    <ul>
       <!--排序   orderBy   1表示正序  orderBy  -1表示倒序-->
        <li v-for="val in arr|orderBy 't'">{{val}}</li>
    </ul>

</div>
</body>
</html>

View Code

　　9、自定義過濾器：

　　Vue.filter('name',function(input){})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            Vue.filter('toDou',function (input) {
//                input表示過濾器的需要處理的數據，在這里是變量a
                return input<10?'0'+input:''+input
            });
            var vm = new Vue({
                data: {
                    a:9
                },
                methods: {


                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    {{a|toDou}}
</div>
</body>
</html>

不帶參數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            Vue.filter('toDou',function (input,a,b) {
                  alert(a+','+b)
//                input表示過濾器的需要處理的數據，在這里是變量a
                return input<10?'0'+input:''+input
            });
            var vm = new Vue({
                data: {
                    a:9
                },
                methods: {


                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    {{a|toDou 1 2}}
</div>
</body>
</html>

帶參數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            Vue.filter('date',function (input) {
                var oDate=new Date(input);
                return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+":"+oDate.getMinutes()+":"+oDate.getSeconds();
            });
            var vm = new Vue({
                data: {
                    a:Date.now()
                },
                methods: {


                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    {{a|date}}
</div>
</body>
</html>

實例-時間過濾器

五、交互

　　如果vue想做交互，本身框架不支持，如果想做交互，必須引入vue-resouce

　　get

<script>
        window.onload=function () {
            new Vue({
                el: '#body',
                data:{

                },
                methods:{
                    get:function () {
                       this.$http.get('vue-connect.txt').then(function (res) {
                            alert(res.data);
                       }, function (res) {
                            alert(res.status);
                       });
                    }
                }


            });
        };
    </script>

<script>
//        通過get方式給服務器發送數據
        window.onload=function () {
            new Vue({
                el: '#body',
                data:{

                },
                methods:{
                    get:function () {
                       this.$http.get('get.php',{
                           a:1,
                           b:2
                       }).then(function (res) {
                            alert(res.data);
                       }, function (res) {
                            alert(res.status);
                       });
                    }
                }


            });
        };
    </script>

　　post

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el: '#body',
                data:{

                },
                methods:{
                    post:function () {
                       this.$http.post('post.php',{
                           a:1,
                           b:2
                       },{
                           emulateJSON:true
                       }).then(function (res) {
                            alert(res.data);
                       }, function (res) {
                            alert(res.status);
                       });
                    }
                }


            });
        };
    </script>
</head>
<body>
<div id="body">
<input type="button" class="btn btn-default" value="按鈕" @click="post()">

</div>
</body>
</html>

View Code

　　jsonp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="vue.js"></script>
    <script src="vue-resource.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el: '#body',
                data:{

                },
                methods:{
                    get:function () {
                       this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                           wd: 'ab'
                       },{
                            jsonp: 'cb'
                       }).then(function (res) {
                            alert(res.data.s);
                       }, function (res) {
                            alert(res.status);
                       });
                    }
                }


            });
        };
    </script>
</head>
<body>
<div id="body">
<input type="button" class="btn btn-default" value="按鈕" @click="get()">

</div>
</body>
</html>

View Code

VUE生存周期：

　　鈎子函數：

　　　　created 實例已經創建，在new Vue（{}）創建完成后就調用該鈎子函數

　　　　beforeCompile 編譯之前

　　　　compiled 編譯之后

　　　　ready 插入到文檔中，也就是類似於window.onload

　　　　beforeDestroy 銷毀之前

　　　　destroyed 銷毀之后

　　　　其中后面兩個需要先將new Vue定義為一個變量，即

var vm=new Vue（{

　　　　　　　　　methods：{

　　　　　　　　　　beforeDestroy：function（）{}

　　　　　　　　　　destroyed：functio你（）{}

　　　　　　　　　　　　}　　　　　　　　　　　　　　　　　　　　　

}）

　　　　然后執行:

　　　　　　　　　　　　document.onclick=function（）{

　　　　　　　　　　　　　　　　　　　　vm.$destroy();

　　　　　　　　　　　　　　　　　　}

v-cloak：防止花括號閃爍,用在比較大的段落

<style>

[v-cloak]{

　　　　display:none;

　　　　}

</style>

如果單獨對某個標簽做防止閃爍可使用v-text

new Vue({

　　　　el: '#app'

　　　　data:{

　　　　　　msg: 'welcome'

　　　　　　}

同樣使用v-html也可以防止閃爍

七、計算屬性：

　　computed：

　　　　computed里面可以放置一些業務邏輯代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm = new Vue({
                el: '#box',
                data:{
                    a:1,
                },
                computed:{
//                    computed中是一個屬性，里面以函數的形式存在，同時要求有一個返回值，如沒有就沒有任何輸出
//                    b是一個對象，里面有兩個方法，一個是get，一個是set
                    b:{
                        get:function () {
                            return this.a
                        },
//                        如果需要修改b的值，需要在set中設置，val代表vm.b傳遞過來的值
                        set:function (val) {
                            this.a = val
                        }
                    }
                }


            });
            document.onclick=function () {
                vm.b = 101;
            }
        }
    </script>
</head>
<body>
<div id="box">
    a = {{a}}
    <br>
    b = {{b}}
</div>
</body>
</html>

View Code

八、vue實例的一些簡單小方法

　　vm.$el 就是元素

vm.$data 就是數據

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm = new Vue({
                el: '#app',
                data: {
                    a: 1
                }
            });
//            $el就是元素
        console.log(vm.$el);
        vm.$el.style.backgroundColor='red';
        console.log(vm.$data.a)
            vm.$data.a=4
        }

    </script>
</head>
<body>
<div id="app">
    {{a}}
</div>
</body>
</html>

View Code

　　vm.$mount();可以手動掛載，代替el這個屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm = new Vue({

                data: {
                    a: 1
                }
            });
//            手動掛載
            vm.$mount('#app');
        }

    </script>
</head>
<body>
<div id="app">
    {{a}}
</div>
</body>
</html>

View Code

　　vm.$options 獲取自定義屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm = new Vue({
                data: {
                    a: 1
                },
                aa:11
            }).$mount('#app');

            console.log(vm.$options.aa);
        }

    </script>
</head>
<body>
<div id="app">
    {{aa}}
</div>
</body>
</html>

View Code

　　vm.$destroy 銷毀對象

vm.$log() 查看現在數據的狀態

循環：

　　v-for='value in data'

　　如果有重復的數據：

　　　需要使用track-by="$index"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var vm = new Vue({
                data: {
                    arr: ['apple', 'orange','pear']
                },
                methods: {
                    add:function () {
                        this.arr.push('tomato');
                    }
                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    <input type="button" value="添加" @click="add">
    <ul>
        <!--如果遇到重復的，需要添加track-by 后面的值可以是$index也可以是數據庫的uid，只要保證不重復即可-->
        <li v-for="val in arr" track-by="$index">
            {{val}}
        </li>
    </ul>
</div>
</body>
</html>

View Code

自定義指令：

　　Vue.directive('指令名稱',function(){}) 注意指令名稱不能為v-XX,只能寫XX並且在調用時寫v-XX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
           Vue.directive('red', function () {
               this.el.style.backgroundColor='red'
           })
            var vm = new Vue({
                data: {
                    msg: 'AAA'
                },
                methods: {


                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    <span v-red>{{msg}}</span>
</div>
</body>
</html>

View Code

　　注意：指令必須以v- 開頭，而且指令寫的時候不能帶v-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
           Vue.directive('red', function (color) {
               this.el.style.backgroundColor= color
           });
            var vm = new Vue({
                data: {
                    msg: 'AAA'
                },
                methods: {


                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    <span v-red="'red'">{{msg}}</span>
</div>
</body>
</html>

帶參數的自定義指令

自定義鍵盤指令：

例如ctrl是17，在keydown上定義ctrl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
//            把17的鍵值分配給ctrl
           Vue.directive('on').keyCodes.ctrl=17;
            var vm = new Vue({
                data: {
                    msg: 'AAA'
                },
                methods: {
                    show:function () {
                        alert(1)
                    }

                }

            }).$mount('#app');


        }

    </script>
</head>
<body>
<div id="app">
    <input type="text" @keydown.ctrl="show">
</div>
</body>
</html>

View Code

數據監聽：

　　vm.$watch(name, function(){});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {

            var vm = new Vue({
                data: {
                    a:111,
                    b:22,
                },
                methods: {


                }

            }).$mount('#app');

            vm.$watch('a',function () {
                alert('a發生變化了');
                this.b = this.a +100;
            })
            document.onclick=function () {
                vm.a = 1;
            }
        }

    </script>
</head>
<body>
<div id="app">
    {{a}}
    {{b}}
</div>
</body>
</html>

View Code

十一、vue過渡

動畫：

<div id="div1" v-show="bSign" transition="fade"> </div>


<style>
        #div1{
           width:100px;
            height:100px;
            background:red;
        }
        .fade-transition{
            transition:1s all ease;
        }
        .fade-enter{
            opacity:0;
        }
        .fade-leave{
            opacity:0;
            transform:translateX(200px);
        }
    </style>

　　進入：

.fade-enter{
            opacity:0;
        }

　　離開：

.fade-leave{
            opacity:0;
            transform:translateX(200px);
        }

　　通過animate.css實現動畫：

　　1、下載animate.css　　

https://daneden.github.io/animate.css

　　2、下載完畢后引入

<link rel="stylesheet" href="animate.css">

　　3、引入class=“animate”同時定義transition=“bounce” 其中bounce是自己定義的

<div id="div1" v-show="bSign" transition="bounce" class="animated"> </div>

　　4、在Vue中定義transitions

 window.onload=function () {

            var vm = new Vue({
                data: {
                    bSign:true

                },
                methods: {
                    toggle(){
                       this.bSign=!this.bSign
                    }
                },
                transitions:{//定義所有的動畫
                    bounce:{
                        enterClass: 'zoomInLeft',  //zoomInLeft與zoomOutRight是animate定義的類
                        leaveClass: 'zoomOutRight'
                    }
                }

            }).$mount('#app');
        }

十二、vue組件

定義一個組件：

1、全局組件

var Aaa=Vue.extend({

　　　　template：‘XXX'

　　})

　　Vue.component('名稱',Aaa)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {

            var Aaa = Vue.extend({
                template: '<h3>我是標題三</h3>'
            })

            Vue.component('aaa',Aaa);
            var vm = new Vue({
           }).$mount('#app');
        }

    </script>
</head>
<body>
<aaa></aaa>
<div id="app">
    <aaa></aaa>
</div>
</body>
</html>

View Code

　　組件里放數據：

　　必須以以下形式：要求data必須以函數形式存在，同時函數必須返回一個對象也就是一個json

　　var Aaa=Vue.extend({

　　　　data(){

　　　　　　return {

　　　　　　　　}

　　　　　　})

　　觸發事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {
            var Aaa = Vue.extend({
                data(){
                    return {
                        msg:'我是標題~~~'
                    };
                },
                methods:{
                    change:function () {
                       this.msg = 'change'
                    }
                },
                template: '<h3 @click="change">{{msg}}</h3>'
            });

            Vue.component('aaa',Aaa);
             var vm = new Vue({
           }).$mount('#app');
        }

    </script>
</head>
<body>
<div id="app">
    <aaa></aaa>
</div>
</body>
</html>

View Code

　2、局部組件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {

            var Aaa = Vue.extend({
                data(){
                    return {
                        msg:'局部組件'
                    }
                },
                template: '<h3>{{msg}}</h3>'
            });


            var vm = new Vue({
                components:{//局部組件
                    aaa: Aaa
                }
           }).$mount('#app');
        }

    </script>
</head>
<body>
<aaa></aaa>
<div id="app">
    <aaa></aaa>
</div>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                components: {
                    aaa: {
                        data() {
                            return {
                                msg: '局部組件'
                            }
                        },
                        template: '<h3>{{msg}}</h3>'
                    }
                }
            }).$mount('#app');
        }

    </script>
</head>
<body>
<aaa></aaa>
<div id="app">
    <aaa></aaa>
</div>
</body>
</html>

View Code

　3、模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>

    </style>

</head>
<body>
<div id="app">
<my-aaa></my-aaa>
    </div>
<template id="aaa">
        <h1>標題1</h1>
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
    </template>
    <script src="vue.js"></script>
    <script>
        window.onload=function () {

            var vm = new Vue({
                components:{
                    'my-aaa':{
                        data(){
                            return {
                                msg:'welcome vue',
                                arr:['apple','banana','orange']
                            }
                        },
                        template:'#aaa'
                    }
                },
           }).$mount('#app');
        }

    </script>
</body>
</html>

View Code

　4、動態組件

<component :is="zujian"></component>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>

    </style>

</head>
<body>
<div id="app">
    <input type="button" @click="zujian='aaa'" value="aaa組件">
    <input type="button" @click="zujian='bbb'" value="bbb組件">
    <component :is="zujian"></component>
</div>

<script src="vue.js"></script>
<script>
    window.onload = function () {

        var vm = new Vue({
            data:{
                zujian:''
                },
            components:{
                'aaa':{
                    template: '<h2>我是aaa</h2>'
                },
                'bbb':{
                    template:'<h2>我是bbb</h2>'
                }

        }

        }).$mount('#app');
    }

</script>
</body>
</html>

View Code

　　5、chrome里添加vue組件

1. 首先登錄https://github.com/vuejs/vue-devtools
2. 然后在install里選擇添加chrome瀏覽器
3. 選擇安裝

　　6、父子組件

　　　　vue默認情況下，子組件沒法訪問訪問父組件的數據

　　　　組件數據傳遞：

　　　　1、子組件想獲取父組件的data：

　　　　　　在調用子組件：

　　　　　　調用時候需要在組件中寫props：['myMsg'] #如果使用了- 需要在script中寫成駝峰的形式

　　　　　　也可以使用{}形式： props：{

　　　　　　　　　　　　　　　　myMsg：String

　　　　　　　　　　　　　　　　}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>

    </style>

</head>
<body>
<div id="app">
    <aaa></aaa>
</div>
<template id="aaa">
    <h1>1111->{{msg}}</h1>
    <bbb :m="msg2" :my-msg="msg"></bbb>
</template>
<script src="vue.js"></script>
<script>
    window.onload = function () {

        var vm = new Vue({
            data:{
                zujian:''
                },
            components:{
                'aaa':{
                    data(){
                        return{
                        msg:'父組件數據',
                        msg2:'22222222'
                        }
                    },
                    template: '#aaa',
                    components:{
                        'bbb':{
                            props:{
                                'm':String,
                                'myMsg': String
                            },
                            template: '<h3>我是bbb->{{m}}   {{myMsg}}</h3>'
                        }
                    }
                }

        }

        }).$mount('#app');
    }

</script>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>

    </style>

</head>
<body>
<div id="app">
    <aaa></aaa>
</div>
<template id="aaa">
    <h1>1111->{{msg}}</h1>
    <bbb :m="msg2" :my-msg="msg"></bbb>
</template>
<script src="vue.js"></script>
<script>
    window.onload = function () {

        var vm = new Vue({
            data:{
                zujian:''
                },
            components:{
                'aaa':{
                    data(){
                        return{
                        msg:'父組件數據',
                        msg2:'22222222'
                        }
                    },
                    template: '#aaa',
                    components:{
                        'bbb':{
                            props:['m', 'myMsg'],
                            template: '<h3>我是bbb->{{m}}   {{myMsg}}</h3>'
                        }
                    }
                }

        }

        }).$mount('#app');
    }

</script>
</body>
</html>

View Code

　　　　　　2、父組件想獲取子組件的數據：

　　　　　　　　子組件把自己的數據發送到父級 vm.$emit(事件名，數據)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>

    </style>

</head>
<body>
<div id="app">
    <aaa></aaa>
</div>
<template id="aaa">
    <span>我是父集->{{msg}}</span>
    <input type="button" value="按鈕">
    <bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
    <h3>我是bbb組件</h3>
    <input type="button" value="send" @click="send">
</template>
<script src="vue.js"></script>
<script>
    window.onload = function () {

        var vm = new Vue({
            data: {
                zujian: ''
            },
            components: {
                'aaa': {
                    data() {
                        return {
                            msg: '父組件數據',
                            msg2: '22222222'
                        }
                    },
                    methods:{
                      get(msg){
                            this.msg = msg
                      }
                    },
                    template: '#aaa',
                    components: {
                        'bbb': {
                            data() {
                                return {
                                    a: '我是子組件數據'
                                }
                            },
                            methods:{
                              send:function () {
                                  this.$emit('child-msg', this.a);
                              }  
                            },
                            template: '#bbb'
                        }
                    }
                }

            }

        }).$mount('#app');
    }

</script>
</body>
</html>

View Code

　　　　十三、slot　　

　　　　　　　　作用：占位用，類似於jinjia2中的{% block %}{% endblock %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>

    </style>

</head>
<body>
<div id="app">
    <aaa>
        <ul slot="ul-slot">
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ul>
        <ol slot="ol-slot">
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
            <li>1111111</li>
        </ol>
    </aaa>
</div>
<template id="aaa">
    <slot name="ul-slot">這個是ul slot</slot>
    <slot name="ol-slot">這個是ol slot</slot>
    <p>模板內具體內容</p>

</template>

<script src="vue.js"></script>
<script>
    window.onload = function () {

        var vm = new Vue({

            components: {
                'aaa': {
                    template: '#aaa',

                }
            }

        }).$mount('#app');
    }

</script>
</body>
</html>

View Code

　　　　十四、vue-router

　　　　　　作用：根據不同url地址，出現不同的效果

　　　　1、單頁路由：

　　　　　View:　　　　　

 <li><a v-link="{path: '/home'}">主頁</a></li>

　　　　　展示內容：

<router-view></router-view>

　　　　　組件准備

<script>
    //1、准備一個根組件
    var App=Vue.extend();

    //2、 Home news組件都准備
    var Home=Vue.extend({
        template: '<h3>這是主頁</h3>'
    });
    var News = Vue.extend({
        template:'<h3>這是新聞頁</h3>'
    });
    //3、 准備路由
    var router = new VueRouter();

    //4、關聯
    router.map({
        'home':{
            component:Home
        },
        'news':{
            component:News
        }
    })
    //5、啟動路由
    router.start(App, '#app')
    //6、重定向到主頁
    router.redirect({
        '/':'/home'
    })
</script>

　　　　2、多頁路由(路由嵌套)

　　　　主頁 home　　

　　　　　　　　登錄　　home/login

　　　　　　　　注冊 home/reg

　　　　新聞頁　 news

　　　　主要應用subRoutes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>
        .v-link-active{
            font-size:20px;
            color:#286090;
        }
    </style>

</head>
<body>
<div id="app">
    <ul>
        <li><a v-link="{path: '/home'}">主頁</a></li>
        <li><a v-link="{path: '/news'}">新聞</a></li>
    </ul>
    <router-view></router-view>
</div>
<template id="home">
    <h3>我是主頁</h3>
    <div>
        <a v-link="{path: '/home/login'}">登錄</a>
        <a v-link="{path: '/home/reg'}">注冊</a>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="news">
    <h3>這是新聞頁</h3>
</template>

<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //1、准備一個根組件
    var App=Vue.extend();

    //2、 Home news組件都准備
    var Home=Vue.extend({
        template: '#home'
    });
    var News = Vue.extend({
        template:'#news'
    });
    //3、 准備路由
    var router = new VueRouter();

    //4、關聯
    router.map({
        'home':{
            component:Home,
            subRoutes:{
                'login':{
                    component:{
                         template:'<strong>我是登錄界面</strong>'
                    }
                },
                'reg':{
                    component:{
                         template:'<strong>我是注冊界面</strong>'
                    }

                }
            }
        },
        'news':{
            component:News
        }
    });
    //5、啟動路由
    router.start(App, '#app');
    //6、重定向到主頁
    router.redirect({
        '/':'/home/login'
    })
</script>
</body>
</html>

View Code

　　　　3、路由的其他信息：　　　　　

<!--在router里面使用$router.params參數可以獲取url中的數值-->
    {{$route.params|json}}
    <br>
    <!--當前路由路徑-->
    {{$route.path}}
    <br>
    <!--如果想獲取url?后面的數據，可以使用$route.query來獲取-->
    {{$route.query|json}}

　　　　十六、vue-loader

　　　　　　webpack 模塊加載器，一切都是模塊

　　　　　　vue-loader基於webpack

　　　　　　.vue文件:　　

　　　　　　　　放置的是vue組件代碼

　　　　　　　　.vue文件包含三個文件夾

　　　　　　　　　　1、template 里面放的html模板

　　　　　　　　　　2、style　　　里面放的是cs模塊

　　　　　　　　　　3、script　　　里面放的是js代碼一般都是放的是ES6代碼然后通過babel-loader編譯成ES5代碼　　　　　　　　　　

　　　　　　　　搭建：

　　　　　　　　目錄結構：

　　　　　　　　　|-index.html

　　　　　　　　　|-main.js　　　　入口文件

　　　　　　　　　|-App.vue 　　vue文件

　　　　　　 |-package.json　工程文件（項目依賴、名稱、配置）

　　　　　　　　 |-webpack.config.js

　　　　　　webpack准備工作：

　　　　　　備注：bower也是通過cnpm安裝的，bower是前端安裝工具，webpack是后端安裝工具

　　　　　　npm install webpack

　　　　　　npm install webpack-dev-server

　　　　　　如果沒有安裝npm需要安裝node.js，安裝完畢后自動帶有npm安裝工具，通過npm -v查看版本

　　　　　　如果需要在國內快速安裝webpack，需要安裝淘寶的cpm

　　　　　　npm install cpm -g

　　　　　　然后通過cnpm install webpack -g來完成webpack安裝

　　　　　　cnpm uninstall 卸載包

　　　　　　cnpm init 自動生成package.json文件

　　　　2、多頁路由(路由嵌套)

　　　　主頁 home　　

　　　　　　　　登錄　　home/login

　　　　　　　　注冊 home/reg

　　　　新聞頁　 news

　　　　主要應用subRoutes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="animate.css">
    <style>
        .v-link-active{
            font-size:20px;
            color:#286090;
        }
    </style>

</head>
<body>
<div id="app">
    <ul>
        <li><a v-link="{path: '/home'}">主頁</a></li>
        <li><a v-link="{path: '/news'}">新聞</a></li>
    </ul>
    <router-view></router-view>
</div>
<template id="home">
    <h3>我是主頁</h3>
    <div>
        <a v-link="{path: '/home/login'}">登錄</a>
        <a v-link="{path: '/home/reg'}">注冊</a>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="news">
    <h3>這是新聞頁</h3>
</template>

<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    //1、准備一個根組件
    var App=Vue.extend();

    //2、 Home news組件都准備
    var Home=Vue.extend({
        template: '#home'
    });
    var News = Vue.extend({
        template:'#news'
    });
    //3、 准備路由
    var router = new VueRouter();

    //4、關聯
    router.map({
        'home':{
            component:Home,
            subRoutes:{
                'login':{
                    component:{
                         template:'<strong>我是登錄界面</strong>'
                    }
                },
                'reg':{
                    component:{
                         template:'<strong>我是注冊界面</strong>'
                    }

                }
            }
        },
        'news':{
            component:News
        }
    });
    //5、啟動路由
    router.start(App, '#app');
    //6、重定向到主頁
    router.redirect({
        '/':'/home/login'
    })
</script>
</body>
</html>

View Code

　　　　3、路由的其他信息：　　　　　

<!--在router里面使用$router.params參數可以獲取url中的數值-->
    {{$route.params|json}}
    <br>
    <!--當前路由路徑-->
    {{$route.path}}
    <br>
    <!--如果想獲取url?后面的數據，可以使用$route.query來獲取-->
    {{$route.query|json}}

　　　　十五、vue-loader

　　　　　　webpack 模塊加載器，一切都是模塊

　　　　　　vue-loader基於webpack

　　　　　　.vue文件:　　

　　　　　　　　放置的是vue組件代碼

　　　　　　　　.vue文件包含三個文件夾

　　　　　　　　　　1、template 里面放的html模板

　　　　　　　　　　2、style　　　里面放的是cs模塊

　　　　　　　　　　3、script　　　里面放的是js代碼一般都是放的是ES6代碼然后通過babel-loader編譯成ES5代碼　　　　　　　　　　

　　　　　　　　搭建：

　　　　　　　　目錄結構：

　　　　　　　　　|-index.html

　　　　　　　　　|-main.js　　　　入口文件

　　　　　　　　　|-App.vue 　　vue文件（官方推薦命名法）

　　　　　　 |-package.json　工程文件（項目依賴、名稱、配置）

　　　　　　　　　　　　　　　　npm init --yes生成

　　　　　　　　 |-webpack.config.js

　　　　　　webpack准備工作：

　　　　　　備注：bower也是通過cnpm安裝的，bower是前端安裝工具，webpack是后端安裝工具

　　　　　　npm install webpack --save-dev

　　　　　　npm install webpack-dev-server --save-dev

　　　　　　如果沒有安裝npm需要安裝node.js，安裝完畢后自動帶有npm安裝工具，通過npm -v查看版本

　　　　　　如果需要在國內快速安裝webpack，需要安裝淘寶的cpm

　　　　　　npm install cpm -g

　　　　　　然后通過cnpm install webpack -g來完成webpack安裝

　　　　　　cnpm uninstall 卸載包

　　　　　　cnpm init 自動生成package.json文件

　　　　　　App.vue -> 變成正常代碼需要vue-loader@8.XX

　　　　　　需要下載cnpm install vue-loader --save-dev

　　　　　　cnpm install vue-html-loader --save-dev

　　　　　　cnpm install css-loader --save-dev

　　　　　　cnpm install style-loader --save-dev

　　　　　　cnpm install vue-hot-reload-api --save-dev #js loader

　　　　　　babel相關插件下載：

　　　　　　babel-loader

　　　　　　babel-core

　　　　　　babel-plugin-transform-runtime

　　　　　　babel-preset-es2015

　　　　　　babel-runtime

　　　　　　最核心：vue

　　　　　　bower install vue

　　　　　　bower install vue#1.0.28 --save #必須依賴的加--save 開發依賴的加--save-dev

　　.vue結尾，稱為組件　

路由：

　　vue-router

配合vue-loader使用：

1、下載vue-router模塊 cnpm install vue-rotuer@0.7.13 --save

2、打開main.js文件

import VueRouter from 'vue-router'

3、讓Vue來使用VueRouter

也在main.js文件中

Vue.use(VueRouter)

4、配置路由

const router = new VueRouter();

//引入模塊
import Home from './components/Home.vue'
import News from './components/News.vue'

router.map({
    'home':{
        components:Home
    },
    'news':{
        components:News
    }
});

5、開啟路由：

router.start(App,'#app');
注意：需要在App.vue里將template里內容放在一個div中，這個div的id為APP，這樣才不會報warning錯誤

<template>
   <div id="#app">
        <h3>vue-loader + vue-router</h3>
    <div>
        <a v-link="{path:'/home'}">主頁</a>
        <a v-link="{path:'/news'}">新聞</a>
    </div>
    <router-view></router-view>
   </div>
</template>

View Code

路由嵌套：

//專門配置路由規則
//引入模塊
import Home from './Home.vue'
import News from './News.vue'
import Login from './Login.vue'
import Reg from './Reg.vue'
import Detail from './Detail.vue'  //引入子級內容
export default {
    '/home':{
        component:Home,
        subRoutes:{//需要將子級標簽寫在下面
            'login':{
                component:Login  //子級對應的內容
            },
            'reg':{
                component:Reg
            }
        }
    },
    '/news':{
        component:News,
        subRoutes:{
            'detail/:id':{
                component: Detail
            }
        }
    }
}

<template>
    <strong>{{$route.params|json}}</strong> <!--$route.params對應的是url的id內容      -->
    {{$route.query|json}}    <!--$route.query對應的是url內？后面內容-->

</template>

項目上線：

　　npm run build -> 本質是webpack -p 需要寫在package.json中的scripts下面

{
  "name": "vue-loader-demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --port 8083",
    "build":"webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-runtime": "^6.11.6",
    "css-loader": "^0.25.0",
    "vue-hot-reload-api": "^1.3.2",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^8.5.4",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "vue": "^1.0.28",
    "vue-router": "^0.7.13"
  }
}

View Code

十七、腳手架：

　　vue-cli提供一個基本的項目結構
　　本身集成的項目模板：
　　　1、webpack　　
　　  2、webpack-simple
　　  3、browserify
　　  4、browserify-simple
     5、simple


基本使用流程：
1、cnpm install vue-cli -g 安裝vue命令環境
　　驗證安裝ok？ vue --version 
2、生成項目模板：
　　　　vue init <模板名>  <本地文件夾名稱>
　　　　例子： vue init simple#1.0 vue-simple-demo   #simple是簡單模板，1.0表示vue 1.0版本
3、進入到生成目錄里面
　　cnpm install
4、npm run dev

wos部分：

一、partial講解

1、靜態傳值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-wos:val.red.border="num">
    <partial name="my-div1"></partial>
    <partial name="my-div2"></partial>
</div>
<script src="./bower_components/vue/dist/vue.js"></script>
<script>
    Vue.partial('my-div1','<p>my-div-1</p>');
    Vue.partial('my-div2','<p>my-div-2</p>');
    new Vue({
        el:'#app',
        data:{
            num:'1'
        }
    })
</script>
</body>
</html>

View Code

2、動態傳值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-wos:val.red.border="num">
    <partial :name="dongtaimoban"></partial>

</div>
<script src="./bower_components/vue/dist/vue.js"></script>
<script>
    Vue.partial('my-div1','<p>my-div-1</p>');
    Vue.partial('my-div2','<p>my-div-2</p>');
    Vue.partial('my-div3','<p>my-div-3</p>');
    new Vue({
        el:'#app',
        data:{
            num:'1',
            dongtaimoban:'my-div3'//當動態模板選擇my-div3時，會渲染出第三部分內容，這個可以通過綁定v-on方法來隨意更改模板的樣式
        }
    })
</script>
</body>
</html>

View Code

二、extend

1、template

　　在new Vue定義中，如果定義了template，就直接調用template中內容，其他內容優先級低於template中內容，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

{{message}}

</div>
<script src="./bower_components/vue/dist/vue.js"></script>
<script>

    new Vue({
        el:'#app',
        data:{
            message:'我是主構造器內容'

        },
        template:'我是模板內容'//只會顯示模板內容
    })
</script>
</body>
</html>

當打開時會發現，只顯示template中內容

　2、set

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue.js 源碼分析(二十八) 高級應用 transition組件詳解 python爬蟲學習筆記(二十八)-Scrapy 框架爬取JS生成的動態頁面 GUI學習之二十八—QMessageBox Python機器學習（二十八）Sklearn 使用matplotlib可視化數據前端學習(二十八）es6&ajax（筆記） HTML5學習筆記（二十八）：跨域 Hadoop學習之路（二十八）MapReduce的API使用（五） EF6學習筆記二十八：並發沖突（二）二十八、oracle 視圖 FreeSql （二十八）事務