Vue語法

後來添加

<div :style={'obj'}></div>
<div v-show="isShow"></div>
<div>{{msg}}</div>

實例化vue

var vm = new Vue({
    el:"#demo",
    data:{
        msg:"鄭州歡迎你們",
        dataList:[1,2,3,4]
    }
})

v-for 遍歷

<li v-for="data in dataList">{{data}}</li>

methods

//實例化中添加
methods:{
    clickMe:function(){
        alert("點擊成功")
    }
}

創建組件

//第一種方法
Vue.component("tada-fun",{
    template:"<h1>今天天氣很好</h1>"
})
//第二種方法
var Header = Vue.extend({
    template:"<h1>這是頭部</h1>"
});
Vue.component("tada-header",Header)
//第三種方法
var Footer = {
    template:"<h1>這是尾部</h1>" 
};
var vm = new Vue({
    el:"#demo",
    components:{
        "tada-footer":Footer
    }
});

$mount掛載

var Pro = Vue.extend({
    template:"<p>{{info}}</p>",
    data:function(){
        return({info:"馬上要吃飯了"}) 
    }
});
//掛載
new Pro().$mount("#demo");

增刪數據

// html
<li v-for="(item,index) in List">第{{index}}個：{{item}}<button v-on:click="removeMe(index)">刪除</button></li>

// js的methods中
removeMe:function(index){
    console.log(index)
    this.List.splice(index,1);      
    console.log(this.List)
}

computed

computed是計算屬性
* 與methods不同，不同的是數據更改後悔自動計算;methods會需要添加事件觸發

Vue.filter過濾器

//html
<p>{{num | todo(n1,n2)}}</p>

//js
Vue.filter("todo",function(value,n1,n2){
    if(n1 > n2){
        return "傍邊有個大美女"
    }else{
        return "哈哈哈"
    }
})

vue中事件監聽

//定義$watch進行監聽
vm.$watch("info",function(newval,oldval){
    console.log(newval + "," + oldval)
})

//第二種方法
var vm =  new Vue({
    el:"#demo",
    data:{
        info:"馬上就放學了"
    },
    watch:{
        info:function(newval,oldval){
            console.log(newval,oldval)
        }
    }
});

生命週期函數

• 組件創建時
  beforeCreate 實例化組件對象後觸發
  created：組件接受data後觸發
• 組件渲染時
  beforeMount：在模板渲染前觸發
  mounted：模板渲染之後觸發
• 組件更新
  beforeUpdate：在組件更新前觸發
  updated：在組件更新後觸發
• 組件卸載時
  biforeDestroy：在卸載之前觸發（語法：this.$destroy()）
  destroyed：在卸載之後觸發

父子組件傳值

<v-child v-bind:msg="msg"></v-child>
// 子組件獲取父組件的值
var Child = {
    template:"#child",
    props:["msg"],
    data:function(){
        return {
            mm:this.msg,
            childMsg:"來自子元素的信息"
        }
    }
};

// 父組件獲取子組件的值
<v-child @to-parent="getChildData"></v-child
//js  子組件
var Child = {
    template:"#child",
    data:function(){
        return {
            childMsg:"來自子元素的信息"
        }
    },
    methods:{
        send:function(){
            this.$emit("to-parent",this.childMsg);
        }
    }
};
// 父組件代碼
var Father = {
    template:"#father",
    components:{
        "v-child":Child
    },
    data:function(){
        return{
            childMsg2:""
        }
    },
    methods:{
        getChildData:function(childMsg){
            this.childMsg2 = childMsg;
            console.log("觸發")
        }
    }
};

slot 屬性

說白了就是一個佔位符，分發屬性,可以直接替換slot爲components

// html 
<div id="demo">
    <aaa>
        <ul slot="content">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <h3 slot="shuai">他們比我帥所以作業加倍</h3>
    </aaa>
</div>
<template id="aaa">
    <div>
        <h2>這周馬上就要過去了</h2>
        <slot name="shuai"></slot>
        <slot name="content"></slot>
        <h2>這是底部</h2>
    </div>
</template>


//js
var vm = new Vue({
    el:"#demo",
    components:{
        "aaa":{
            template:"#aaa"
        }
    }
})

ref屬性

ref獲取子元素的完整對象

// html
<v-child ref="myChild"></v-child

// js
methods:{
        getInfo:function(){
            console.log(this.$refs.myChild.msg)
        }
    }