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
									獲取新鮮教程資料