vue click事件传参数_浅析Vue完整版和非完整版

对不同版本的解释

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

这里列出了它们之间的差别：

两个版本对应的文件名

• 非完整版 ：vue.runtime.js
• 完整版：vue.js

可以通过BootCDN引入

Bootstrap 中文网开源项目免费 CDN 加速服务​www.bootcdn.cn

版本区别

最佳实践:总是使用非完整版，然后配合vue-loader和vue文件

• 非完整版：没有compiler,不能将HTML变成节点。webpack通过vue-loader(在yarn bulid里设置)将html变成('div',this.n）
• 完整版：可以从HTML或template直接得到试图，有compiler编译器可以将含有占位符{{}}或者条件语句变成真实的DOM节点，代码体积占30%.

思路:
1.保证用户体验，用户下载的JS文件体积更小，但只支持h函数
2.保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
3.复杂的让loader做，vue-loader 把vue文件里的HTML转为h函数

template 和 render的使用

• vue完整版 template的使用方法

直接写在html上或者JS上

<template>
  <div id="app">
        {{n}}
          <button @click="add">+1</button>
  </div>
</template>

• Vue非完整版 render的使用方法

rener函数接收一个参数h,这个参数是vue传的，用这个参数去创建实例

render(h){
return h('div',[this.n,h('{on:{click:this.add}','+1'}]
}

如何用codesandbox写Vue代码

用codesandbox来创建一个Vue项目

Online IDE for Rapid Web Development​codesandbox.io

1.点击 create sandbox

2.选择 Vue

3.创建Vue后，就会自动帮你生成所需要的文件了