Vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Get Started

1、直接使用script标签引入

  1. <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  2. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  4. <!-- 生产环境版本，优化了尺寸和速度 -->
  5. <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  7. //链接取自Vue.js官网

2、NPM

  1. //使用NPM安装Vue
  2. $ npm install vue

3、使用Vue官方工具CLI

  1. //安装Vue-CLI
  2. npm install -g @vue/cli
  3. # OR
  4. yarn global add @vue/cli
  6. //创建一个项目
  7. vue create hello-world

还可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展。具体信息可查看Vue官网。

Vue的两个版本

在Vue官方文档安装中对不同构建版本的解释中，详细地描述了Vue地两种版本。

Vue分为两个版本，分别是完整版(Vue.js)和只包含运行时版(Vue.runtime.js)。还有生产环境版本后缀为.min.js。

两者的区别：

Vue.js视图可以写在HTML标签或templa标签中

  1. // 需要编译器compiler
  2. new Vue({
  3.   template: '<div>{{ hi }}</div>'
  4. })

Vue.runtime.js的只能写在render函数里用h创建

  1. // 不需要编译器
  2. new Vue({
  3.   render (h) {
  4.     return h('div', this.hi)
  5.   }
  6. })

简单来说，Vue.runtime.js能做的Vue.js都能做，Vue.js能做的Vue.runtime.js不一定能做。

Vue.runtime.js的体积相较于Vue.js小了30%。在实际使用时，为保证用户体验一般都选用Vue.runtime.js。但在实际开发过程中也可以使用Vue.js，可以通过编译器将其重新编译为Vue.runtime.js，保证了开发体验。

template和render

vue中一般 使用template来创建HTML,有时也会使用JavaScript来创建HTML，这时就需要render函数
render函数中有一个参数叫h也就是creatElement,render函数将createElement的返回值放到HTML中
createElement有3个参数：
第一个参数（必写参数，类型是字符串，对象，函数）主要用于提供DOM的html内容
第二个参数（可选，类型是对象）主要用于设置这个DOM的一些样式。属性，传的组件的参数，绑定事件之类的
第三个参数（可选，类型是数组）主要是指改节点下还有其他节点

template和render函数的区别：
1）template适合简单的组件封装，render函数适合复杂的组件封装
2）template理解起来相对简单，但灵活性不高，性能低，而render灵活性较高，对使用者要求亦高
3）render函数渲染没有编译过程，相当于把代码直接给程序，所以容易出现错误，对使用者要求高
4）render函数较template优先级别高