使用

Vue3入门使用免费看

本节我们学习Vue3的入门使用,包括创建Vue实例、数据与方法等。

2020-12-07侠课岛    基础入门       

前端/前端/Vue3入门基础 11     0     636

上一节我们已经创建好了一个简单的 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 实例,并将这个实例挂载到 idapp 的节点上,

const HelloVueApp = {
    data() {
      return {
        message: '你好,侠课岛!'
      }
    }
  }
Vue.createApp(HelloVueApp).mount('#hello-vue')

然后 HTML 中定义了 idappDOM 元素,修改后的 index.html 文件内容为:

<div id="hello-xkd">
    {{ message }}
</div>

刷新浏览器,可以看到页面如下内容:

可以看到 idapp 的节点内 {{ message }} 被替换成了 “你好,侠课岛!”。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

11

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引

本文标签


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?