挂载 Vue 实例的多种方式

浏览 9

课文

在这一节中,我们来了解挂载 Vue.js 实例的不同方法。 Vue 提供了很多种语法来*安装*一个 Vue 实例。它们的语法可能不同,但执行的所有操作是相同的。在本课中,将学习两种最常见的 Vue 实例挂载方式: 1. el: '#app' 作为 Vue 实例中的配置属性 2. 调用 Vue 实例的 $mount('#app') 方法 # 使用 el 配置属性挂载 Vue 实例 ```html <div id='app'></div> <script> new Vue({ el: '#app',// 将 Vue 实例挂载到 id 为 app 的元素上,就是上面的那个 div // ... }) </script> ``` # 使用 $mount 方法挂载 Vue 实例 ```html <div id='app'></div> <script> new Vue({ // ... }).$mount('#app') </script> ``` # 两者的差异 如果 Vue 提供的两种方法挂载实例的结果将完全相同。那么我们不禁要问:*为什么会这么设计?* 第二种方法 $mount 允许我们将实例的安装*推迟*到特定事件发生后或我们需要它的时候。 例如,当网页中特定的元素渲染完成或异步任务执行完成时,可以使用 mount 方法将 Vue 实例延迟挂载。 由于 Vue 是渐进式框架,所以它必须使其具有高度*适应性*和*模块化的特性*。 下面我们来看一下,如何使用 $mount 方法延迟挂载 Vue 实例。 我们通过使用 setTimeout 函数来模拟事件。假设事件在两秒后发生,那么 Vue 实例会在它完成后再进行挂载。 ```html <!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app"> <h3>2秒后我将会被 Vue 实例的模板内容所替换。</h3> </div> <script> // vue 实例并没有被立即挂载 const myVueInstance = new Vue({ template: '<div>我会在2秒后显示到页面上。</div>', }); // 这里发生了一些异步任务,我们需要在异步任务之后再挂载 Vue 实例 setTimeout(() => { myVueInstance.$mount('#app'); // 挂载 Vue 实例 },2000) </script> </body> </html> ``` 在上面的例子中,myVueInstance 中的 template 属性会替换 id 为 app 的元素的内容。setTimeout(function, time) 函数接受一个函数和一个数字类型的时间作为参数,单位是毫秒,之后它将在时间到达后执行第一个函数参数。 可以看到,$mount 函数可以在任何时刻挂载 Vue 实例。但是,使用 el 属性会立即挂载 Vue 实例!

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1