当前位置: 首页 > Web前端 > vue.js

HatsunVue

时间:2023-03-31 15:39:33 vue.js

Vue的两个版本Vue有两个主要版本,完整版和非完整版。完整版为vue.js/vue.min.js非完整版为vue.runtime.js/vue.runtime.min.jsvue.js多了一些注释,min.js去掉了注释压缩了代码)完整版完整版还包括编译器(compiler)和运行时(runtime)。渲染函数(renderfunction)的代码在运行时的作用包括创建Vue实例、渲染和处理虚拟DOM等,它包括除编译器以外的所有功能。仅包含运行时版本。Vue两个版本的区别完整版的Vue运行时版的Vue有编译器,没有编译器视图。用HTML写,或者写在template选项里,写在render函数里。使用h创建标签cdn导入vue.jsvue.runtime.jswebpack导入需要配置alias默认使用vue@cli。默认情况下,导入需要额外配置才能使用。你应该使用哪个版本?最佳实践:始终使用不完整的版本,然后配合vue-loader和vue文件。对于用户来说,不完整版下载的JS文件体积小,用户体验好,但是只支持h函数保证开发体验,而且只能写h函数,开发体验不好。如果有编译器,开发者可以在vue文件中编写更直观的html标签和模板,所以我们需要一个compilervue-loader来导入编译器,将vue文件中的html标签和模板结合起来。template在构建时会被预编译成h函数,让用户和开发者对template和render的使用感到满意//requirescompilernewVue({template:'

{{hi}}
'})//不需要编译器newVue({render(h){returnh('div',this.hi)}})JS中的模板标签和模板//vue文件中的模板标签//js中的模板模板:`{{n}}+1
`renderfunction://不完整版本在js中构建视图render(h){returnh('div',[this.n,h('{on:{click:this.add}','+1'])}//不完整版本使用vue-loader//先创建一个demo.vue文件,并在里面建一个viewimportdemofrom"./demo.vue"newVue({el:"#app",render(h){returnh(demo)}})codesandbox在线创建Vue项目进入官网https://codesandbox.io/点击“CreateaSandbox,it'sfree”选择“Vue”可以将项目下载到本地,选择左上角的文件-然后ExporttoZIP登录codesandbox.io后只能创建50个项目,不登录可以创建无限个项目。我们可以在codesandbox中在线编写Vue代码,不需要任何本地安装的依赖