上一节我们已经创建好了一个简单的 Vue
项目,并通过 npm run dev
命令来启动这个项目。本节我们来学习如何创建 Vue
的实例,渲染数据到浏览器等。
创建Vue实例
在 Vue2
中我们是通过 Vue
函数来创建 Vue
实例的,例如:
var vm = new Vue({
// 选项
})
而在 Vue3
中,我们可以通过 createApp()
函数来创建实例,如下所示:
Vue.createApp(/* 选项 */)
创建 Vue
实例后,我们可以挂载它,将容器传递给 mount
方法。例如如果我们想在 <div id="app"></div>
上装载 Vue
应用程序,则应传递 #app
:
Vue.createApp(/* 选项 */).mount('#app')
尽管不严格与 MVVM
模式相关联,但 Vue
的设计也受到了它的启发。因此在文档中经常会使用 vm
(ViewModel 的缩写) 这个变量名表示 Vue
实例。
Vue
应用程序由使用 CreateAppe
创建的根 Vue
实例组成,可以选择地组织成嵌套的、可重用组件的树。例如,todo
应用的组件树可能如下所示:
根实例
└─ TodoList
├─ TodoItem
│ ├─ DeleteTodoButton
│ └─ EditTodoButton
└─ TodoListFooter
├─ ClearTodosButton
└─ TodoListStatistics
数据与方法
当一个 Vue
实例被创建时,它将在其数据中找到的所有属性添加到 Vue
的反应性系统中。当这些属性的值发生变化时,视图将“响应”,更新以匹配新值。
示例:
const data = { a: 1 }
const vm = Vue.createApp({
data() {
return data
}
}).mount('#app')
console.log(vm.a === data.a) // 输出: true
vm.a = 2
console.log(data.a) // 输出:2
当此数据更改时,视图将重新渲染。应该注意的是,数据中的属性只有在创建实例时存在时才是反应性的。这意味着如果添加新属性,例如:
vm.b = 'hi'
那么对 b
的更改将不会触发任何视图更新。如果您知道以后需要一个属性,但它开始时为空或不存在,则需要设置一些初始值。例如:
data() {
return {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
}
唯一的例外是 Object.freeze()
,它阻止了现有性质的改变,这也意味着反应性系统无法跟踪变化。
const obj = {
name: 'xkd'
}
Object.freeze(obj)
const vm = Vue.createApp({
data() {
return obj
}
}).mount('#app')
<div id="app">
<p>{{ name }}</p>
<button v-on:click="name = 'xkd'">改变它</button>
</div>
除了数据属性之外,Vue
实例还公开了许多有用的实例属性和方法。它们以 $
作为前缀,以区别于用户定义的属性。
示例:
例如下面这个例子:
const vm = Vue.createApp({
data() {
return {
a: 1
}
}
}).mount('#app')
console.log(vm.$data.a) // 输出: 1
实例
上一节我们已经出创建好了一个 my_vue
的项目,并且通过命令启动了这个项目。假设现在我们需要浏览器显示内容 “你好,侠课岛!”,需要怎么做呢?
首先我们先通过 createApp()
函数在 main.js
中创建一个 Vue
实例,并将这个实例挂载到 id
为 app
的节点上,
const HelloVueApp = {
data() {
return {
message: '你好,侠课岛!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
然后 HTML
中定义了 id
为 app
的 DOM
元素,修改后的 index.html
文件内容为:
<div id="hello-xkd">
{{ message }}
</div>
刷新浏览器,可以看到页面如下内容:
可以看到 id
为 app
的节点内 {{ message }}
被替换成了 “你好,侠课岛!”。