VUE的使用方法

vueInit: function() {
    var _this = this;
    this.vue = new Vue({
        el: '#pa',
        data: {
            //存放初始化數據
            sourceData:[]
        },
        computed:{
            fulls:function(){
                //計算屬性，也會在數據發生變化時執行,該屬性可以在頁面模板中直接調用
            },
            halfs:function(){

            }
        },
        methods:{
            tagClick:function(){
                //在‘methods’ 對象中定義方法，頁面中使用v-on:click="tagClick"調用
            }
        },
    }
    //this.vue.$watch函數：當data中的數據發生變化的時候，執行下面的函數；與computed
    //不同的是，computed屬性計算的是屬性值；而this.vue.$watch是執行邏輯函數；
    this.vue.$watch('sourceData', function(){});
}

 1：計算屬性和方法的區別：

data: {
    oldData:1
},
computed:{
    changeSource:function(){
        console.log('執行此函數');
        return this.oldData+'=====>我改變了的文本';
    }
},
watch:{
    oldData:function(val, oldVal){
        console.log('數字發生了變化,舊數據是'+oldVal+'新數據是'+val+'');
    }
},

1）計算屬性可以返回值，然后將該參數changeSource放在html中<div v-cloak>{{changeSource}}</div>，而監聽函數卻不能放在html中傳值；

2）

2:使用template 和直接使用v-if的區別

            <template v-if="ok">
              <h1>Title</h1>
              <p>Paragraph 1</p>
              <p>Paragraph 2</p>
            </template>

把一個 <template> 元素當做包裝元素，並在上面使用 v-if，最終的渲染結果不會包含它

在div元素上使用 v-if，包括該div

2:全局模版創建Demo

Vue.component('app7-5', {
    template: '<div><h4>title</h4><p>content</p></div>',
})
var app = new Vue({
    el: "#app"
})
var app = new Vue({
    el: "#app1"
})
var app = new Vue({
    el: "#app2"
})

相應的html：

<div id="app" class="panel">
    <h2>全局模版創建Demo</h2>
    <app7-5></app7-5>
</div>
<div id="app2" class="panel">
    <h2>全局模版創建Demo2</h2>
    <app7-5></app7-5>
</div>
<div id="app3" class="panel">
    <h2>全局模版創建Demo3</h2>
    <app7-5></app7-5>
</div>

放在new Vue前面聲明的全局組件，在之后的所有new Vue實例中都可以實現；

但是放在vue實例之后的全局組件則不能顯示

var app = new Vue({
    el: "#app"
})
Vue.component('app7-5', {
    template: '<div><h4>title</h4><p>content</p></div>',
})

則在html中無法顯示組件app7-5

 

動態組件的使用：

人才庫項目中，通過使用保留的 <component> 元素，動態地綁定到它的 is 特性，我們讓多個組件可以使用同一個掛載點，並動態切換：其中type相當於dialog-add；dialog-print等子組件的標簽值

如下在父vue組件中所示：