vue 高階,
1. slot 插槽(內容分發)
a.單個slot
b. 具名slot （
"a">
模板中呼叫
"a">***
）* 混合父元件的內容與子元件自己的模板 --> 內容分發
* 父元件模板的內容在父元件作用域內編譯，子元件模板的內容在子元件作用域內編譯
2.transition 過渡
vue 在插入，更新或者移除dom 時，提供多種不同方式的應用過渡效果
1） 單元素/元件過濾
css過渡
css動畫
結合animate.css動畫庫
2） 多個元素過渡（設定key）
當有相同標籤名的元素切換時，需要通過key特性設定唯一的值來標記讓vue區分它們，否則vue為了效率智慧型替換相同標籤內部的內容
mode:in-out（先來在走）;out-in（先走在來）
3) 多個元件過濾
4） 列表過渡（設定key）
不同於transiion ，他會以乙個真實元素呈現，預設為乙個，niye
可以通過tag特性更換為其他元素
提供唯一的key屬性值
3.元件生命週期
只執行一次
beforecreate(
)： 初始化時元件
created(
):建立元件
beforemount(
): 元件掛載之前
mounted(
)：元件掛載結束後呼叫 訪問dom，setinterval，window，onscroll，監聽事件 ajax
//可執行無數次
beforeupdate(
): // 更新執行
updated(
): 更新之後可以訪問dom
//只執行一次 銷毀
befordestroy(
): // destroyed clearinterval ,window.onscroll=null,$off
destroyed(
) // destroyed clearinterval ,window.onscroll=null,$off
4. 過濾器 通過|呼叫過濾器
"data.img | path"
>
//定義過濾器
vue.filter(
"path",function(data)
)5. swiper，乙個成熟的滑動元件，封裝了各種樣式的滑動效果。使用簡單
學習：引入swiper.js
模板："swiper-container a"
>
>
<
!-- 動態 -->
"swiper-slide" v-for=
"(data,index) in datalist"
>
}<
!-- 如果需要分頁器 -->
"swiper-pagination"
>
updated()}
)}.swiper-container
.swiper-slide img
自定義元件的封裝
自定義封裝swiper元件(基於swiper)
注意：防止swiper初始化過早
"dome1"
>
<
!-- 給swiper元件定義key值，防止值更新時，swiper頻繁的建立 -->
"datalist.length"
>
<
!-- 動態 -->
"swiper-slide" v-for=
"(data,index) in datalist"
>
}vue.component(
"swiper",})
}}) var vm = new vue(
, methods:,
mounted(
),2000)
}, }
) .swiper-container
.swiper-slide img
6.指令 自定義指令
1，自定義指令介紹 directives
2. 鉤子函式
* 引數 el，binding， vnode（vnode.context）
* bind,inserted,updated,componentupdated, unbind
vue使用diff 演算法 只對比連個標籤是否相同，相同了只替換它的值，標籤不相同，它認為是個新的東西，它會將其整體刪了重新建立
vue學習筆記（三）
1.按鍵修飾符 1.1 vue定義的常用按鍵名 keyup.enter add 1.2 直接使用按鍵碼 1.3 自定義按鍵名 vue.config.keycodes 2.自定義指令 vue的內建指令有v on v bind v for等等，vue 也允許註冊自定義指令。呼叫的時候，一定要加 v 字首...
Vue學習筆記（三）
在vue.js中可以通過watch來監聽資料的變化，比如通過watch實現的簡單計數器 點我增加 var vm new vue vm.watch count function newvalue,oldvalue 效果如下 watch有兩個引數，乙個是要監聽的變數，另乙個是 函式，函式接受兩個引數，第...
vue基礎學習筆記（三）
6.監視 watch computed 7.專案相關 引入物件 import vuerouter from vue router 安裝外掛程式 vue.use vuerouter 掛載屬性的行為 建立路由物件 let router newvuerouter 將路由物件放入到options中new v...