浅谈VUE
1-Vue 两个版本的区别和使用方法?
|
Vue完整版
|
Vue非完整版
|
原因
|
特点
|
有complier
|
没有complier
|
complier(编译器)占了40%的体积
|
视图
|
卸载HTML里或者写在template选项里
|
写在render函数里用h来创建标签
|
h是Vue内置好传给render的 |
cdn引入 | vue.js |
vue.runtime.js
|
文件名不同,生产环境使用的后缀为.min.js(压缩版)
|
webpack引入 |
需要额外配置alias
|
默认使用此版
|
vue内置的 |
@vue/cli引入
|
需要额外配置
|
默认使用此版
|
vue内置的 |
推荐:使用非完整版,然后配合vue-loader和vue文件
原因:
1、保证用户体验,用户下载的JS文件体积更小,但只支持h函数
2、保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数
3、vue-loader把vue文件里的HTML转为h函数
2-template和render怎么用?
template :HTML的方式渲染
render :js的方式渲染
render(提供) 是一种编译方式
render里有一个函数h,这个h的作用是将单文件组件进行虚拟DOM的创建,然后通过render进行解析。
h:就是 createElement()方法,createElement(标签名称,属性配置,children)
template 也是一种编译方式,但是template最终还是要通过render的方式再次进行编译。
区别:
render渲染方式可以让我们将js发挥到极致,因为render的方式其实是通过createElement()进行虚拟DOM的创建。逻辑性比较强,适合复杂的组件封装。
template 是类似于html一样的模板来进行组件的封装
render 的性能比template 的性能好很多
render 函数优先级大于template
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <h-title level="1">标题</h-title> <h-title level="2">标题</h-title> <h-title level="3">标题</h-title> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> Vue.component("h-title",{ /* template渲染 */ // template:` // <div> // <h1 v-if="level==1"><slot></slot></h1> // <h2 v-else-if="level==2"><slot></slot></h2> // <h3 v-else-if="level==3"><slot></slot></h3> // </div> // `, /* render渲染 */ render:function(h){ // createElement(标签名称,属性配置,children) return h("h"+this.level, { attrs:{ "data-id":10 } }, // 相当于<slot></slot>标签接收 this.$slots.default ) }, props:{ level:{ type:String } } }); let vm=new Vue({ el:"#app" }); </script> </body> </html>
3-如何用 codesandbox.io 写 Vue 代码?
建一个vue沙箱
标签对应