Vue 实例

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

我们可以先去创建一个 Vue 的实例, vm 表示的是 ViewModel,视图模型,一般会用这个名字来表示 Vue 的实例 ... 在创建实例的时候通常我们会给它提供一些选项 ...

比如数据,模板,挂载的元素,提供的方法,生命周期的接口等等 ... 具体的可以使用的选项,可以参考 Vue 的 API ..

在边栏上你会看到一些 Options 开头的项目,这些就是 Vue 实例的一些选项 .. 比如这个 data 选项,就是提供给实例的一些数据 ..

el 选项可以指定 Vue 实例挂载到的页面上的那个元素 ...

Lifecycle Hooks ,是一些跟实例的生命周期相关的钩子,或者叫接口 ... 比如这个 beforeCreate,会在创建实例之前被调用 ...

在这个 html 文档里面,添加一个 div 元素,上面加上一个 id,名字是 app .. 我们可以把这个元素交给 Vue 实例,这样就可以把实例挂载到这个元素的上面 ...

这样在它的里面,我们就可以使用 Vue 提供的一些功能了 .. 比如我们用一个模板 ... 两组大括号 .. 在它里面做点算术 ... 1 + 1 ...

现在页面上显示的就是我们在这里输入的东西 ... 并没有特别的意思... 我们要把实例挂载到页面上的某个元素上 ... 手工操作的话,可以使用 vm 的 $mount 这个方法 ... 把表示元素的 css 选择器交给这个方法 ...

vm.$mount('#app')

你会发现,页面上现在显示的就是计算之后的结果 ... 说明 Vue 已经起作用了 ..

或者我们也可以在创建这个 Vue 实例里面. 给它提供一个选项 ... 放到一个对象里 .. 在里面添加一个 el 选项 ... 它的值可以是一个 css 选择器 .. #app ,意思就是带 app 这个 id 的元素 ... 这样做跟手工使用 $mount 方法指定元素的效果是一样的 ...

这个挂载的元素可以在实例的 $el 这个属性里得到 ... Vue 实例里面提供了一些属性还有方法,一般它们的名字都会用这个 $ 符号或者使用下划线开头 ...

Vue 实例《 Vue.js 前端框架 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点