vue2.0学习笔记--自定义指令、v-set、钩子函数、vue 模板、vue 组件

一，自定义指令 Vue.directive(‘名称’,function(el,binding,node){
});

<div id="app">
    <p v-datacolor="color">{{data}}</p>
    <button @click="addData">Add</button>
</div>
<script type="text/javascript">
    Vue.directive("datacolor",function(el,binding){
        el.style["color"]=binding.value;
    });
    var app = new Vue({
        el:'#app',
        data:{
            color:"red",
            data:1,
        },
        methods:{
            addData:function(){
                this.data++;
            }
        }
    });
</script>

通过构造函数自定义指令

<div id="app">
    <p v-datacolor="color">{{data}}</p>
    <button @click="addData">Add</button>
</div>
<script type="text/javascript">
    Vue.directive('datacolor',{
        bind:function(){//指令第一次绑定到元素时调用
            console.log('..bind');
        },
        inserted:function(){//被绑定元素插入父节点时调用
            console.log('..inserted');
        },
        update:function(el,binding){//组件更新
            el.style['color']=binding.value;
            console.log('..update');
        },
        componentUpdated:function(){//组件更新完成
            console.log('..componentUpdated');
        },
        unbind:function(){//解绑
            console.log('..unbind');
        }
    });
    var app = new Vue({
        el:'#app',
        data:{
            color:"red",
            data:1,
        },
        methods:{
            addData:function(){
                this.data++;
            }
        }
    });
</script>

v-set，解决DOM不发生变化界面不重新渲染问题

<div id="app">
    <div>
        <p>{{data}}</p>
        <ul>
            <li v-for="color in colors">{{color}}</li>
        </ul>
    </div>
</div>
<button onclick="addData()">Add</button>
<script type="text/javascript">
    function addData(){
        //app.colors[1]="white" //在DOM没发生变化时，界面不会重新渲染
        Vue.set(app.colors,1,"white");
    };
    var app = new Vue({
        el:'#app',
        data:{
            colors:["red","green","black"],
            data:1,
        },
    });
</script>

二，VUE生命周期（钩子函数）

<div id="app">
    <div>
        <p>{{data}}</p>
        <button @click="add">Add</button>
    </div>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            data:1,
        },
        methods: {
            add:function(){
                this.data++;
            }
        },
        beforeCreate:function(){//初始化之前
            console.log("beforeCreate");
        },
        created:function(){//创建完成
            console.log("created");
        },
        beforeMount:function(){//挂载之前
            console.log("beforeMount");
        },
        mounted:function(){//被挂载之后
            console.log("mounted");
        },
        beforeUpdate:function(){//组件更新之前
            console.log(" beforeUpdate");
        },
        updated:function(){//组件更新之后
            console.log(" beforeUpdate");
        },
        activated:function(){
            console.log("activated");
        },
        deactivated:function(){
            console.log("deactivated");
        },
        beforeDestroy:function(){//销毁之前
            console.log("beforeDestroy");
        }
    });
</script>

三，vue 模板

<div id="app">
    <!-- 方法一 -->
    <!-- <template id="tm">
        <h1 style="color: red;">你好</h1>
    </template> -->
</div>
<script type="x-template" id="tm">
    <h1 style="color: red;">你好</h1>
</script>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        template: "#tm",
    });
</script>

四，vue 组件
1，全局组件

<div id="app">
    <mycomponent></mycomponent>
</div>

<script type="text/javascript">
    Vue.component("mycomponent",{
        template:`<div style="color:red;">全局组件</div>`
    });
    var app = new Vue({
        el:'#app',
    });
</script>

局部组件

<div id="app">
    <mycomponent></mycomponent>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        components:{
            "mycomponent":{
                template:`<h1 style="color:red;">局部组件</h1>`
            }
        }
    });
</script>

组件 属性（props）

<div id="app">
    <mycomponent content="局部组件"></mycomponent>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        components:{
            "mycomponent":{
                template:`<h1 style="color:red;">{{content}}</h1>`,
                props:['content']
            }
        }
    });
</script>

组件 绑定值（v-bind: – 简写 ：）

<div id="app">
    <mycomponent :content="message"></mycomponent>
</div>

<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            message: "局部组件"
        },
        components:{
            "mycomponent":{
                template:`<h1 style="color:red;">{{content}}</h1>`,
                props:['content']
            }
        }
    });
</script>

构造器外 建立组件

<div id="app">
    <mycomponent></mycomponent>
</div>

<script type="text/javascript">
    var mycomponent={
        template:`<h1 style="color:red;">构造器外局部组件</h1>`
    };
    var app = new Vue({
        el:'#app',
        components:{
            "mycomponent":mycomponent
        }
    });
</script>

子组件

<div id="app">
    <mycomponent></mycomponent>
</div>

<script type="text/javascript">
    var soncomponent={
        template:`<h2 style="color:green;">子组件</h2>`,
    }
    var mycomponent={
        template:`
            <div>
            <h1 style="color:red;">构造器外局部组件</h1>
            <soncomponent></soncomponent>
            </div>
        `,
        components:{
            "soncomponent":soncomponent,
        }
    };
    var app = new Vue({
        el:'#app',
        components:{
            "mycomponent":mycomponent
        }
    });
</script>

component 标签

<div id="app">
    <component v-bind:is="custom"></component>
    <p><button @click="change">切换组件</button></p>
</div>

<script type="text/javascript">
    var components1={
        template:`<h1 style="color:red;">自定义组件一</h1>`,
    };
    var components2={
        template:`<h1 style="color:green;">自定义组件二</h1>`,
    };
    var app = new Vue({
        el:'#app',
        data:{
            custom: "components1"
        },
        components:{
            "components1":components1,
            "components2":components2,
        },
        methods:{
            change:function(){
                if(this.custom=="components1")this.custom="components2"
                else this.custom="components1"
            }
        }
    });
</script>