vue腳手架搭建

1、插槽（slot） 就是頁面分離出去的 公共部分 至關於PHP 的 include 替換部分

種類： 不具名插槽 覆蓋不具名插槽 具名插槽 覆蓋具名插槽

特色：

一、不具名公共插槽

覆蓋公共插槽

公共插槽的惟一性

二、具名插槽(帶有名稱的來進行替換不一樣的位置)

 

2、extend拓展組件模板

經過實例爲組件傳值

3、Vue中的computed計算屬性 有冗餘(功能與methods和filter稍有些重疊) 計算方法 過濾器

4、vue 中的自定義指令

一、組成結構

Vue.directive(指令名, 指令實現內容)

傳過去的： 屬性名 指令名 屬性值

二、directive 中的鉤子函數(在實列化前仍是實例化後)至關於js 構造函數 具備生命週期

1）bind

 

只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個在綁定時執行一次的初始化動做

2）inserted

被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於 document 中）

3）update

被綁定元素所在的模板更新時調用，而不論綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新

4）componentUpdated

被綁定元素所在模板完成一次更新週期時調用

5）unbind

只調用一次，指令與元素解綁時使用

5、動畫

v-if（條件渲染）

v-show（條件展現）

動態組件

在組建的根節點上，而且被vue實例DOM方法觸發，如appendTo方法把組件添加到某個根節點上

Vue推薦Animate.css樣式庫來拓展豐富Vue的動畫效果，若是用別人的動畫庫就不得不涉及到自定義類名了(CSS動畫插件)

1）Animate.css官方庫地址

https://daneden.github.io/animate.css/

Vue中的動畫 Javascript鉤子

當只用 JavaScript 過渡的時候， 在 enter 和 leave 中，回調函數 done 是必須的 。 不然，它們會被同步調用，過渡會當即完成。

velocity動畫庫(JS動畫插件)

velocity是專門用於拓展出來服務於JS渲染動畫的，咱們能夠結合Vue進行使用

6、路由

一、至關於a連接

a）router-link (超連接標籤)

b）to（須要跳轉的目標地址）

二、切換導航連接時，相應單頁面的內容會發生變化，這邊就須要一個容器去接收組件的內容

<router-view></router-view>

7、Vue中的動態路由參數params

1）動態路徑參數 以冒號開頭

2）獲取動態路由參數

let list = {template: '<h1>$route.params.id</h1>'}

3）單參

4）多參

/list/測試/name/三日

8、Vue中的動態路由參數query(至關於get請求 帶參數界面)

-----------------------------------------------------------------------------------------------

項目實踐：

開發一個 記事本 的項目

腳手架安裝

建立腳手架的目的

能夠幫助咱們構建好一個空的項目 包括目錄，文件命名， 入口文件， 依賴插件， 打包程序

 

vue ，(自帶了webpack的小型服務器 ，因此不用咱們再去使用服務器)

vue全局安裝指令：

npm install --global vue-cli -g

 

webpack (vue init webpack notepad), 初始化一個基於webpack模板的名字叫作notepad

webpack是一個模塊打包器。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。

 

 

grunt(npm install -g grunt-init)