html 转成vue_浅析Vue两种版本

1、Vue是什么

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2、引入Vue

直接用<script>引入

直接下载并用<script>标签引入，Vue会被注册为一个全局变量。

开发版本 ： 包含完整的警告和调试模式
生产版本 ：删除了警告，33.30KB min+gzip

在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

#CDN

完整版引入：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>

非完整版引入：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.runtime.min.js"></script>

命令行工具 (CLI)

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。更多详情可查阅

Vue CLI​cli.vuejs.org

3、两种Vue的区别

1、文件名：

完整版：vue.js

只包含运行时版:vue.runtime.js

• 完整版：同时包含编译器和运行时的版本。
• 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
• 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

2、文件大小：

运行时版本（没有compiler）相比完整版（有compiler）体积要小大约 30%，所以应该尽可能使用这个版本。

3、完整版vs只包含运行时版

• 完整版：视图写在 HTML里或者 template选项里。由于有 compiler(编译器)的存在，完整版运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。
• 只包含运行时版：视图写在render函数里面，用h函数来创建标签。由于没有 compiler(编译器)，需要使用vue-loader ，把vue文件里面的HTML转成h函数。

完整版（template渲染HTML）：

const vm=new Vue({
  el:'#app',
  data:{
    n:0
  },
  template:`
    <div>{{n}}
    <button @click='add'>+1</button>
    </div>
  `,
  methods:{
    add(){
      this.n+=1
    }
  }

只包含运行时版本（render渲染HTML）：

const vm=new Vue({
  el:'#app',
  data:{
    n:0
  },
  methods:{
    add(){
      this.n+=1
    }
  },
  render(h){
    return h('div',[this.n,h('button',{on:{click:this.add}},'+1')])
  }
})

两个版本的不同写法生成同一个效果：点击+1，左边的数字能够+1。

从代码逻辑来看第一种方式更适合新手，但是第二种版本因为体积小，更适合生产。

总结：

总是使用非完整版，配合vue-loader和vue文件

1、保证用户体验，用户下载的JS文件体积更小，但只支持h函数

2、保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数

template与render函数对比
template----html的方式做渲染
render----js的方式做渲染 render（提供）是一种编译方式
render里有一个函数h，这个h的作用是将单文件组件进行虚拟DOM的创建，然后再通过render进行解析。
h就是createElement()方法：createElement(标签名称,属性配置,children) template也是一种编译方式，但是template最终还是要通过render的方式再次进行编译。区别：

1. render渲染方式可以让我们将js发挥到极致，因为render的方式其实是通过createElement()进行虚拟DOM的创建。逻辑性比较强，适合复杂的组件封装。
2. template是类似于html一样的模板来进行组件的封装。
3. render的性能比template的性能好很多
4. render函数优先级大于template
5. 使用template理解起来相对容易，但灵活性不足；自定义render函数灵活性高，但对使用者要求较高。

codesandbox 写 Vue 代码

搜索codesandbox.io打开，选择用vue创建项目

右边的是实时预览非常方便

并且可以导出ZIP,方便下载到本地。

谢谢观看~，有错误请指出谢谢~~