Mount & $el & Template 心得

2023-11-10 04:09:42

Vue.js 中的 mount、el 和 template 是三个非常重要的概念，它们共同作用，帮助我们创建和管理 Vue 实例，并将其渲染到 DOM 中。

$mount

$mount 是 Vue 实例的一个方法，用于将实例挂载到 DOM 元素。挂载后，Vue 实例将接管该 DOM 元素，并对其进行管理。

const app = new Vue({
  el: '#app'
})

app.$mount()

上面的代码创建一个新的 Vue 实例，并将其挂载到具有 id 为 "app" 的 DOM 元素。

$el

$el 是 Vue 实例的一个属性，它指向 Vue 实例挂载到的 DOM 元素。

const app = new Vue({
  el: '#app'
})

console.log(app.$el) // 输出: <div id="app"></div>

上面的代码获取 Vue 实例挂载到的 DOM 元素，并将其输出到控制台。

template

template 是 Vue 实例的一个选项，它用于指定 Vue 实例的模板。模板是一个字符串，它包含 Vue 实例的 HTML 代码。

const app = new Vue({
  template: '<div id="app">{{ message }}</div>',
  data() {
    return {
      message: 'Hello, world!'
    }
  }
})

app.$mount()

上面的代码创建一个新的 Vue 实例，并指定其模板为 "

". 然后，它使用 data() 方法创建实例的数据，并使用 $mount() 方法将实例挂载到 DOM 元素。

如何使用 $mount

$mount 方法可以接受两个参数：

elementOrSelector: 一个 DOM 元素或选择器，指定 Vue 实例要挂载到的 DOM 元素。
hydrating: 一个布尔值，指定 Vue 实例是否应该对已存在的 DOM 元素进行水化。

如果省略 elementOrSelector 参数，Vue 实例将被挂载到文档之外的一个元素，并且你必须使用原生 DOM API 将它插入到文档中。

const app = new Vue({
  template: '<div id="app">{{ message }}</div>',
  data() {
    return {
      message: 'Hello, world!'
    }
  }
})

app.$mount()

document.body.appendChild(app.$el)

上面的代码创建一个新的 Vue 实例，并指定其模板为 "

". 然后，它使用 data() 方法创建实例的数据，并使用 $mount() 方法将实例挂载到文档之外的一个元素。最后，它使用原生 DOM API 将 Vue 实例挂载到的 DOM 元素插入到文档中。

如何使用 $el

el 属性是一个只读属性，它指向 Vue 实例挂载到的 DOM 元素。我们可以使用 el 属性来访问和操作 Vue 实例挂载到的 DOM 元素。

const app = new Vue({
  el: '#app'
})

console.log(app.$el) // 输出: <div id="app"></div>

app.$el.style.color = 'red'

上面的代码创建一个新的 Vue 实例，并将其挂载到具有 id 为 "app" 的 DOM 元素。然后，它使用 el 属性获取 Vue 实例挂载到的 DOM 元素，并将其输出到控制台。最后，它使用 el 属性来设置 Vue 实例挂载到的 DOM 元素的样式。

如何使用 template

template 选项用于指定 Vue 实例的模板。模板是一个字符串，它包含 Vue 实例的 HTML 代码。

const app = new Vue({
  template: '<div id="app">{{ message }}</div>',
  data() {
    return {
      message: 'Hello, world!'
    }
  }
})

app.$mount()

上面的代码创建一个新的 Vue 实例，并指定其模板为 "

". 然后，它使用 data() 方法创建实例的数据，并使用 $mount() 方法将实例挂载到 DOM 元素。

模板中可以使用各种 Vue 指令，如 v-model、v-for、v-if 等。这些指令可以帮助我们更轻松地创建交互式和动态的 Web 应用程序。