Vue 实例和选项

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的学习，更多的时候和实例中的选项息息相关；学习过程中需要重点关注如下几个方面

这是用来做什么的？

基本操作语法是什么样的？

使用的场景是什么？

使用有什么注意事项？