Vue配置对象：
| data | Vue实例数据对象 |
|---|---|
| methods | 定义Vue实例中的方法 |
| components | 定义子组件 |
| computed | 计算属性 |
| filters | 过滤器 |
el：唯一根元素，通过class，id将网页结构与Vue实例绑定
经典案例：
关键代码：
<div id="app">{{name}}</div>
<script>
var vm = new Vue({
el: '#app', // 通过el与div元素绑定
data: {name: 'Vue实例创建成功！'}
})
<script>
小知识点：如果想在控制台拿到Vue实例中的data数据，可以通过
console.log(vm.$data.name)
methods与data
这两个配置对象属性较为简单可用一个案例展示：
案例展示：
代码部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 为button按钮绑定click事件 -->
<button @click="showInfo">请单击</button>
<p>{{msg}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
// 定义事件处理方法showInfo
showInfo () {
this.msg = '触发单击事件'
}
}
})
</script>
</body>
</html>
代码解析
配置对象data——msg代表的Vue实例中的数据对象
配置对象methods中定义了Vue实例中的方法
conputed属性：对于需要计算后才能得到的属性需要用该配置对象
小案例对应的关键代码：
<div id="app">
<p>总价格：{{totalPrice}}</p><p>单价：{{price}}</p>
<p>数量：{{num}}</p>
<div>
<button @click="num == 1 ? 0 : num--">减少数量</button>
<button @click="num++">增加数量</button>
</div>
</div>
var vm = new Vue({
el: '#app',
data: {price: 20, num: 0},
computed: {
// 总价格totalPrice
totalPrice () {return this.price * this.num}
}
})
代码分析：
对于其中的totalPrace就表示需要计算才能得到的属性，，所以其具体计算过程需要在内置对象computed中定义说明
filter——过滤器：在页面中直接对数据进行操作（格式化等）
filter经典案例——小写字母转为大写字母
关键代码：
<div id="app">
<div>{{message | toUpcase}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'helloworld'
},
filters: {
// 将 helloworld 转换为 HELLOWORLD
toUpcase (value) {
return value ? value.toUpperCase() : ''
}
}
})
关键代码分析：
在该案例中，toUpcase便是数据对象message的过滤器即message需要通过过滤器的处理之后才能在页面中显示。而具体处理过程就是将message中的所有小写字母变为大写字母。
![[转载]黄泉嫁衣](/images/no-images.jpg)
