Python学习二十八周（vue.js）

2021-10-04 02:00:34

一、指令

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>

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>

事件: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>

显示隐藏 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>

例子：

简易留言板（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>

二、事件

　　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>

　　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>

　　数据配合使用的过滤器：

　　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>

　　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>

　　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>

　　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>

　　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>

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>

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

　　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>

　　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>

　　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>

自定义指令：

　　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>

　　注意：指令必须以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>

数据监听：

　　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>

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

　　组件里放数据：

　　必须以以下形式：要求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>

　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>

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

　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>

　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>

　　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>

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

　　　　　　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>

　　　　十三、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>

　　　　十四、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　　

　　　　新闻页　 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>

　　　　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　　

　　　　新闻页　 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>

　　　　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>

路由嵌套：

//专门配置路由规则

//引入模块

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"

  }

}

十七、脚手架：

　　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>

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>

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

码农公寓

相关文章