页面css文件实例_Vue总结——Vue的实例，选项，钩子

const vm=new Vue(options)

尤雨溪把Vue的实例命名为vm

vm对象封装了对视图的所有操作，包括数据读写，事件绑定，DOM更新

vm的构造函数是Vue，按照es6的说法，vm所属的类是Vue

options是new Vue的参数，一般称之为选项或构造选项

接下来我们了解一下options

1、el-挂载点

与$mount可以替换

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

在实例挂载之后，元素可以用 vm.$el 访问。

2、date-内部数据

支持对象和函数，优先使用函数

如果data写在.vue文件中 那么data必须是个函数。

原因是：防止data被其他组件修改。使用函数的时候，每次调用的时候都会得到一个新的data对象，data的值不会被修改

3、method-方法

事件处理函数或者普通函数

每次渲染都会执行一次method，就算是毫无意义的渲染

4、component-使用vue组件，注意大小写

文件名一般全用小写，组件最好是大写

方式一：

创建组件：创建一个vue文件

引入组件

import Demo from './demo.vue'

使用组件

方式二：

实例和组件的区别：如果直接用new Vue就是实例，如果是创建一个vue文件或者vue.component就是组件

四个钩子：

1、created-实例出现在内存中

2、mounted-实例出现在页面中

mounted不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：

该钩子在服务器端渲染期间不被调用。

3、update-实例更新了

4、destroyed-实例消亡

props-外部属性

声明：

使用:

<Frank :message="n"/> 加了冒号 n就是js代码 可以是变量，方法等等
<Frank message="n"/> 不加冒号 n就是一个字符串
<Frank :message=" ' 0' "/> 等价于 <Frank message=" 0 "/>

绑定函数

props 的 message 也会实时变化