什么事Vue.js

• Vue.js事目前最火的一個(gè)前端框架，React是流行的一個(gè)框架（React除了開發(fā)網(wǎng)站還可以開發(fā)手機(jī)App，Vue語法也可以用于手機(jī)App開發(fā)的，需要借助于Wee ek）。
• Vue.js是前端的**主流框架之一，和Angular.js 一起拍埠，并成為前端三大主流框架失驶！

mvc

mvc

MVVM

MVVM是前端視圖的分層開發(fā)思想把頁面分成了下面三塊

• M :每個(gè)頁面單獨(dú)的數(shù)據(jù)
• V：每個(gè)頁面的html 結(jié)構(gòu)

• VM ：分割了m和v
  ：MVVM思想的核心，應(yīng)為vm事M和V之間的調(diào)度者

  
  
  3E002E13-08D9-4CFB-B06C-AB41B853AECB.png

Vue使用

https://cn.vuejs.org/v2/guide/

• 導(dǎo)入
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

• 申明和渲染

      <div id="app">
          {{ message }}
      </div>
  
        <script>
    // vue 的創(chuàng)建方式
    // 當(dāng)我們導(dǎo)入包后枣购，在瀏覽器的內(nèi)存中就多了一個(gè)Vue構(gòu)造函數(shù)
    new Vue({ //這個(gè)實(shí)力對(duì)象在mvvm 中是VM
        el:'#app', //表示我們 這個(gè)Vue控制上面的區(qū)域
        data:{ //data 屬性不能放的是el 中要用到的數(shù)據(jù)嬉探，可以看場(chǎng)是mvv 中的 m
            message:'hello Vue.js!' //通過Vue提供的指令，很方便的就能把數(shù)據(jù)渲染到也買呢上棉圈，程序員不在
            //手動(dòng)操作dom元素了 【前端的Vue之類的狂涩堤，不提倡我們?nèi)ゲ僮鱀om】
  
  
        }
  
    });
  
  </script>
  

• v-text （輸出文本格式）
  會(huì)覆蓋元素中原本的內(nèi)通，但是插值表達(dá)式只會(huì)替換自己的占位字符串
  v-text 和{{msg}}方法一樣分瘾。只是這歌在加載過程中不會(huì)顯示顯示{{}};

    <span v-text="msg"></span>
    <!-- 和下面的一樣 -->
    <span>{{msg}}</span>
  

• v-html (輸出html格式)
  輸出html 格式的文本時(shí)胎围，可以將文本轉(zhuǎn)換成html

v-vind:綁定 https://cn.vuejs.org/v2/api/#v-bind

• 動(dòng)態(tài)地綁定一個(gè)或多個(gè)特性，或一個(gè)組件 prop 到表達(dá)式德召。

<img v-bind:src="imageSrc">

<button v-bind:[key]="value"></button>

<img :src="imageSrc">

<button :[key]="value"></button>

<img :src="'/path/to/images/' + fileName">

<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<div v-bind:text-content.prop="text"></div>

<my-component :prop="someThing"></my-component>

<child-component v-bind="$props"></child-component>

<svg><a :xlink:special="foo"></a></svg>

v-on (https://cn.vuejs.org/v2/api/#v-on)

綁定時(shí)間監(jiān)聽器白魂。時(shí)間類型由參數(shù)指定。表達(dá)式可以是一個(gè)方法的名字或一個(gè)內(nèi)聯(lián)語句上岗，如果沒有修飾字符也可以省略福荸。
用在普通的元素上時(shí)，智能監(jiān)聽原生的DOM事件肴掷。用子啊自定義元素組建上時(shí)敬锐，也可以監(jiān)聽子組件觸發(fā)的自定義事件背传。
在監(jiān)聽原聲DOM事件時(shí)，方法以事件為唯一參數(shù)綁定一個(gè)事件/監(jiān)聽器鍵值對(duì)的對(duì)象台夺。注意當(dāng)使用對(duì)象語法時(shí)径玖，是不支持任何修飾器的。

      <input type="button" value ="按鈕" v-on:click="show">
        <script>
var vm = new Vue({
        el :"#app",
        data :{
            msg:'app',
        },
        methods:{
            show : function(){
                alert('123');
            },
            show1 : function(){
                alert('123');
            }
        }
    });

</script>

要在Vue的實(shí)例化方法中添加一個(gè)methods：{這里面來放對(duì)應(yīng)的方法}

@click.stop 阻止冒泡

<div id = app>
    <div class ="inner" @click="divHandler" >
        <input type="button" value="點(diǎn)擊" @click="btnhandeler" @click.stop="dothis">
    </div>
</div>

        <script>

    var vm =new Vue({
        el:"#app",
        data :{

        },
        methods:{
            btnhandeler(){
                console.log('點(diǎn)擊來btn');
            },
            divHandler(){
                console.log('點(diǎn)擊來div');
            },
            dothis(){
                console.log('停止冒泡');
            }

        }


    })

</script>

@click.prevent="privent"

阻止跳轉(zhuǎn)谒养。

@click.capture 捕獲事件

讓事件觸發(fā)從外到里執(zhí)行

• self (https://cn.vuejs.org/v2/api/#v-on)
  *onece (https://cn.vuejs.org/v2/api/#v-on)

v-model 數(shù)據(jù)雙向綁定 只能用在表單元素中

input(radio, text,address,email.....) select checkbox textarea
<div id = app>
<p>{{msg}}</p>
<input type="text" v-model="msg">//通過v-model實(shí)現(xiàn)雙向綁定挺狰，改變v-model中msg的值，會(huì)改變买窟，vm.msg中的值
</div>
<script>
var vm =new Vue({
el:"#app",
data :{
msg:"大家好才是真的好"
}
})
</script>

Vue中class 樣式使用 (https://cn.vuejs.org/v2/guide/class-and-style.html#ad)

 建議使用對(duì)象的方式
在為class使用v-bind 綁定對(duì)象的時(shí)候丰泊，對(duì)象的屬性名，由于對(duì)象的屬性可帶引號(hào)始绍，也可以不帶引號(hào)瞳购。所以這里沒有寫引號(hào)
    <div
  class="static"
    v-bind:class="{ active: isActive, 'text-danger':     hasError }"
></div>

綁定內(nèi)連樣式

• 對(duì)象語法
  v-bind:style 的語法十分直觀-- 看起來非常像css，但是其實(shí)是一個(gè)JavaScript對(duì)象亏推。css屬性值可用駝峰命名

    <div id = "app">
    <!-- 使用字符串對(duì)象的方式 -->
    <p :style="{'color':'red','font-weight':'200'}">段落</p>  
       //直接綁定到一個(gè)樣式對(duì)象通常更好学赛，這會(huì)讓模板更清晰：
     <p :style="styleObj1">段落</p>  
    // 綁定一個(gè)數(shù)組的方式
         <p :style="[styleObj1, styleObj2]">段落</p>         
  </div>
        <script>
    var vm = new Vue({
        el:'#app',
        data:{
            styleObj1:{'color':'red','font-weight':'200'},
                            styleObj2:{'color':'red','font-weight':'200'},
        },
        methods:{
        }
    })
        </script>
  

v-for

我們可以用V-for 指令基與一個(gè)數(shù)組倆來渲染一個(gè)列表。v-for 指令需要使用item in items形式的特殊語法吞杭，其中items 是原數(shù)組組盏浇，而item 則是北迭代的數(shù)組元素的別名。

        <div class="app">
<ul>
    <li v-for="item in items">
        {{item.message}}
    </li>

</ul>

</div>
<script>
var vm = new Vue({
    el:'.app',
    data:{
        items:[
        {message:'foo'},
        {message:'Bar'}
        ]
    },
    methods:{
    }
})
</script>

*第二種方式 在v-for塊種芽狗，我們可以訪問所有父作用的屬性绢掰。V-for還可以支持一個(gè)可選的第二個(gè)參數(shù)

    <div class="app">
<ul>
    <!-- <li v-for="item in items">
        {{item.message}}
    </li> -->
    <li v-for="(item1, index) in items">
            {{parentMessage}} - {{item1.message}} -{{index}}

    </li>
  //也可以這樣以兼職對(duì)的方式來獲取
    <li v-for="(value,name, index) in items">
        {{index}} -- {{name}}---{{value}}

    </li>
</ul>

//循環(huán)count 是從1開始的
<li v-for="count in 10">這是第{{count}}次循環(huán)</li>
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
parentMessage:'Parent',
items:[
{message:'foo'},
{message:'Bar'}
]

    },
    methods:{

    }

})

</script>

v-for 循環(huán)中Key的注意事項(xiàng)

    <div class="app">
    <div>id: 
        <input type="text" v-model="id">
        <input type="text" v-model="name"></input>
        <input type="button" value="添加" @click="handerClick">
    </div>
    <!-- 注意  v-for 循環(huán)的時(shí)候，key 屬性只能使用nuber-->
    <!-- 注意：key 在使用的時(shí)候必須使用v-bind 屬性綁定的形式指定key的值 -->
    <!-- 在組件中童擎，使用v-for 循環(huán)的時(shí)候滴劲，或者在一些特殊情況中，如果v-for有問題顾复，必須在使用v-for的同時(shí)制定等唯一字符串?dāng)?shù)字：key的值 -->
    <p v-for="item in list" :key="item.id">
        <input type="checkbox" >
        {{item.id}} --{{item.name}}
    </p>

</div>
<script>
var vm = new Vue({
    el:'.app',
    data:{
        id:'',
        name:'',
        list :[
            {id:1,name:'3'}
        ]
    },
    methods:{
        handerClick(){
            // this.list.push({id:this.id,name:this.name})
             this.list.unshift({id:this.id,name:this.name})
        }
    }



})

</script>

v-if v-else- if v-else

v-if 指令用于條件性地渲染一塊內(nèi)容班挖。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回true 值的時(shí)候被渲染。

    <div class="app">
    <h1 v-if="awasome"> vue is awwsome!</h1>
    <h1 v-else-if="flag">on on</h1>
    <h1 v-else>哈哈</h1>
</div>
    <script>
    var vm = new Vue({
        el:'.app',
        data:{
            awasome:false,
            flag:false  
        },
        methods:{
        }
    })

</script>

v-show

更具一個(gè)條件展示元素的選項(xiàng)v-show
<h1 v-show="ok">Hello!</h1>

v-if vs v-show

v-if 是“真正”的條件渲染芯砸，因?yàn)樗鼤?huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建萧芙。
v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)假丧，才會(huì)開始渲染條件塊末购。
相比之下，v-show 就簡(jiǎn)單得多——不管初始條件是什么虎谢，元素總是會(huì)被渲染盟榴，并且只是簡(jiǎn)單地基于 CSS 進(jìn)行切換。
一般來說婴噩，v-if 有更高的切換開銷擎场，而 v-show 有更高的初始渲染開銷羽德。因此，如果需要非常頻繁地切換迅办，則使用 v-show 較好宅静；如果在運(yùn)行時(shí)條件很少改變，則使用 v-if 較好站欺。

過濾器 https://cn.vuejs.org/v2/guide/filters.html

• 下買是一個(gè)簡(jiǎn)單的例字 具體參考文檔

    <div class="app">
    <p>{{msg | msgFomart('瘋狂')}}</p>
  </div>
   <script>
  Vue.filter('msgFomart',function(data,arg){
  return data.replace(/好好/g,arg);
  })
   var vm = new Vue({
  el:'.app',
  data:{
      msg:'好好學(xué)習(xí)姨夹，天天向上'
  }
  })
      </script>
  

padStart() 字符串填充指令

string.padstart(2,'0') 意思是長(zhǎng)度為2位，不夠的用0補(bǔ)夠

按鍵碼

keyCode 的事件用法已經(jīng)被廢棄了并可能不會(huì)被最新的瀏覽器支持矾策。
使用 keyCode 特性也是允許的：
<input v-on:keyup.13="submit">
這個(gè)13 這些可以自定義
Vue.config.keyCodes.f2 = 13; 定義f2的鍵盤碼 為13
為了在必要的情況下支持舊瀏覽器磷账，Vue 提供了絕大多數(shù)常用的按鍵碼的別名：
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

使用新的

2.1.0 新增 https://cn.vuejs.org/v2/guide/events.html#按鍵修飾符
可以用如下修飾符來實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。
.ctrl
.alt
.shift
.meta
注意：在 Mac 系統(tǒng)鍵盤上贾虽，meta 對(duì)應(yīng) command 鍵 (?)逃糟。在 Windows 系統(tǒng)鍵盤 meta 對(duì)應(yīng) Windows 徽標(biāo)鍵 (?)。在 Sun 操作系統(tǒng)鍵盤上蓬豁，meta 對(duì)應(yīng)實(shí)心寶石鍵 (◆)绰咽。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機(jī)器的鍵盤地粪、以及其后繼產(chǎn)品取募，比如 Knight 鍵盤、space-cadet 鍵盤蟆技，meta 被標(biāo)記為“META”玩敏。在 Symbolics 鍵盤上，meta 被標(biāo)記為“META”或者“Meta”付魔。
例如：

<input @keyup.alt.67="clear">

<div @click.ctrl="doSomething">Do something</div>
請(qǐng)注意修飾鍵與常規(guī)按鍵不同，在和 keyup 事件一起用時(shí)飞蹂，事件觸發(fā)時(shí)修飾鍵必須處于按下狀態(tài)几苍。換句話說，只有在按住 ctrl 的情況下釋放其它按鍵陈哑，才能觸發(fā) keyup.ctrl妻坝。而單單釋放 ctrl 也不會(huì)觸發(fā)事件。如果你想要這樣的行為惊窖，請(qǐng)為 ctrl 換用 keyCode：keyup.17刽宪。

Vue.directive( id, [definition] )

      <script>
Vue.directive('focs',{ 
    // el 在所有的函數(shù)中第一個(gè)參數(shù)永遠(yuǎn)是el ，el表示被綁定了指令的那個(gè)元素界酒。這個(gè)el是一個(gè)原生的Js對(duì)象
    bind:function(el){ //每當(dāng)指令綁定到元素上的時(shí)候圣拄，會(huì)立即執(zhí)行bind這個(gè)方法
        //元素剛綁定了指令的時(shí)候，元素還沒有插入dom中去毁欣。這是狗叼用沒有用
    }, 
    inserted:function(el){
    el.focus();
    },
    updata:function(el){
        
    }
    // componentUpdated:functin(){},
    // unbind:function(){}

})

一個(gè)指令定義對(duì)象可以提供如下幾個(gè)鉤子函數(shù) (均為可選)：https://cn.vuejs.org/v2/guide/custom-directive.html

• bind：只調(diào)用一次庇谆，指令第一次綁定到元素時(shí)調(diào)用岳掐。在這里可以進(jìn)行一次性的初始化設(shè)置。
• inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在饭耳，但不一定已被插入文檔中)串述。
• update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前寞肖。指令的值可能發(fā)生了改變纲酗，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)新蟆。

函數(shù)簡(jiǎn)寫

在很多時(shí)候觅赊，你可能想在 bind 和 update 時(shí)觸發(fā)相同行為，而不關(guān)心其它的鉤子栅葡。比如這樣寫:

      Vue.directive('color-swatch', function (el, binding) {
        el.style.backgroundColor = binding.value
    })

Vue生命周期

• 什么事生命周期：從Vue實(shí)例創(chuàng)建茉兰、運(yùn)行、到銷毀期間欣簇，總是伴隨著各種各樣的事件规脸，這些事件統(tǒng)稱為生命周期
• 生命周期鉤子：就是生命周期事件的別名而已。
• 生命周期鉤子= 生命驟你函數(shù)=生命周期事件
• 主要的生命周期函數(shù)分類：
  • 創(chuàng)建期間的生命周期函數(shù)
    • beforeCreate:實(shí)例剛在內(nèi)存中被創(chuàng)建出來熊咽，此時(shí)莫鸭，還沒有初始好data 和methods 屬性
    • created 實(shí)例已經(jīng)在內(nèi)存中創(chuàng)建OK，此時(shí)data 和methods 已經(jīng)創(chuàng)建Ok横殴，此時(shí)還沒開始編譯模版
    • beforeMount：此時(shí)已經(jīng)完成了模板的編譯被因，但是還沒有掛載到頁面中
    • mounted:此時(shí)，已經(jīng)將編譯好的模板衫仑，掛載到了頁面制定的容器中顯示梨与。

    beforeCreate(){
        // console.log(this.msg), 沒有初始化
        // this.show() //還沒有被初始化
    },
    created(){
        // console.log(this.msg), 已經(jīng)初始化
        this.show() //已經(jīng)初始化
    },
    beforeMount(){//這是遇到的第三個(gè)生命周期函數(shù)，表示模版已經(jīng)在內(nèi)存中編譯完成了文狱，但是還沒有渲染在模版中粥鞋。
        console.log(document.getElementById('h3').innerText)
        //在這里頁面中的元素還沒真正被替換

    },
    mounted(){
        頁面從內(nèi)存渲染出來，顯示完成瞄崇。
    },
    //接下來的兩個(gè)事件 數(shù)據(jù)有變化才會(huì)調(diào)用這兩個(gè)方法
    beforeUpdata(){ //數(shù)據(jù)有更新呻粹，頁面還沒有更新時(shí)間

    },
    updated(){
        //更新界面
    },
    beforeDestory(){
        //頁面即將銷毀
    },
    destoryed(){
        //組件已經(jīng)被銷毀
    }
})

Vue-resource實(shí)現(xiàn)get，post苏研，jsonp請(qǐng)求 https://www.runoob.com/vue2/vuejs-ajax.html

1.之前學(xué)習(xí)中等浊，如何發(fā)起數(shù)據(jù)請(qǐng)求
2.常見的數(shù)據(jù)請(qǐng)求類型？get post jsonp

3. 測(cè)試的URL請(qǐng)求資源

• get請(qǐng)求地址：http://vue.studyit.io/api/getlunloo

• post 請(qǐng)求地址：http://vue.studyit.io/api/post

• jsonp 請(qǐng)求地址：http://vue.studyit.io/api/jsonp

  httpGet(){
  console.log('開始請(qǐng)求')
  this.http.post('http://jsonplaceholder.typicode.com/users',{},{emulateJSON:true}).then(function(res){

              console.log(res);
          });
      },
      httpJsonp(){
  
          this.$http.jsonp('http://jsonplaceholder.typicode.com/users',{}).then(res=>{
  
              console.log(res);
  
          });
      }
  

設(shè)置根域名

Vue.http .options.root ='www.baicu.com/'

全局窮emulatejson

Vue.http.options.emulateJson= ture; 這只后post 不用傳 {emulateJSON:true} 這個(gè)參數(shù)啦

Vue中動(dòng)畫

為什么要有動(dòng)畫：動(dòng)畫可以幫助用戶更好理解動(dòng)畫

      <style>
            style中定義兩種動(dòng)畫
    .v-enter,
    .v-leave-to {
        opacity: 0;
        transform: translateX(150px);
    }
    /*入場(chǎng)動(dòng)畫*/
    .v-enter-active, 
    .v-leave-active{
        
        transition: all 0.4s ease;
    }

</style>
</head>
<body>
<div class="app">
    <input type="button" value="改變" @click="flag = !flag">
    <!-- 需求 點(diǎn)擊button 讓h1改邊 -->
    <!-- 1 使用transition 把要?jiǎng)赢嫷陌饋?-->
    <!-- transition是官方提供的 -->

    <transition >
        <h1 v-show="flag">我是h1</h1>

    </transition>
    
</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:true

        },
        

    })
</script>

• 給transition取一個(gè)別名 子

     style 里面這么寫
         .my-enter,
  .my-leave-to {
     opacity: 0;
     transform: translateY(150px);
  }
  /*入場(chǎng)動(dòng)畫*/
  .my-enter-active, 
  .my-leave-active{
     
     transition: all 0.4s ease;
  }
      <transition  name="my">
     <h1 v-show="flag">我是h1</h1>
  </transition>
  

3 勾子函數(shù)實(shí)現(xiàn)動(dòng)畫 https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-鉤子

        <div class="app">

    <input type="button" value ="點(diǎn)擊加入" @click= "flag = !flag">
    <transition
    @befor-enter='beforeEnter'
    @enter="endter"
    @after-enter="afterEnter"
    >
        <div v-show="flag" class="dian">

    </div>
    </transition>


</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:false
        },
        methods:{
            beforeEnter(el){
                el.style.transform= 'translate(0,0)';
            },
            endter(el,done){
                el.offsetWidth
                el.style.transform= "translate(150px,130px)";
                el.style.transition='all 0.5s ease';
                done()

            },
            afterEnter(el){
                this.flag = !this.flag;
                
            }


        }


    })

</script><div class="app">

    <input type="button" value ="點(diǎn)擊加入" @click= "flag = !flag">
    <transition
    @befor-enter='beforeEnter'
    @enter="endter"
    @after-enter="afterEnter"
    >
        <div v-show="flag" class="dian">

    </div>
    </transition>


</div>
<script>
    var vm = new Vue({
        el:'.app',
        data:{
            flag:false
        },
        methods:{
            beforeEnter(el){
                el.style.transform= 'translate(0,0)';
            },
            endter(el,done){
                el.offsetWidth
                el.style.transform= "translate(150px,130px)";
                el.style.transition='all 0.5s ease';
                done()

            },
            afterEnter(el){
                this.flag = !this.flag;
                
            }


        }


    })

</script>

transition-group動(dòng)畫

在實(shí)現(xiàn)列表過渡的時(shí)候，如果需要過渡元素，是通過v-for 循環(huán)渲染出來的庄萎，不能使用transition 包裹踪少，需要使用transitionGroup
如有要為一個(gè)v-for 循環(huán)創(chuàng)建的元素設(shè)置動(dòng)畫，必須為每一個(gè)元素設(shè)置key 屬性糠涛。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
        li {
            border: 1px ;
            margin: 10px;
        }
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(80px);
        }

        .v-enter-active,
        .v-leave-active{
            
            transition: all 0.5s ease;
        }
        li:hover{
            background-color: red;
            transition: all 0.5s ease;
        }
</style>

</head>
<body>
<div class="app">
<input type="text" v-model="id">
<input type="text" v-model="name">
<input type="button" value="添加" @click="add">
<ul>
<transition-group>
<li v-for="item in list" :key="item.id">
{{item.name}} --- {{item.id}}
</li>
</transition-group>
</ul>

</div>

<script>
    var vm = new Vue({
        el:'.app',
        data:{
            id:'',
            name:'',
            list:[{name:'1',id:'1'},
            {name:'2',id:'2'}
            ]
        },
        methods:{
            add(){
                this.list.push({name:this.name,id:this.id});
                this.id = this.name='';
            }
        }

    })
</script>

列表刪除的動(dòng)畫

      .v-move{
            transition: all 0.5s ease;
        }
        .v-leave-active{
            position: absolute;
        }

appear 實(shí)現(xiàn)入場(chǎng)動(dòng)畫

        <ul>
        <transition-group appear>
            <li v-for="(item ,i) in list" :key="item.id" @click="del(i)">
                {{item.name}} --- {{item.id}}
            </li>
        </transition-group>
    </ul>

tag

這里用tag 渲染transition-group  渲染成啦ul 這樣外面的ul就不需要啦援奢，如果不渲染 transition-group  默認(rèn)是一個(gè)span元素
<!-- <ul> -->
        <transition-group appear tag="ul"> 
            <li v-for="(item ,i) in list" :key="item.id" @click="del(i)">
                {{item.name}} --- {{item.id}}
            </li>
        </transition-group>
    <!-- </ul> -->