VueJS 语法

vuejs 的使用

<div class='box'>
    <p>{{msg}}</p>
    <p>{{name}}</p>
</div>
//创建一个控制器
new Vue({
    //选择器，控制器要去控制哪个标签，给哪个标签当中提供数据
    el:'.box'.
    //数据模型，给 el 选择出来的内容提供数据
    data:{
        msg:'hello world',
        name:'xmg'
    }
//另一种绑定方法
}).$mount('.box');

vuejs 的一些指令

• 不闪烁的数据绑定 <p v-text='msg'></p>
• 如果数据中有 html 标签，则会被解析 <p v-html = 'msg'></p>
• 显示标签 <p v-show='true'>123</p> 如果另一个标签与此标签相反的显示隐藏则用<p v-else>456</p>
• <p v-pre>{{msg}}</p> 不会解析直接原样输出
• <li v-for="(key,value) in course">{{key}}--{{value}}</li> 遍历
• 上述遍历是vue.js1.0，在 vue.js 2.0 中 <li v-for="(value,key) in course">{{value}}--{{key}}</li> 第二个参数变为下标，第一个参数为值
• <p v-if='true'>123</p> 标签存在与否，相反的用 v-else 属性
• vuejs 中没有templateUrl，所以模版都写在<template></template> 标签中
• <input type='text' v-model='name'> 双向绑定

// new Vue() 会返回当前的控制器，使用返回值的控制器可以直接调用里面的属性
var vue = new Vue({
    data:{
        name:'',
        age:10
    }
}).$mount('#box');

Vue.js 的事件

vuejs 中的事件指令都写在控制器下的methods:{} 中

<div id="box">

    <p>{{age}}</p>
    <button v-on:mouseenter="modify(5)">修改年龄</button>
    <button @click="age=20">修改年龄</button>  <!--可以直接在后面操作模型的属性-->
    <button @click="modify(20)">修改年龄</button>  <!--可以直接在后面操作模型的属性-->

</div>

<script>

    var vue = new Vue({     //new Vue() 会返回当前的控制器，使用返回的控制器可以直接调用里面的属性。
        data:{
            age:10,
        },
        methods:{
            modify:function (agr) {
                this.age = agr;
            }
        }

    }).$mount('#box');   //$mount(选择器)


</script>

<div @click = 'show'>
    <button @keydow='modify($event)'>点击</button>
    //给指令键注册事件
    <input type="text" @keydow.xmg="down($event)">
</div>

<script>
    Vue.directive('on').keyCodes.xmg = 17;
    new Vue({
        data:{
            age:10
        },
        methods:{
            modify:function(e){
                this.age = 20;
                //阻止事件冒泡
                e.cancelBubble = true ;
            }.
            down:function(e){
                alert('down----' + e.keyCode);
            }
        }
    }).$mount('#box');
</script>

vue.js 过滤器

<div id="app">
    <p>{{name | uppercase | lowercase}}</p>
    <p>{{price | currency '￥'}}</p> <!-- 传参通过空格来传参-->
    <ul>
        <li v-for="value in curse | filterBy 'css'">{{value}}</li>
    </ul>

    <ul>
        <li v-for="value in curse | limitBy  2">{{value}}</li>
    </ul>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'hello',
            price : 10,
            curse:['css','js','html']
        }
    });

</script>

• 绑定控制器时，不建议绑定到 body\html 上，在 vue2.0当中这么做会报错；在 vue2.0 里，所有的内置过滤器都被删除了，以压缩框架体积，但是可以自定义过滤器

Vue.filter('xmgCurrency',function(input,a){
    return a + input;
})

自定义指令

• Vue.directive 定义的指令都是以属性形式的 'Attribute'

Vue.directive('red',function(){
    //在自定义指令当中可以拿到指令标签
    this.el.style.background = 'red';
})

• 自定义指令可以传参数

Vue.directive('color',function(color){
    this.el.style.background = color;
})

• 自定义元素指令

Vue.elementDirective('xmg-red',{
    bind:function(){
        this.el.style.background = 'red';
    }
})

<p>{{name}}</p>
<p v-red>123456</p>
<p v-color=" 'green' ">77777</p>
<xmg-red>777788888</xmg-red>

计算属性 get 方法和 set 方法的调用形式

• 点语法调用的是 get 方法
• 点等于调用的是 set 方法

 new Vue({
        el:'#app',
        data:{
            num:3,
            price : 10,
        },
        methods:{
            count(){
                this.total;       //会自动调用get方法
                this.total = 10;  //会自动调用set方法把10传给set方法
            }
        },
        computed:{ //当中声明都是计算属性
                    //在每一个计算属性当中有两个方法，get方法与set方法
                    //get与set方法是自己调用的方法。
                    //get方法调用时机：当使用 this.total时会调用get方法  return的值，就是定义属性的值。
                    //想要获取属性时，会自动调用get方法
                    /*----------------------------*/
                    //set方法调用时机
                    //给该属性赋值是会自动调用set方法  this.total = 100;  会自动调用set 并且会把赋的值传给set的参数。
                    //在set方法当中，不能再使用.属性=value    this.tataol = 100;
            total:{
                get(){
                    console.log('调用了get方法'+value);
                    return this.price * this.num + 1;
                },
                set(value){
                    this.total = 20;
                }
            },
            age:{
                get(){
                    console.log('调用了get方法'+value);
                    return this.price * this.num + 1;
                },
                set(value){
                    this.total = 20;
                }
            }
        }
    });

生命周期 钩子函数

在 vue2.0 钩子函数有所变化

 var vue =  new Vue({
        el:'#app',
        data:{
            name:'hello',
            price : 10,
            curse:['css','js','html']
        },
        methods:{
            destroyVue:function () {
                alert(1);
                vue.$destroy();
                this.$destroy();
            }
        },
        created:function(){               //钩子函数：在某个特定时期会自动调用相应的方法。
            alert('实例已经创建');        //生命周期：从生到死的过程。
        },
        beforeCompile:function(){
            alert('编译之前');
        },
        compiled:function(){
            alert('编译之后');
        },
        ready:function(){
            alert('准备插入到文档中');
        },
        beforeDestroy:function(){
            alert('销毁之前');
        },
        destroyed:function(){
            alert('销毁之后');
        }
    });

全局组件

组件本质就是模版

//创建了一个模版
var ext = Vue.extend({
    template:'<h1>我是组件</h1>'
});
//全局组件：在任何一个控制器当中都可以使用此组件
Vue.component('xmg',ext);

局部组件

• 局部组件：只能在自己声明的控制器中使用，可以定义多个

var ext = Vue.extend({
    template:'<h1>我是组件</h1>'
});
new Vue({
    el:'.box1',
    data:{
        msg:'xmg'
    },
    components:{
        xmg:ext,
        gxq:{
            template:'<h1>我是 gxq</h1>'
        }
    }
})

组件绑定数据

• 当创建一个组件时，就是一个隔离作用域，里外数据不互通

 /*创建了一个模板*/
    var ext =  Vue.extend({
        template:'<h1>我是组件</h1>'
    });
    /*局部组件：只能在自己声明的控制器当中来使用 ,可以定义多个*/
    new Vue({
       el:'.box1',
        data:{
           msg:'xmg'
        },

        components:{   //当创建一个组件是，就是一个隔离作用域。
            xmg:ext,
            gxq:{
                data:function () {
                  return {
                      msg:'myMsg',
                      name:'name123'
                  }
                },
                methods:{
                    show(){
                        alert('show');
                    }
                },
                template:'<h1>我是gxq组件{{msg}}----{{name}}</h1><button @click="show">点击</button>'
            }
        }
    });

组件的模版

    new Vue({
        el:'#app',
        components:{
            xmg:{
                template:'#temp1'  //不能使用templateUrl 来引用模板文件
                                     //Vue考虑到性能性能原因。
                                     //因为浏览器不能访问文件。angular当中使用url来访问一个文件，
                                    // 它是发送了一个Ajax请求,拿到请求结果，插入到文档当中。
            }
        }
    })

动态组件

<div id="app">
    <button @click="change">切换</button>
    <!--在属性前面加上":" 会解析后面的内容 到控制器当中查找有没有这个属性-->
    <component v-bind:is="name"></component>
    <component is="xmg"></component> <!--不去解析里面的值-->
</div>

 new Vue({
        el:'#app',
        data:{
            name:'xmg'
        },
        methods:{
            change(){
                this.name = 'xmg2';
            }
        },
        components:{
            xmg:{
                template:'<h1>xmg组件</h1>'
            },
            xmg2:{
                template:'<h1>xmg2组件</h1>'
            }  
        }
    })

• es6.0 的函数写法

methods:{
    change(){
        this.name = 'xmg2';
    }
}

父子组件

<div id="app">

    <fathercom></fathercom>

</div>


<template id="temp1">

    <h1>xmg组件{{name}}</h1>
    <input type="text" v-model="name">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <hr>
    <!--传递的数据双向绑定-->
    <childcom :msg.sync="name"></childcom>

</template>

new Vue({
    el:'#app',
    components:{
        fathercom:{
            template:'#temp1',
            data:function(){
                return {
                    name:'xmg'
                }
            },
            components:{
                //声明子组件，声明的子组件只能在父组件的模版中
                children:{
                    template:'<h1>我是子组件{{msg}}</h1> <input type="text" v-model="msg">',
                    //在使用组件时，外部可以传递一个值进来
                    //<childcom :msg="name"></childcom>
                    //父数据的变化会影响子数据变化
                    //子数据变化不会影响父数据变化
                    //传递数据的时候如果加上 .sync 表示双向绑定，互相影响
                    // <childcom :msg.sync="name"></childcom>
                    props:['msg']
                }
            }
        }
    }
});