Vue系列之实例（二）

前言

      接着上一篇讲到了如何搭建一个vue项目，今天我们来具体讲解一下进行业务层面的开发的基础架构。本文主要讲解一下vue的实例参数有哪些，以及应用场景。

正文

      在上一篇章中提到项目入口文件，可以在webpack.base.conf.js中找到：

entry {
   app: './src/main.js'
}

在main.js中会有一个vue的实例，每个vue应用都是通过Vue函数创建一个vue实例开始的

new Vue({
   // 参数
})

其中，你可以配置一些选项，经常在业务系统的入口文件中用到的有：
el: 提供一个在页面上已存在的dom元素作为vue实例的挂载目标；

el: "#id"

router: 路由信息，后期单独介绍，不要捉急哈；
components: 模块，可以引入其他模块在当前的vue文件里使用；

components: { App }

**template:**一个字符串模板，它会替换挂载的元素，即挂载元素的内容将被忽略，除非模板中有slot。

template: '<App/>'

但是，vue实例的参数远远不止于此，下面我们说一下日常开发中经常用到的：
name: 表示组件名称，允许组件模板递归调用本身；

name: 'App'

data: 数据对象，用于定义组件中用到的数据，vue将data属性转化为getter和setter，让属性能够响应数据的变化，即双向数据绑定；

data () {
   return {}
}

methods: 顾名思义，用于表示方法，方法中的this自动绑定为vue实例

methods: {
   function () {}
}

computed: 计算属性，对数据testData监听并进行计算，最后返回计算值，即为testData新值

computed: {
   testData () 
   { 
      const num = 100
      return num
   }
}

watch: 监听数据的变化

watch: {
   testData (newValue, oldValue) {
      // newValue: 变化后
      // oldValue: 变化前
   }
}

props: 接收来自于父元素的数据

props: ['testData', 'num']

除此之外还有一些生命周期，例如created、mounted等等，后期会单独写一个篇章来详说哒。

                                                              觉得本文对你有帮助？请分享给更多人

                                                     关注「前端怪咖」，加入我们，一起提升前端技能