Vue（二）：Vue实例和它的属性

1、创建Vue实例
　　个人认为创建vue的实例有两种，一种就是写代码（如下），另外一种就是建立一个后缀名是vue的文件，该文件可以当作组件引用。而所有的组件都是一个vue实例。

var vm = new Vue({
  el: '#example',  //元素的id
  data: data       //data属性
})

　　建立vue的项目也是有两种方式，一种就是在传统的web项目中引用vue的js，在需要用到vue的地方声明vue的实例。这种方式使用第一种创建vue实例的情况可能多一些。
另外一种建立vue项目的方式就像我上篇博客中写的那样，通过vue的脚手架生成一个vue的项目，需要用到vue实例的地方，建立一个后缀名是vue的文件引入到需要使用的地方。
我们将每一个页面或者组件都使用这种方式声明，也许就是web项目的组件化，即每一个完整的功能都可以当成组件引用。
2、Vue的属性及作用
　　我们以一个vue文件常用的布局来显示出vue实例中常常用到的属性

<template>
<!-- template这个标签内包含的是html代码 -->
<!-- 且该标签内只能有一个根元素，也就是下面的div。其他的代码必须写在div中，否则就会报错。当然div也可以换成p，span之类的，但是根元素只能有一个 -->
    <div>
        ...
    </div>
</template>

<script>
export default { //导出默认模块的意思，即导出这个demo.vue为组件的意思，在其他地方引入demo.vue就是默认引入这个模块啦
    components:[],  //引入的组件
    mixins:[],  //引入的js
    data(){  //这个是当前组件的数据源,数据写在return中，这种写法就保证该数据源只在当前组件中可以调用，避免变量污染
        return{
            str1:"",num1:1,num2:2,num4:0
        }
    },
    /*data:{ str2:""},  //这个是数据源的另一种写法，官网实例也是用的这个，但是这个数据源全局可见，容易污染变量，泄露数据。*/
    methods:{ //方法的集合
        fun1(){
            return this.num1+this.num2;
        }
    },
    computed:{  //计算属性,基于它们的响应式依赖进行缓存，只在相关响应式依赖发生改变时它们才会重新求值
        num3(){  //看着像一个方法，实际返回的是一个名为“num3”的值，根据“num1”和“num2”的改变而改变
            var self=this;
            var tempNum =self.num1+self.num2
            return tempNum;
        }
        /*以num3为例，我对它的理解：前端缓存根据num3的计算方法知道了，num3是根据num1和num2计算生成的。所以前端添加了对num1和num2的监视
        并保存了num3的值，当前端检测到num1或者num2的值变化后，再走一遍num3的计算方法，计算出对应的值赋给num3*/
    },
    watch:{ //监视器
        /* 再解释一遍上文的计算属性，num4的变化就是num3的真实变化，但是打开之后你们会发现num4还是0，因为num1和num2没有变化，所以检测不到*/
        num1(newValue,oldValue){//监视默认传入的方法，第一个是变化后的值，第二个是变化前的值
            this.num4=this.fun1();
        },
        num2(newValue,oldValue){
            this.num4=this.fun1();
        }
    }
}
</script>

Vue（二）：Vue实例和它的属性

猜你喜欢