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组件中所示：