1. 两个版本的区别

进行开发时，Vue有两个使用版本：完整版与非完整版。Vue3较Vue2有一些区别，但总体区别不大。

在Vue 3中，官方推荐的CDN引入方式如下：

<script src="https://unpkg.com/vue@next"></script>

国内用户可以用bootcdn来操作：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.cjs.min.js"></script>

但以上两种方式引入CDN引入的都是完整版。在官方文档中还有一种说法是runtime(运行时)版本，它的引入方式如下：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.0-beta.7/vue.runtime.global.min.js"></script>

runtime版本即我们所说的非完整版，完整版又被称为runtime + complier(即运行时+编译器)。官方文档截图如下：

一句话总结：runtime版本没有编译器(complier)，一旦runtime版本加了编译器之后就是完整版。

更详细的解说：

在runtime中，如果要在视图(view)中创建标签时，需要将标签写到render函数里，并用h来创建标签。例如：

Vue.createApp({
    render(){
        return Vue.h('div', {}, this.hi)
    }
})

如果是完整版，那么直接作为template选项的参数即可：

Vue.createApp({
    template : '<div>{{ hi }}</div>'
})

没有编译器的runtime版本可以节省40%左右的空间，并且默认使用runtime版本。

2. template和render的使用

Vue组件(即.vue文件)中传统三大部分：

template
script
style

三大组件中template是重要内容。示例：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

其作用，官网描述如下：

一个字符串模板，用作 component 实例的标记。模板将会替换所挂载元素的 innerHTML。挂载元素的任何现有标记都将被忽略，除非模板中存在通过插槽分发的内容。
如果字符串以 # 开始，则它将被用作 querySelector，并使用匹配元素的 innerHTML 作为模板字符串。这允许使用常见的 <script type="x-template"> 技巧来包含模板。

而render函数：

字符串模板之外的另一种选择，允许你充分利用 JavaScript 的编程功能。

官网示例如下：

<div id="app" class="demo">
  <my-title blog-title="A Perfect Vue"></my-title>
</div>

其对应的render函数：

const { createApp, h } = Vue
const app = createApp({})
app.component('my-title', {
  render() {
    return h(
      'h1',           // 标签名称
      this.blogTitle  // 标签内容
    )
  },
  props: {
    blogTitle: {
      type: String,
      required: true
    }
  }
})

app.mount('#app')

3. 使用codesandbox（简称csb）编程

第一步：

第二步：

第三步：

即可开始编码~~

如果要存储：

注意：不要登录！

Vue起步

1. 两个版本的区别

2. template和render的使用

3. 使用codesandbox（简称csb）编程