關於Vue2.0那些事_1

Vue2.0針對Vue1.0做出了部分改進,在官網上對於項目的遷移也做了較大的支持。
Vue2.0 文檔:https://vuefe.cn/guide/
Vue1.x的遷移方法等:https://vuefe.cn/guide/migration.html

在遷移的方法中介紹了對於1.0版本的改進。可以詳細的閱讀。本文主要針對你vue-cli腳手架工具編譯後的記錄與探究。

使用Vue腳手架進行項目的搭建大家可以參考:https://github.com/vuejs/vue-cli 。在安裝是目前會自動安裝2.0版本的Vue,如需安裝1.0版本的可以更改package.json中的dependencies的設置。此時只需將大版本好改爲1即可,即可安裝1.x.x的最新版

  "dependencies":{
      "vue": "^1.0.1"
     },

在2.0版本中index.html中區別於1.0中的版本如下

<div id="app"></div> //2.0
<app></app> //1.0

相應的main.js中的文件如下

        import App from './App' 
        new Vue({   //2.0
           el: '#app',
           template: '<App/>',
           components: { App }
        })

       new Vue({  //1.0
           el: 'body',
           components: { App }
        })

當我們將2.0中代碼轉化成1.0中的代碼的時候出現如下 禁止代碼的在html與body上掛載。
這裏寫圖片描述

我們將app外圍包裹一層div時候在掛載在即可正常的展示

    <div id="app"><app></app></div>

其實在2.0中建議將片斷的實例進行包裹。這裏設置template將直接覆蓋之前的index中div標籤。等價於局部註冊的使用只在父模板中使用

 var App = {
      template: '<div>....</div>'
         }
  new Vue({
      // ...
      components: {
        'App': App
      }
  })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章