vuejs6

1.自定义行为
//    自定义行为
    Vue.directive('wan',{
        bind:function(el,binding){//被绑定
            el.style = 'color:'+binding.value;
    },
<div id="app">
    <div v-wan="color">
  本场比赛得分:{{fenshu}}</div>
    <!--执行加法函数-->
    <button v-on:click="jiafen">加分</button>
    <!--执行减法函数-->
    <button @click="jianfen">减分</button>
    <button onclick="unbind()">解绑</button>
    <input type="text" v-on:keyup.enter="onEnter"  v-model="fenshu2">
</div>
function unbind( ) {
        app.$destroy();
    }//解除绑定
//    自定义行为
    Vue.directive('wan',{
        bind:function(el,binding){//被绑定
            el.style = 'color:'+binding.value;
    },
    inserted:function(){//绑定到节点执行的方法
        console.log('2 - inserted');
    },
    update:function(){//组件更新
        console.log('3 - update');
    },
    componentUpdated:function(){//组件更新完成
        console.log('4 - componentUpdated');
    },
2.vue.extend{扩展 实例构造器} 自定义标签
<author>




</author>
<script type="text/javascript">
//   设置，html
    var authorExtend = Vue.extend({
       template:"<p><a :href='authorURL'>{{authorName}}</a> </p>",
       data:function () {
           return{
               authorName:"JSPang",
               authorURL:"http://jspang.com"
           }
       }
   })
//  加载 数据 到author标签当中去
    new authorExtend().$mount("author");
3.v-set的目的，就是实现js无法更改数组下标的值
<script type="text/javascript">
    function add() {
//       Vue.set(outData,'count',2);
       Vue.set(outData.arr,1,'ddddd');//js不能更改数组下标的值（监听不到），vue通过这样可以更改下标
//        outData.arr[1]='dddd';
    }
   var outData = {
       count:1,
       arr:['aaa','bbb','ccc'],
       goods:'car'
   }
   var app = new Vue({
       el:'#app',
       data:outData


   }
   )
</script>
4.生命周期
<div id="app">
    <!--模版渲染-->
    {{message}}


    <button v-on:click="add">加分</button>


</div>
<!--app.$destroy()内置 方法-->
<button onclick="app.$destroy()">销毁</button>
<script type="text/javascript">
    var app = new Vue({
//        节点的id
        el:'#app',
        data:{
            message:1
        },


        methods: {
            add: function () {
                this.message++;
            }
        },
        beforeCreate:function(){
            console.log('1-beforeCreate 初始化之后');
        },
        created:function(){
            console.log('2-created 创建完成');
        },
        beforeMount:function(){
            console.log('3-beforeMount 挂载之前');
        },
        mounted:function(){
            console.log('4-mounted 被创建');
        },
        beforeUpdate:function(){
            console.log('5-beforeUpdate 数据更新前');
        },
        updated:function(){
            console.log('6-updated 被更新后');
        },
        activated:function(){
            console.log('7-activated');
        },
        deactivated:function(){
            console.log('8-deactivated');
        },
        beforeDestroy:function(){
            console.log('9-beforeDestroy 销毁之前');
        },
        destroyed:function(){
            console.log('10-destroyed 销毁之后')
        }


    })
5.模板的三种写法
<h1> 模板的三种写法 </h1>
<div id="app">
    <!--模版渲染-->
    {{message}}</div>
<template id="m1">
    <h2 style="color:red;"> 我是Template模板</h2>
</template>
<template type="x-template" id="m2">
    <h2 style="color:red;"> 我是Script模板</h2>
</template>
<script type="text/javascript">


   var app = new Vue({
//        节点的id
        el: '#app',
        data: {
            message: 'hello world111'
        },
//       选项模板
//        template: `<h2 style="color:red;"> 我是 选项模板</h2>`,
      template:"#m2"//载入id的样式模板
    });
</script>
6.组件
1）声明组件
<h1> component </h1>
<div id="app">
    <!--模版渲染-->
    <wanjiajia></wanjiajia>  //自定义标签会输出定义组件的内容
    <panda></panda>     
</div>


<script type="text/javascript">
//    外部声明组件
    Vue.component('wanjiajia',{
        template:`<h2 style="color: red;">外部声明组件</h2>`
    })
//    必须 要放在vue的作用域内
    var app = new Vue({
//        节点的id
        el:'#app',
//        内部声明组件
        components:{
            'panda':{
                template:`<h2 style="color: red;">内部声明组件</h2>`
            }
    }


    })
</script>
2）加载组件的属性
/    外部声明组件
    Vue.component('wanjiajia',{
        templahhjte:`<h2 style="color: red;">外部声明组件{{ here }}</h2>`,
        props:['here']
    })
//    必须 要放在vue的作用域内，不然没有效果
    var app = new Vue({
//        节点的id
        el:'#app',
//        内部声明组件
        components:{
            'panda':{
                template:`<h2 style="color: red;">内部声明组件{{ formHere }}</h2>`,//加载 here
                props:['formHere']//加载属性
            }
    }


    })
3)实现效果
<div id="app">
    <!--模版渲染-->
    <wanjiajia here="China"></wanjiajia>
    <!--绑定属性  //必须要绑定属性who，才能实现效果-->
    <panda  v-bind:is="who"></panda>
    <button @click="jiafen">减分</button>
</div>


<script type="text/javascript">
//    外部声明组件
    Vue.component('wanjiajia',{
        template:`<h2 style="color: red;">外部声明组件{{ here }}</h2>`,
        props:['here'] //加载here
    })
var panda = {
    template:`<h2 style="color: green;">未登录</h2>`,
}
var panda2 = {
    template:`<h2 style="color: red;">登录成功</h2>`,
}
var panda3 = {
    template:`<h2 style="color: yellow;">请注册</h2>`,
}
//    必须 要放在vue的作用域内
    var app = new Vue({
//        节点的id
        el:'#app',
        data:{
            who: 'panda'  //判定属性的值，通过判定属性的值来判断显示的颜色
        },
//        内部声明组件
        components:{
            'panda':panda,  //变量赋值
            'panda2':panda2, //变量赋值
            'panda3':panda3 //变量赋值
    },
        methods:{
            jiafen:function () {
            if(this.who =="panda"){
             this.who = "panda2";
            }else if(this.who == 'panda2'){
              this.who = "panda3";
            }else if(this.who == 'panda3'){
                this.who = 'panda'
            }


        }
    }




    })
</script>