Vue
应用本质上就是一个实例对象挂载到一个网页中的标签上!
(1) 认识实例
通过Vue
创建的一个对象,对象中包含各种使用的数据和函数
<div id="app">
{{ message }} <!-- 展示变量中对应的数据 -->
</div>
{{ message }} <!-- 只能原样渲染字符串,不能读取变量数据了,超出绑定范围 -->
....
<script>
// 创建了一个对象
new Vue({
el: "#app", // 对象和标签/元素绑定
data: {
message: 'hello vue!' // 对象的数据,在绑定的标签内部使用
}
...
})
</script>
(2) 认识选项(了解)
一个实例对象中,通过各种选项指定/扩展了Vue
应用的功能,通常这些选项会包含如下部分:
el
描述:实例对象挂载标签的选项,本意节点、元素、标签的意思
语法:el: "#app"
注意:el
不要误写成e1 / eI
,本来是element
首字母
data
描述:实例对象中声明的初始数据,按照key:value
键值对的方式声明
语法:data: { key: value, key2:value2, .... }
注意:data
是数据的意思,不要误写成date(日期的意思)
watch
描述:实例对象中,用于声明监听器的选项;今天了解
computed
描述:实例对象中,用于声明计算属性的选项;今天了解
filters
描述:实例对象中,用于声明过滤器的选项;今天了解
methods
描述:实例对象中,用于声明函数的选项;今天了解
注意:一旦开始使用Vue
开发项目,用到的各种功能函数不能随便写了,必须写到实例的指定选项中
components
描述:实例对象中,用于声明组件的选项;今天了解
more...
描述:Vue2.x
的学习,更多的时候和实例中的选项息息相关;学习过程中需要重点关注如下几个方面
这是用来做什么的?
基本操作语法是什么样的?
使用的场景是什么?
使用有什么注意事项?