前言
接着上一篇讲到了如何搭建一个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等等,后期会单独写一个篇章来详说哒。
觉得本文对你有帮助?请分享给更多人
关注「前端怪咖」,加入我们,一起提升前端技能