Vue 两个版本的区别和使用方法

125 阅读1分钟

1、Vue 两个版本的区别和使用方法

image.png

完整版:体积大,对用户不友好。

非完整版:体积小,对开发者不友好,代码书写困难

解决措施:采用非完整版进行开发,使用配合vue-loader和vue文件,vue-loader自动把vue文件里的HTML转化为h函数

引用版本时需要注意不要引入错误,否则会出现无法编译html文件的情况

2、template 和 render 怎么用

Vue完整版 template:直接在html文件或者js文件引入如下代码

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

vue非完整版 render的使用方法:

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

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

3、如何用 codesandbox.io 写 Vue 代码:

1、进入codesandbox.io(建议不要登录,否者只能创建50个项目)

2、选择Vue项目

image.png

3、等待数秒可以看到项目初始化完成

image.png

4、点击左上角可以选择导出成ZIP格式的文件,并下载到本地

image.png