Vue起手

Vue两个版本的区别：

• 完整版：vue.js | vue.min.js(压缩版) 从HTML中得到视图
• 非完整版：vue.runtime.js| vue.runtime.min.js(压缩版) 不支持从HTML中获取视图，必须把要渲染的视图代码写到render方法里面

完整版支持用法

new Vue({
  el: "#app",
  template: `
  <div>{{n}}</div>
  `,
  data: {
    n: 0
  }
})

非完整版支持用法：

new Vue({
  data: {
    n: 0
  },
  render(h) {
    return h('div', this.n)
  }
})

因为非完整版没有编译器无法编译template中html的字符串，必须把HTML视图写到render里面，
如果Vue选项中同时存在render和template，只从render中渲染视图。

//template的参数
 template: `
 //这里写关于视图一些XML代码 
  `,
//render的参数
render: (h) {
    // h函数返回结果是VNode
    return h(
        tag, // 标签名称
        data, // 传递数据
        children // 子节点数组
    )
}

codesandbox.io简单教程

1. 先打开codesandbox.io网址，无需登录，登录之后创建项目个数有限

1. 点击右上角 Create Sandbox，
2. 选择Vue，等待创建项目成功，

1. 项目创建成功后，左上角可导出生成本地项目文件夹