VUE起手式-如何开始写代码

vue有两个版本，这两个版本；分别是Vue完整版（vue.js）和Vue非完整版（vue.runtime.js）

Vue.js(完整版)

引入以vue.js结尾的文件名，有compiler编译器

优点：编译器将占位符{ {}}或者条件语句变成真实的DOM节点，可以从HTML得到视图，

缺点：编译器体积大,占文件的30%

new Vue({
    
    
  template: '<div>{
    
    { hi }}</div>'
})

Vue.runtime.js

引入以vue.runtime.js结尾的文件名,没有编译器

优点：没有compiler的，所以体积小

缺点：没有compiler,不能将HTML变成节点，需要用JS构建视图

new Vue({
    
    
  render (h) {
    
    
    return h('div', this.hi)
  }
})

template

完整版VUE一般使用template来创建HTML,template是一个替换挂载的元素模板，使用html的方式做渲染

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

render

Vue中的Render函数中有一个参数，这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中

render----js的方式做渲染

new Vue({
    
    
  el:'#app',
  render(h){
    
    
    return h('div',[this.n,h('button',{
    
    on:{
    
    click:this.add}},'+1')])
  }
})

使用codesandbox.io写vue

code模拟器-在线代码编辑器

不登陆能写好多项目，登录能写好多

点击vue图标就可以开始写了，写好之后就能导出vue将写好的代码下载

								学习的时光总是短暂，又到了时候说拜拜
									欢迎关注公众号  oldCode
										获取新鲜教程资料