【目录】
一、如何搭建一个Vue项目
二、Vue两个版本的区别
三、template 和 render 怎么用
四、template与render函数对比
五、如何用 codesandbox.io 写 Vue 代码
【正文】
一、如何搭建一个Vue项目
工具 : Vue CLI （链接：https://cli.vuejs.org/zh/
）
按照文档要求进行Vue环境搭建
二、Vue两个版本的区别
(最佳实践 : 使用非完整版，然后配合vue-loader和vue文件)
三、template 和 render 怎么用
1、template
类型 : string
详细
-
一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
-
如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template"> 包含模板。
（注:如果 Vue 选项中包含渲染函数，该模板将被忽略。）
//完整版可使用,需要编译器
new Vue({
template:'<div>{{ hi}}</div>'
)
2、render
类型 : (createElement: () => VNode) => VNode
详细
-
字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
-
如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
（注:Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。）
【补充】
Vue中的render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。render函数将createElement的返回值放到了HTML中
createElement这个函数中有3个参数
-
第一个参数（必要参数）：主要用于提供DOM的html内容，类型可以是字符串、对象或函数
-
第二个参数（类型是对象，可选）：用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类
-
第三个参数（类型是数组，数组元素类型是VNode，可选）：主要是指该结点下还有其他结点，用于设置分发的内容，包括新增的其他组件。注意，组件树中的所有VNode必须是唯一的
//不需要编译器
new Vue({
render (h) {
return h ('div',this.hi)
}
})
四、template与render函数对比
1、相同之处：
render 函数 跟 template 一样都是创建 html 模板
2、不同之处：
-
Template适合逻辑简单，render适合复杂逻辑。
-
使用者template理解起来相对容易，但灵活性不足；自定义render函数灵活性高，但对使用者要求较高。
-
render的性能较高，template性能较低。
-
基于上一点，我们通过vue组件渲染流程图知道，使用render函数渲染没有编译过程，相当于使用者直接将代码给程序。所以，使用它对使用者要求高，且易出现错误
-
render 函数的优先级要比template的级别要高，但是要注意的是Mustache(双花括号)语法就不能再次使用
参考链接
https://cn.vuejs.org/v2/api/
https://www.cnblogs.com/liqiang666/p/12175465.html
五、如何用 codesandbox.io 写 Vue 代码
步骤
1、进入codesandbox.io网站 : https://codesandbox.io/s/
2、选择vue图标
3、进入vue编辑页面，就可以写代码了
网友评论