山地人

Hello 模板渲染

山地人
山地人
2021-05-13

我们用最简单的方式,开启Vue3.0的学习旅程。

Vue支持模板方式(template)来渲染页面。

过程分析

  1. 在HTML文件中引入<script src="https://unpkg.com/vue@next"></script>,这是vue3.0的js库文件。
  2. 接着添加一个<div id="root"></div>节点,后面创建的Vue示例会挂载到这个节点。
  3. main.js文件中使用Vue.createApp创建Vue的实例
  4. 调动这个实例mount方法,告诉它我们要渲染这个实例到id为root的节点上。

createApp

这个函数中传入了一个template,这个template最终会被Vue实例拿来渲染成最终的DOM元素,最后在mount函数中被添加到id为root的节点上。

另一种写法

当然,Vue也允许我们把template模板直接放在标签中,上面的例子我们也可以这样来写。

变动的代码

  • template: '<div>Hello Vue 3.0</div>'中的内容移动到<div id="root">...</div>中。
  • createApp({})函数中的内容没有要配置的内容,我们可以配置一个空对象{}

原生JavaScript写法

下面的写法,我们不借助任何JavaScript框架,使用原生JavaScript来实现类似的功能。

练一练

在底下的沙盒里使用Vue输出Hello World