vue2.0變化

vue2.0:

bower info vue
htt://vuejs.org/
           

到了2.0以後，有哪些變化?

1. 在每個元件模闆，不在支援片段代碼

   元件中模闆:
       之前:
           <template>
               <h3>我是元件</h3><strong>我是加粗标簽</strong>
           </template>
       現在:  必須有根元素，包裹住所有的代碼
           <template id="aaa">
                   <div>
                       <h3>我是元件</h3>
                       <strong>我是加粗标簽</strong>
                   </div>
           </template>
              

2. 關于元件定義

   Vue.extend  這種方式，在2.0裡面有，但是有一些改動，這種寫法，即使能用， 咱也不用——廢棄
   Vue.component(元件名稱,{    在2.0繼續能用
   data(){}
   methods:{}
       template:
   });
   
   2.0推出一個元件，簡潔定義方式：
   var Home={
       template:''     ->   Vue.extend()
   };
              

3. 生命周期

   之前:
       init
       created
       beforeCompile
       compiled
       ready       √   ->     mounted
       beforeDestroy
       destroyed
   現在:
       beforeCreate    元件執行個體剛剛被建立,屬性都沒有
       created 執行個體已經建立完成，屬性已經綁定
       beforeMount 模闆編譯之前
       mounted 模闆編譯之後，代替之前ready  *
       beforeUpdate    元件更新之前
       updated 元件更新完畢  *
       beforeDestroy   元件銷毀前
       destroyed   元件銷毀後
              

4. 循環

   2.0裡面預設就可以添加重複資料
   
   arr.forEach(function(item,index){
   
   });
   
   去掉了隐式一些變量
       $index	$key
   
   之前:
       v-for="(index,val) in array"
   現在:
       v-for="(val,index) in array"
              

5. track-by=”id”

   變成
   <li v-for="(val,index) in list" :key="index">
              

6. 自定義鍵盤指令

   之前：Vue.directive('on').keyCodes.f1=17;
   
   現在:  Vue.config.keyCodes.ctrl=17
              

7. 過濾器

   之前:
       系統就自帶很多過濾
       {{msg | currency}}
       {{msg | json}}
       ....
       limitBy
       filterBy
       .....
   一些簡單功能，自己通過js實作
   
   到了2.0， 内置過濾器，全部删除了
   
   
   lodash  工具庫 _.debounce(fn,200)
   
   
   自定義過濾器——還有
       但是,自定義過濾器傳參
   
       之前: {{msg | toDou '12' '5'}}
       現在:     {{msg | toDou('12','5')}}
              

8. 元件通信:

   vm.$emit()
   vm.$on();
   
   父元件和子元件:
   
   子元件想要拿到父元件資料:
       通過  props
   
   之前，子元件可以更改父元件資訊，可以是同步  sync
   現在，不允許直接給父級的資料，做指派操作
   
   問題，就想更改：
       a). 父元件每次傳一個對象給子元件, 對象之間引用  √
       b). 隻是不報錯, mounted中轉
   
   可以單一事件管理元件通信:   vuex
   var Event=new Vue();
   
   Event.$emit(事件名稱, 資料)
   
   Event.$on(事件名稱,function(data){
       //data
   }.bind(this));
              

9. debounce 廢棄

   ->   lodash
   _.debounce(fn,時間)
              

10. vue動畫

    transition 之前  屬性
    <p transition="fade"></p>
    
    .fade-transition{}
    .fade-enter{}
    .fade-leave{}
    
    
    到2.0以後 transition 元件
    
    <transition name="fade">
        運動東西(元素，屬性、路由....)
    </transition>
    
    class定義:
    .fade-enter{}   //初始狀态
    .fade-enter-active{}  //變化成什麼樣  ->  當元素出來(顯示)
    
    .fade-leave{}
    .fade-leave-active{} //變成成什麼樣   -> 當元素離開(消失)
    
    如何animate.css配合用？
        <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
                    <p v-show="show"></p>
                </transition>
    
    多個元素運動:
        <transition-group enter-active-class="" leave-active-class="">
            <p :key=""></p>
            <p :key=""></p>
        </transition-group>
               

11. vue2.0 路由:

    http://router.vuejs.org/zh-cn/index.html
    基本使用:
    1.  布局
        <router-link to="/home">首頁</router-link>
    
        <router-view></router-view>
    2. 路由具體寫法
        //元件
        var Home={
            template:'<h3>我是首頁</h3>'
        };
        var News={
            template:'<h3>我是新聞</h3>'
        };
    
        //配置路由
        const routes=[
            {path:'/home', componet:Home},
            {path:'/news', componet:News},
        ];
    
        //生成路由執行個體
        const router=new VueRouter({
            routes
        });
    
        //最後挂到vue上
        new Vue({
            router,
            el:'#box'
        });
    3. 重定向
        之前  router.rediect  廢棄了
        {path:'*', redirect:'/home'}
    
    4. 路由嵌套:
        /user/username
    
        const routes=[
            {path:'/home', component:Home},
            {
                path:'/user',
                component:User,
                children:[  //核心
                    {path:'username', component:UserDetail}
                ]
            },
            {path:'*', redirect:'/home'}  //404
        ];
               

12. 路由執行個體方法:

    router.push({path:'home'});  //直接添加一個路由,表現切換路由，本質往曆史記錄裡面添加一個
    router.replace({path:'news'}) //替換路由，不會往曆史記錄裡面添加
               

13. vue-cli

    npm install
    
    腳手架:  vue-loader
        1.0  ->
        new Vue({
          el: '#app',
          components:{App}
        })
        2.0->
        new Vue({
          el: '#app',
          render: h => h(App)
        })