Vue學習次日

• vue單文件方式 xxx.vue
• 1:準備好配置文件 package.json(包描述文件&& 封裝命令npm run dev) + webpack.config.js文件（打包的配置文件）
• 2:建立index.html（單頁應用的頁）
• 3:建立main.js(入口文件)
• 4:引入vue和相關的文件xxx.vue
• 5:new Vue(options)

• 6:options（選項）:

  • data
  • methods
  • components（組件內聲明子組件)
  • props

• 7:實例:

  • 在組件內（xxx.vue）中的this
  • new Vue()

  • 事件

    • this.$on(事件名,回調函數(參數))
    • this.$emit(事件名,數據)
    • this.$once(事件名,回調函數(參數)) 就觸發一次
    • this.$off(事件名); 取消事件

• 8:全局

  • Vue.component('組件名',組件對象) 在哪裏均可以使用

• 9: 組件傳值

  • 父傳子: 屬性做爲參數

    • 常量 title="xxx" 子組件聲明接收參數 props:['xxx']
    • 變量 :title="num" 子組件聲明接收參數 props:['xxx']

  • 子傳父: vuebus（只能是同一輛車）

    • 先停車到父組件，On一下
    • 再開車到子組件，若是須要的話，emit一下，觸發上述時間的回調函數

今日重點

• vue組件的使用
• 組件間通訊
• vue-router使用
• axios

過濾器

• content | 過濾器,vue中沒有提供相關的內置過濾器,能夠自定義過濾器

• 組件內的過濾器 + 全局過濾器

  • 組件內過濾器就是options中的一個filters的屬性（一個對象）

    • 多個key就是不一樣過濾器名,多個value就是與key對應的過濾方式函數體

全局過濾器- `Vue.filter(名,fn)`
組件內的過濾器 - `filters:{test(option){ return option.split()}}`

• 輸入的內容幫我作一個反轉
• 例子:父已託我幫你辦點事

• 總結

  • 全局 ：範圍大，若是出現同名時，權利小
  • 組件內: 若是出現同名時，權利大，範圍小

獲取DOM元素

• 救命稻草, 前端框架就是爲了減小DOM操做，可是特定狀況下，也給你留了後門
• 在指定的元素上，添加ref="名稱A"

• 在獲取的地方加入 this.$refs.名稱A

  • 若是ref放在了原生DOM元素上，獲取的數據就是原生DOM對象

    • 能夠直接操做

  • 若是ref放在了組件對象上，獲取的就是組件對象

    • 1:獲取到DOM對象,經過this.$refs.sub.$el,進行操做

  • 對應的事件

    • created 完成了數據的初始化，此時還未生成DOM，沒法操做DOM
    • mounted 將數據已經裝載到了DOM之上,能夠操做DOM

mint-ui

• 組件庫
• 餓了麼出品,element-ui 在PC端使用的
• 移動端版本 mint-ui
• https://mint-ui.github.io/#!/...

• 注意:

  • 若是是所有安裝的方式

    • 1:在template中能夠直接使用組件標籤
    • 2:在script中必需要聲明，也就是引入組件對象（按需加載）

wappalyzer

• 獲取到當前網站的使用的技術
• https://wappalyzer.com/download

vue-router

• 前端路由 核心就是錨點值的改變，根據不一樣的值，渲染指定DOM位置的不一樣數據
• ui-router:錨點值改變，如何獲取模板？ajax、
• vue中，模板數據不是經過ajax請求來，而是調用函數獲取到模板內容
• 核心：錨點值改變
• 之後看到vue開頭，就知道必須Vue.use

• vue的核心插件:

  • vue-router 路由
  • vuex 管理全局共享數據

• 使用方式

  • 1:下載 npm i vue-router -S
  • 2:在main.js中引入 import VueRouter from 'vue-router';
  • 3:安裝插件 Vue.use(VueRouter);

  • 4:建立路由對象並配置路由規則

    • let router = new VueRouter({ routes:[ {path:'/home',component:Home} ] });

  • 5:將其路由對象傳遞給Vue的實例，options中

    • options中加入 router:router
  • 6:在app.vue中留坑 <router-view></router-view>

命名路由

• 需求，經過a標籤點擊，作頁面數據的跳轉

• 使用router-link標籤

  • 1:去哪裏 <router-link to="/beijing">去北京</router-link>

  • 2:去哪裏 <router-link :to="{name:'bj'}">去北京</router-link>

    • 更利於維護，若是修改了path，只修改路由配置中的path，該a標籤會根據修改後的值生成href屬性

參數router-link

• 在vue-router中，有兩大對象被掛載到了實例this
• $route(只讀、具有信息的對象)、$router(具有功能函數)

• 查詢字符串

  • 1:去哪裏 <router-link :to="{name:'detail',query:{id:1} } ">xxx</router-link>
  • 2:導航(查詢字符串path不用改) { name:'detail' , path:'/detail',組件}

  • 3:去了幹嗎,獲取路由參數(要注意是query仍是params和對應id名)

    • this.$route.query.id

• path方式

  • 1:去哪裏 <router-link :to="{name:'detail',params:{name:1} } ">xxx</router-link>
  • 2:導航(path方式須要在路由規則上加上/:xxx)
  • { name:'detail' , path:'/detail/:name',組件}

  • 3:去了幹嗎,獲取路由參數(要注意是query仍是params和對應name名)

    • this.$route.params.name

編程導航

• 不能保證用戶必定會點擊某些按鈕
• 而且當前操做，除了路由跳轉之外，還有一些別的附加操做
• this.$router.go 根據瀏覽器記錄 前進1 後退-1

• this.$router.push(直接跳轉到某個頁面顯示)

  • push參數: 字符串 /xxx
  • 對象 : {name:'xxx',query:{id:1},params:{name:2} }

複習

• 過濾器，全局，組件內
• 獲取DOM元素 ，在元素上ref="xxx"

• 在代碼中經過this.$refs.xxx 獲取其元素

  • 原生DOM標籤獲取就是原生DOM對象
  • 若是是組件標籤，獲取的就是組件對象 $el繼續再獲取DOM元素

• 聲明週期事件(鉤子)回調函數

  • created: 數據的初始化、DOM沒有生成
  • mounted: 將數據裝載到DOM元素上，此時有DOM

• 路由

  • window.addEventListener('hashchange',fn);
  • 根據你放<router-view></router-view><div id="xxx"></div> 做爲一個DOM上的標識
  • 最終當錨點值改變觸發hashchange的回調函數，咱們將指定的模板數據插入到DOM標識上

重定向和404

• 進入後，默認就是/
• 重定向 { path:'/' ,redirect:'/home' }
• 重定向 { path:'/' ,redirect:{name:'home'} }

• 404 : 在路由規則的最後的一個規則

  • 寫一個很強大的匹配
  • { path:'*' , component:notFoundVue}

多視圖

• 之前能夠一次放一個坑對應一個路由和顯示一個組件

  • 一次行爲 = 一個坑 + 一個路由 + 一個組件
  • 一次行爲 = 多個坑 + 一個路由 + 多個組件

• components 多視圖 是一個對象 對象內多個key和value

  • key對應視圖的name屬性
  • value 就是要顯示的組件對象
• 多個視圖<router-view></router-view> -> name就是default
• <router-view name='xxx'></router-view> -> name就是xxx
• name須要在router/index.js中聲明.例如

router-view所在頁面：

<router-view></router-view> //對應xx頁面
    <router-view name="footer"></router-view>//對應xxx頁面
    <router-view name="header></router-view>//對應xxxx頁面

router/index.js頁面：

components:{default:xx,footer:xxx,header:xxxx}

嵌套路由

• 用單頁去實現多頁應用，複雜的嵌套路由
• 開發中通常會須要使用
• 視圖包含視圖
• 路由父子級關係路由

期組件內包含着第一層router-view
{ name:'music' ,path:'/music', component:Music ,
children:[   子路由的path /就是絕對路徑   不/就是相對父級路徑
    {name:'music.oumei' ,path:'oumei', component:Oumei },
    {name:'music.guochan' ,path:'guochan', component:Guochan }
]
}

axios

• https://segmentfault.com/a/11...
• post請求的時候，若是數據是字符串 默認頭就是鍵值對，不然是對象就是application/json
• this.$axios.get(url,options)
• this.$axios.post(url,data,options)
• options:{ params:{id:1}//查詢字符串, headers:{ 'content-type':'xxxxx' },baseURL:'' }
• 全局默認設置 ：Axios.defaults.baseURL = 'xxxxx';
• 針對當前這一次請求的相關設置

如何練習

• 1:路由核心

  • 路由基本使用
  • 任選一種路由參數的方式(查詢字符串)
  • 404(路由匹配規則)
  • 嵌套路由
  • 編程導航

• 2:http請求

  • axios 發起get、post請求
  • axios掛載屬性方式