Vue 两个版本的区别

完整版：
对应的文件名：vue.js ，vue.min.js
支持从html获取视图
支持template
有compiler编译器

非完整版：
对应的文件名：vue.runtime.js ，vue.runtime.min.js
不支持从html获取视图
不支持template，需要通过vue-loader 将组件中的template模板编译为render函数
没有compiler编译器,体积会比完整版小30%

template的用法

第一种方式：

new Vue({
  el: "#app",
  template: `
    <div>
      <div>文本1</div>
      <div>文本2</div>
      <div>文本3</div>
    </div>
  `
})

需注意的是，template中至少要有一个根元素，不能是纯文本，否则会报错

new Vue({
    el: "#app",
    template: '文本'
})

如果存在多个同级元素，没有根元素时，只会显示第一个元素

new Vue({
    el: "#app",
    template: `
    <div>文本1</div>
    <div>文本2</div>
    <div>文本3</div>
    `
})

第二种方式：

<template id="demo1">
    <h2>标签模版2</h2>
</template>

new Vue({
    el: "#app",
    template: '#demo1'
})

第三种方式：

<script type="x-template" id="demo2">
    <h2 style="color:red">标签模板3</h2>
</script>

new Vue({
  el: "#app",
  template: '#demo2'
})

render的用法

new Vue({
  el: "#app",
  render: function (h) {
    return h(
      'div',
      {
        class: { 'style1': true, 'style2': true },
        style: { color: '#fff', background: 'red' },
        on: {
          click: function () {
            console.log('render函数')
          }
        }
      },
      ['元素文本', h('div', '子元素文本')]
    )
  }
})

render函数有一个回调函数
该函数有3个参数
第一个参数：可以是一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数，必填，类型：{String | Object | Function}
第二个参数：包含模板相关属性，用于设置模板元素的属性或者事件，可选，类型：{Object}
第三个参数：设置模板元素文本，或者创建子节点 类型：{String | Array}

用 codesandbox.io 写 Vue 代码

点击Create a Sandbox, it’s free按钮

选择vue即可