Vue學習筆記2

上篇文章總結

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一下，觸發上述時間的回撥函式

1.vue 元件

建立子元件
- <template></template> 中建立根div 寫html程式碼
- <script></script> 中export default {data(){ return{}}} 寫js程式碼
- 中寫css 樣式

再父元件中

引入自元件 + 在components:{}中宣告元件

import headerVue from './components/header.vue';
import bodyVue from './components/body.vue';
import footerVue from './components/footer.vue';
export default {
    data(){  return {  }  },
    methods:{},
    //必須宣告
    components:{
        //元件名（在模板中使用） :元件物件
        headerVue:headerVue,
        bodyVue, //簡寫
        footerVue
    }
}
複製程式碼

在template中使用元件 <header-vue></header-vue>

宣告全域性元件再main.js中引入，使用全域性方法Vue.component('headerVue',headerVue)

//引入子元件物件
import headerVue from './components/header.vue';
import bodyVue from './components/body.vue';
import footerVue from './components/footer.vue';
//宣告全域性元件
Vue.component('headerVue', headerVue); //註冊一個元件，第一個引數是名稱，在template中使用,第二個引數是實際的物件，顯示成什麼內容，具備什麼功能
Vue.component('bodyVue', bodyVue);
Vue.component('footerVue', footerVue);
複製程式碼

2.vue 元件間傳值父傳子

父元件使用 key='value' 或 v-bind:key='本父元件.key'

<header-vue textone="大"></header-vue>
<body-vue v-bind:texttwo="text2"></body-vue>
複製程式碼

使用使用propos

再html中使用props的屬性不需要使用this
props和data一樣是一元件的選項/資料 //接受父元件值引數的設定props:['textone'],

再方法中使用props需要使用this‘

export default {
    data(){
        return {}
    },
    //接受父元件值引數的設定
    props:['textone'],
    methods:{
        show(){
            alert(this.textone)
        }
    }
}
複製程式碼

2.vue 元件間傳值子傳父元件

需要藉助一箇中間值 conneor.js 是一個Vue實力

import Vue from 'vue';
var connector = new Vue();
export default connector;
複製程式碼

子元件傳值，先引用例項呼叫例項方法使用$emit 傳送資訊connnet.$emit(事件名，[...args])
```
import connect from '../connector.js';
connect.$emit('phone','62分鐘來');
複製程式碼
```
在父元件中先引用例項呼叫例項方法使用$on 傳送資訊connnet.$on(事件名，callback) 回撥函式的引數是emit傳送的引數
```
connect.$on('phone',function(msg){
    console.log(msg);
})
複製程式碼
```
vm.$once(event,calback) 事件觸發一次，觸發之後移除監聽器。
vm.$off(event,callback) 移除事件監聽
- 如果沒有引數，移除所有的監聽
- 如果只有一個事件引數，移除這個事件的監聽
- 有事件引數又回撥引數，移除這個回撥的監聽

3.過濾器

filters {{text | filter1}}區域性/全域性過濾器

區域性過濾器在選項options /資源設定 filter1:function(value){return newValue}

myFilter:function(value){  //value 就是-> text
    //輸入的內容幫我做一個反轉
    //轉換成陣列，反轉陣列，轉換成字串
    return value.split('').reverse().join('');
}
複製程式碼

設定全域性過濾器全域性API Vue.filter(id,function)

// 註冊
Vue.filter('my-filter', function (value) {
// 返回處理後的值
})

// getter，返回已註冊的過濾器
var myFilter = Vue.filter('my-filter')
複製程式碼

全域性過濾器範圍大，但會被區域性的覆蓋，
元件內過濾器如果同名會覆蓋，但是使用範圍沒有全域性廣進行不實用同名過濾器

4.Vue 例項屬性獲取dom

html使用ref='r1'標記在方法內使用 vm.$refs.r1獲取
- 生命週期函式 creat() 元件建立後資料已完成初始化但是DOM還未完成
- 生命週期函式 mounted() 資料裝在Dom上後，各種資料已經就位將資料渲染Dom上，DOM已經生成

在模版內程式碼

<div ref="myDiv">
<sub-vue ref="sub"></sub-vue>
複製程式碼

在script程式碼獲取dom

操作原生的Dom this.$refs.myDiv

// 涉及DOM類的操作
// this.$refs.myDiv.innerHTML = '哈哈呵呵';
複製程式碼

獲取標記元件物件 this.$refs.sub ,獲取元件的原生dom this.$refs.sub.$el Vue 例項使用的根 DOM 元素

// console.log('sub:',this.$refs.sub.$el);
//獲取元件物件，並獲取到其的DOM物件
this.$refs.sub.$el.innerHTML = '嘻嘻';
複製程式碼

5.Vue 其他例項屬性

vm.$data 資料物件可以讀寫
vm.$props props物件資料
vm.$el 根DOM 元素
vm.$options 方便獲取options.customOption
vm.$parent 獲取父例項
vm.$root 當前元件的根Vue
vm.$children 直接子例項s 陣列無序
vm. $slots 插槽內容講再父元件檔案內使用的時候子檔案雙標籤之間的內容，傳入子元件的顯示。`<slot></slot>` `vm.$ slots `最有幫助。
vm.$scopedSlots 作用域插槽 { [name: string]: props => VNode | Array<VNode> }
vm.$refs 獲取所有設定過ref的dom和元件
vm.$isServer 當前Vue是否執行於伺服器
vm.$attrs { [key: string]: string } 只讀不能寫入不被prop識別的屬性值
vm. $listeners 包含了父作用域中的 (不含 .native 修飾器的) `v-on 事件監聽器`。它可以通過 `v-on="$ listeners"` 傳入內部元件——在建立更高層次的元件時非常有用。

6.Vue-router 路由

前端路由核心是錨點值的改變根據不同的值，渲染指定DOM的不同資料window.addEventListener(hasCahnged,function) 監聽路由的雜湊值的改變

//監視錨點值的改變

window.addEventListener('hashchange', function() {
    var text = '';
    switch (location.hash) {
        case '#/music':
            text = '各種音樂的資料';
            break;
        case '#/movie':
            text = '各種電影的資料';
            break;
    }
    document.getElementById('content').innerHTML = text;
})
複製程式碼

在mian.js 中也可以在router/index.js 中
引入vue-router
全域性APIVue.use(VueRouter) 掛在屬性
建立VueRouter({options})例項

vue的option 中賦值路由規則

Vue.use(VueRouter); //掛載屬性
//建立路由物件並配置路由規則
let router = new VueRouter({
    //routes
    routes: [
        //一個個物件
        { path: '/home', component: Home }
    ]
});
//new Vue 啟動
new Vue({
    el: '#app',
    //讓vue知道我們的路由規則
    router: router, //可以簡寫router
    render: c => c(App),
})
複製程式碼

路由引數在初始化routers 路徑陣列。裡面是一個一個路由物件{name:'name',path:'/lisl',component:例項}
路由引數查詢字串方式傳引數 path:'/detail'
- 瀏覽器url是 /detail? xxx = xx & xxx = xxx 查詢多少字串都不用修改path
- 父元件傳引數方式使用query
  - 在html內 <router-link :to="{name:detail,query:{id:index}}"></router-link>
  - 在js中使用this.$router.push({name:detail,query:{id:index}})
  - 子元件獲取引數方式使用this.$router.query
以path拼接的方式使用 path:'/detail/:id'
- 瀏覽器的Url是/detail/12
- 父元件傳引數使用pramas
  - 在html 中使用<router-link :to="{name:detail,pramas:{id:index}}"></router-link>
  - 在js中使用
```
this.$router.push('/detail/'+ index)
this.$router.push({
    name:detail,
    pramas:{
        id:index
    }
})
複製程式碼
```
- 自元件獲取引數 this.$router.prams
路由歷史記錄this.push 路徑是放入棧裡 this.$router.go(-1) -1是上一個，+1是下一個。

404介面，匹配路由找不到

{path:'*',compoent:NotFound}
複製程式碼

多元件介面

一個介面多個佔位路由，再main.js介面一個路由物件的components有多個元件

key：value key 是對應試圖的name屬性， value是要顯示的元件物件

routes: [{
        path: '/',
        components: {
            header: footer,
            default: header,
            footer: footer
            }
        }
複製程式碼

在入口頁寫三個router-view 沒有name取default

<!-- 留坑，非常重要 坑名-->
<router-view class="b" name="header"></router-view>
<router-view class="b" ></router-view>
<router-view class="b" name="footer"></router-view>
複製程式碼

7.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>

8.命名路由

需求，通過a標籤點選，做頁面資料的跳轉
使用router-link標籤
- 1:去哪裡 <router-link to="/beijing">去北京</router-link>
- 2:去哪裡 <router-link :to="{name:'bj'}">去北京</router-link>
  - 更利於維護，如果修改了path，只修改路由配置中的path，該a標籤會根據修改後的值生成href屬性

9.引數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

10.巢狀路由

用單頁實線多頁應用，複雜的巢狀路由試圖中包含試圖，點選能切換部分View，可以結合路由使用
路由包含路由父子關係

初始化VueRouter({})

第一個路由物件 app.vue 預設的啟動路由，<router-view></router-view>
```
{
  path: '/',
  redirect: { name: 'music' },
},
複製程式碼
```

第二個路由物件有兩個子路由 childern

pathshi

{
    name: 'music',
    path: '/music',
    component: Music,
    children: [
        //-> 這裡很靈活，如果你寫上/xxx  就是絕對路徑， /oumei
        //如果你不寫/  ,那麼就是相對路徑 /music/oumei
        { name: 'music_oumei', path: 'oumei', component: Oumei },
        //name標識一下，當前路由之間的關係，格式不是必須的
        { name: 'music_guochan', path: 'guochan', component: Guochan }
    ]
}
複製程式碼

11 VueResource 網路請求

npm install vue-resource
引入 import VueResource from 'vue-resource'
Vue掛載屬性 Vue.use(VueResouce) 通過 this.$http使用
使用程式碼網路請求

this.$http.post('urlstring',{},{}).then(res=>{},errr=>{})
post中第一個引數URL，第二個是post傳的引數，第三個引數是配置項類似`emulateJSON:true`
複製程式碼

12 Axios 網路請求

npm install axios
掛在屬性 Vue.prototype.$axios = Axios
get請求
- this.$axios.get(url,options)
- get() 第一個引數URL，第二個引數傳送的引數，第三個可以設定baseUrl其他選項
```
this.$axios.get('url',{pramas:{},baseURL:'https"//'}).then(res=>{}).catch(error=>{})
複製程式碼
```
post請求
- this.$axios.post(url,data,options)
- post() 第一個引數是URL，第二個{} 中的請求的引數健值對，第三個是請求的設定項 {heasers:{}}
```
this.$axios.post('url',{},{headers:{}}).then(res=>{}).catch(error=>{})
複製程式碼
```