Vue

两个版本对应的文件名

如何使用 template 与 render

如何使用 codesandbox.co 写 Vue 代码

两个版本对应的文件名

Vue完整版

vue.js

Vue非完整版

vue.runtime.js

两者都由 cdn 引入，生成环境后缀为 .min.js

如何使用 template 与 render

当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树

new Vue({
  el: '.vapp-1',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  },
  template: '<div>这是template属性模板渲染。</div>',
  render: function(h){
    return h('div', {}, '这是render属性方式渲染。')
  }
})

new Vue({
  el: '.vapp-2',
  data: {
    info: '这是通过el属性获取挂载元素的outerHTML方式渲染。'
  },
  template: '<div>这是template属性模板渲染。</div>'
})

如何使用 codesandbox.co 写 Vue 代码

• 搜索框内输入 codesandbox.co ，来到代码沙盒网站

• 点击右上角的 Create Sandbox 按钮后会弹出一个默认的 Official Templates界面

• 点击 Vue(by CodeSandBox Team) 按钮即可开始编辑代码