Vue初体验

129 阅读1分钟

1、vue有完整版和非完整版两个版本

vue.js和vue.runtime.js,主要区别看下图

vue版本.png 完整版有编译器,可以直接通过HTML或者template得到视图;
非完整版没有编译器,但是代码体积更小,通过webpackvue-loader来进行编译。
最好使用非完整版的,并配合vue-loadervue文件
思路:

  • 保证用户体验,用户下载的JS 件体积更小,但只支持h函数
  • 保证开发体验,开发者可直接在vue文件里写HTML标签,而不写h函数
  • vue-loadervue文件里的HTML转化为h函数

2、template 和 render 怎么用

Template可以直接写在htmljs上,如:

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

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

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

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

点击- 进入官网 codesandbox.io/ 点击 vue的图标之后可以进行代码编辑 可以选择export to ZIP来导出项目。