~~~
<div id="app">
<transition-group>
<div v-for="(item,index) of list" :key="item.id">
{{item.title}}
</div>
</transition-group>
<button @click="handleClick">add</button>
</div>
~~~
>[warning] #### transition-group中的列表一定要給key屬性
~~~
var count = 0;
var vm = new Vue({
el: "#app",
data: {
list: []
},
methods: {
handleClick() {
this.list.push({
id: count++,
title: "hello world" + count
})
}
}
})
~~~
- 1.vue
- 第一章 起步
- 第1節 開發環境配置
- 第2節 hello world
- 第3節 開發todolist
- 1.使用全局組件開發todolist
- 2.使用局部組件
- 第4節 組件的模板寫在html中
- 第5節 子組件自定事件,向父組件傳遞參數
- 第6節 vue-temp
- 第二章 基本
- 第1節實例,掛載點,模板
- 第2節 vue的生命周期
- 2-1 數據改變執行的生命周期函數
- 第3節 v-text/v-html
- 第4節 計算屬性,方法,偵聽器
- 第5節 計算屬性的get,set方法
- 5-1 set
- 第6節 樣式綁定
- 第7節 條件渲染
- 第8列表渲染
- 第9節 Vue.set
- 第10節 vue點擊事件獲取元素的內容
- 第三章 vue組件
- 3-1 使用組件細節
- 3-1-1 組件中的data要是函數
- 3-1-2 ref屬性操作DOM
- 3-2 父子組件傳值
- 3-2-1 對兩個組件的值求和
- 3-3 組件參數校驗與非props特性
- 3-4 給組件綁定原生事件@click.native
- 3-5 非父子組件傳值
- 3-6 slot
- 3-6-1 使用多個slot
- 3-7 作用域slot
- 3-8 動態組件
- 第四章 動畫
- 4-1動畫基礎
- 4-1-0 動畫原理
- 4-1-1 實現一個簡單的漸隱漸現動畫
- 4-1-2 使用animation實現簡單動畫
- 4-1-3 自定義v-enter-active,v-leave-active
- 4-1-4 animate.css
- 4-2 vue中使用過渡和動畫
- 4-2-1 加載進來就有動畫
- 4-2-2 transition和animate.css混用
- 4-3 JS動畫與Velocity.js
- 4-3-1 velocity.js
- 4-4 多個元素或組件的過渡
- 4-4-1 組件之間的切換
- 4-5 列表過渡
- 4-6vue中動畫的封裝
- 4-6-1 使用JS和組件封裝一個簡單的動畫
- 第五章 項目基本配置
- 5-1 vue-cli構造項目的文件介紹
- router.js
- 進行一個簡單的路由配置
- App.vue
- 路徑
- 5-2 vue-cli中使用vm
- 5-3 樣式重置,fastclick,border.css的配置
- 5-4 vue-rem 實現適配
- 第六章 項目開發
- 6-1 在項目中引入iconfont
- 6-2 代碼優化
- 6-2-3 設置alias
- 6-3 輪播的開發
- 6-3-1得到一個等比例的div
- 6-3-2 設置swiperList
- 6-3-3 使用swiper控制臺報錯的解決
- 6-4 圖片區域的開發
- 6-4-1 一個簡單的算法
- 6-5 使用axios獲取首頁數據
- 6-5-1 封裝一個簡單的axios
- 6-5-2 axios跨域
- 第七章 列表頁的開發
- 7-1 better-scroll
- 7-2 兄弟組件間聯動
- 7-3輸入框不能正常輸出
- 7-4 項目部署
- 7-5 vuex實現數據共享
- 7-5-1 使用事件向vuex傳遞數據
- 7-5-2 this.$store.commit
- 7-6 路由
- 7-7 使用localStorage
- 7-8 vuex-state-mutations的切割
- 7-9keep-alive
- 第八章vuex
- 第九章 詳情頁開發
- 9-1實現動態路由
- 9-2 跳轉頁面接收傳遞的參數
- 9-3 全局事件的解綁
- 9-4 遞歸組件
- 9-5 exclude
- 9-6 解決多個頁面相互滾動影響
- 9-7 異步組件
- 9-8 動畫插槽
- 2.vue-cube
- 第一章 配置
- 1-1 本地mock數據
- 1-2 路徑配置
- 第二章 模塊
- 2-1 create-api
- 3.vant-ui
- 第一章 起步
- 第一節 安裝
- 第二節 List踩坑記
- 4.weex
- 第一章 開發環境搭建
- 第一節 weex-ui
- 第二節 jdk,sdk配置
- 第二章 內置組件
- 第一節 基礎組件
- 第二節 weex的跳轉
- 第一節 如何兼容三端
- 5.mpvue
- 第一章 開發環境配置
- 6.問題解決