Vue入門筆記 day2

復(fù)習(xí)

  • Vue單文件方式 xxx.vue
  • 1：準(zhǔn)備好配置文件 package.json（包描述文件&&封裝命令 npm run dev）+ webapck.config.js（打包的配置文件）
  • 2：創(chuàng)建index.html（單頁應(yīng)用的頁）
  • 3：創(chuàng)建main.js（入口文件）
  • 4：引入vue和相關(guān)的文件xxx.vue
  • 5：new Vue(options)
  • 6：options（選項(xiàng)）
    • data
    • methods
    • components （組件內(nèi)聲明子組件）
    • props
  • 7：實(shí)例
    • 在組件內(nèi)（xxx.vue）中的this
    • new Vue()
    • 事件
      • this.$on(事件名，回調(diào)函數(shù)(參數(shù)))
      • this.$emit(事件名,數(shù)據(jù))
      • this.$once(事件名，回調(diào)函數(shù)(參數(shù))) 之觸發(fā)一次
      • this.off(事件名) 取消事件
  • 全局
    • Vue.component('組件名',組件對(duì)象) 在哪里都可以使用
  • 組件傳值
    • 父?jìng)髯?
      • 常量 title="xxx" 子組件聲明接收參數(shù) props:['xxx']
      • 變量 :title="xxx" 子組件聲明接收參數(shù) props:['xxx']
    • 子傳父 vuebus（只能是同一輛車）
      • 先停車到父組件 on一下
      • 再開車到子組件；’如果需要的話，emit一下，觸發(fā)上述事件的回調(diào)函數(shù)

過濾器

  • content|過濾器，vue中沒有提供相關(guān)的內(nèi)置過濾器，可以自定義過濾器
  • 組件內(nèi)的過濾器 + 全局過濾器
    • 組件內(nèi)的過濾器就是options中的一個(gè)filters的屬性（一個(gè)對(duì)象）
      • 多個(gè)key就是不同過濾器名，多個(gè)value就是與key對(duì)應(yīng)的過濾方式函數(shù)體
    • Vue.filter(名,fn)
  • 總結(jié)
    • 全局：范圍大，如果出現(xiàn)同名時(shí)，權(quán)力小
    • 組件內(nèi)：權(quán)力大，如果出現(xiàn)同名時(shí)，范圍小

獲取DOM元素

  • 救命稻草 前端框架就是為了減少DOM操所，但是特定情況下，也給你留了后門
  • 在指定元素上，添加ref='名稱A'
  • 在獲取的地方加入 this.$refs.名稱A
    • 如果ref放在了原生DOM元素上，獲取的數(shù)據(jù)就是原生DOM對(duì)象
      • 可以直接操作
    • 如果ref放在了組件對(duì)象上，獲取的就是組件對(duì)象
      • 1：獲取到DOM對(duì)象，通過this.refs.sub.$el,進(jìn)行操作
    • 對(duì)應(yīng)的事件
      • created 完成了數(shù)據(jù)的初始化，此時(shí)還未生辰DOM，無法操作DOM
      • mounted 將數(shù)據(jù)裝載到了DOM之上，可以操作DOM

mint-ui

  • 餓了么，element-ui在pc端使用的
  • mint-ui 基于 Vue.js 的移動(dòng)端組件庫
  • 注意：
    • 如果是全部安裝的方式
      • 1:在template中可以直接使用組件標(biāo)簽
      • 2:在script中必須要聲明，也就是引入組件對(duì)象（按需加載）

wappalyzer

vue-router

  • 前端路由 核心就是錨點(diǎn)值的改變，根據(jù)不同的值，渲染指定DOM位置的不同數(shù)據(jù)
  • ui-router：錨點(diǎn)值改變，如何獲取模板？ajax
  • vue中，模板數(shù)據(jù)不是通過ajax請(qǐng)求來，而是調(diào)用函數(shù)獲取到模板內(nèi)容
  • 核心：錨點(diǎn)值改變
  • 以后看到vue開頭，就知道必須Vue.use()
  • vue的核心插件
    • vue-router 路由
    • vuex 管理全局共享數(shù)據(jù)
  • 使用方式
    • 1：下載 npm install vue-router -S
    • 2：在main.js中引入 import VueRouter from 'vue-router'
    • 3：安裝插件 Vue.use(VueRouter)
    • 4：創(chuàng)建路由對(duì)象并配置路由規(guī)則
      • let router=new VueRouter({routers:[path:'/home',component:Home]})
    • 5：將其路由對(duì)象傳遞Vue的實(shí)例，options中
      • options 中加入 router:router
    • 6：在app.vue中留坑 <router-view></router-view>

vue-router

  • 需求：通過a標(biāo)簽點(diǎn)擊，做頁面數(shù)據(jù)的跳轉(zhuǎn)
  • 使用router-link標(biāo)簽
    • 1：去哪里 <router-link to="/beijing">去北京</router-link>
    • 2：去哪里 <router-link :to="{name:'bj'}">去北京</router-link>
      • 更利于維護(hù)，如果修改了path，只修改路由配置中的path，該a標(biāo)簽會(huì)根據(jù)修改后的值生成href屬性

eg
main.js

//引入Vue
import Vue from 'vue';
import VueRouter from 'vue-router';

//引入app.vue
import App from './components/app.vue';
import Music from './components/music.vue';
import Movie from './components/movie.vue';


//安裝插件

Vue.use(VueRouter); //掛載屬性

//創(chuàng)建路由對(duì)象并配置路由規(guī)則
let router = new VueRouter({
    //routers
    routes: [{
        name: 'music',
        path: '/music',
        component: Music
    }, {
        name: 'movie',
        path: '/movie',
        component: Movie
    }]
});

//new Vue
new Vue({
    el: '#app',
    //讓Vue知道路由規(guī)則
    router: router,
    render: c => c(App)
})

app.vue

<template>
    <div>
        <div class="h">
            頭部
            <!-- a標(biāo)簽 -->

            <a href="#/music">音樂</a>
            <a href="#/movie">電影</a>
            
            <!-- to:去哪里 -->
             
            <router-link :to="{name:'music'}">音樂</router-link>
            <router-link :to="{name:'movie'}">電影</router-link> 
            
            <!-- 也可以根路徑用 -->
             
            <router-link to="/music">音樂</router-link>
            <router-link to="/movie">電影</router-link> 
            
        </div>
        <router-view class="b"></router-view>
        <div class="f">底部</div>
    </div>
</template>
<script type="text/javascript">
export default {
    data() {
        return {

        }
    }
}
</script>
<style type="text/css" scoped>
.h {
    height: 100px;
    background: yellowgreen;
}

.b {
    height: 100px;
    background: skyblue;
}

.f {
    height: 100px;
    background: hotpink;
}
</style>

參數(shù) router-link

  • 在vue-router中，有兩大對(duì)象被掛載到了實(shí)例this
  • $router(只讀、具備信息的對(duì)象)、$router(具備功能函數(shù))
  • 查詢字符串
    • 1：去哪里<router-link :to="{name:'detail',query:{id:1}}">xxx</router-link>
    • 2：導(dǎo)航(查詢字符串path不用改){name: 'detail',path: '/detail',component: 組件}
    • 3：去了干嘛？獲取路由參數(shù)(要注意是query還是params)
      • this.$route.query.id
  • path方式
    • 1：去哪里<router-link :to="{name:'detail',params:{name:1}}">xxx</router-link>
    • 2：導(dǎo)航(path方式需要在路由規(guī)則上加上/:xxx)
    • {name: 'detail',path: '/detail/:name',component: 組件}
    • 3：去了干嘛？獲取路由參數(shù)(要注意是query還是params)
      • this.$route.params.name

編程導(dǎo)航

  • 不能保證用戶一定會(huì)點(diǎn)擊某些按鈕
  • 并且當(dāng)前操作，除了路由跳轉(zhuǎn)以外，還有一些別的附加操作
  • this.$router.go 根據(jù)瀏覽器記錄 前進(jìn)1 后退-1
  • this.$router.push(直接跳轉(zhuǎn)到某個(gè)頁面顯示)
    • push參數(shù)：
      • 字符串/xxx
      • 對(duì)象：{name:'xxx',query:{id:1},params:{name:2}}

復(fù)習(xí)

  • 過濾器，全局，組件內(nèi)
  • 獲取DOM元素，在元素上 ref="xxx"
  • 在代碼中通過this.$ref.xxx獲取其元素
    • 原生DOM標(biāo)簽獲取就是原生DOM對(duì)象
    • 如果是組件標(biāo)簽，獲取的就是組件對(duì)象 $el繼續(xù)再獲取DOM元素
  • 聲明周期事件(鉤子函數(shù))
    • created：數(shù)據(jù)的初始化，DOM沒有生成
    • mounted：將數(shù)據(jù)裝載到DOM元素上，此時(shí)有DOM
  • 路由
    • window.addEventListener('hashchange',fn)
    • 根據(jù)你放<router-link></router-link>作為DOM上的標(biāo)識(shí)
    • 最終當(dāng)錨點(diǎn)值改變觸發(fā)hashchange的回調(diào)函數(shù)，我們將指定的模板數(shù)據(jù)插入到DOM標(biāo)識(shí)上

重定向和404

  • 進(jìn)入后，默認(rèn)就是/
  • 重定向
    • {path:'/',redirect:'/home'}
    • {path:'/',redirect:{name:'home'}}
  • 404:在路由規(guī)則的最后一個(gè)規(guī)則
    • 寫一個(gè)很強(qiáng)大的匹配
    • {path:'*',component:notFoundVue}

多視圖

  • 以前可以一次放一個(gè)坑　對(duì)應(yīng)一個(gè)路由和顯示一個(gè)組件
    • 一次行為　＝　一個(gè)坑　＋　一個(gè)路由　＋　一個(gè)組件
    • 一次行為　＝　多個(gè)坑　＋　一個(gè)路由　＋　多個(gè)組件
  • components 多視圖 是一個(gè)對(duì)象 對(duì)象內(nèi)多個(gè)key和value
    • key 對(duì)應(yīng)視圖的name屬性
    • value 就是要顯示的組件對(duì)象
  • 多視圖name
    • <router-view></router-view> ->name就是default
    • <router-view name="xxx"></router-view> ->name就是xxx

嵌套路由

  • 用單頁去實(shí)現(xiàn)多頁應(yīng)用 復(fù)雜的嵌套路由
  • 開發(fā)中一般會(huì)需要使用
  • 視圖包含視圖
  • 路由父子及關(guān)系路由

    //其組件內(nèi)包含著第一層的router
    {
        name:'music',
        path:'/music',
        component:Music,
        children:[ //子路由的path /就是絕對(duì)路徑  不/就是相對(duì)路徑
            {name:'music.oumei',path:'oumei',component:Oumei},
            {name:'music.guochan',path:'guochan',component:Guochan}
            //name:'music_oumei',格式不固定，只是為了表明父子級(jí)關(guān)系
        ]
    }

vue-resource(了解)

  • 可以安裝插件，早期vue團(tuán)隊(duì)開發(fā)的插件
  • 停止維護(hù)了，作者推薦使用
  • options預(yù)檢請(qǐng)求，是當(dāng)瀏覽器發(fā)現(xiàn)跨域+application/json的請(qǐng)求，就會(huì)自動(dòng)發(fā)起
  • 并且發(fā)起的時(shí)候攜帶了一個(gè)content-type的頭

axios

  • 中文文檔1
  • 中文文檔2
  • post請(qǐng)求的時(shí)候，如果數(shù)據(jù)是字符串 默認(rèn)頭就是鍵值對(duì) 否則是對(duì)象就是application/json
  • this.$axios.get(url,options)
  • this.$axios.post(url,data,options)
  • this.$axios.get(url,options)
  • opions:{params:{id:1},headers:{'content-type':'xxx'}，baseURL：''}
  • 全局默認(rèn)設(shè)置 Axios.default.baseURL='xxx'
  • 針對(duì)當(dāng)前這一次請(qǐng)求的相關(guān)設(shè)置

如何練習(xí)

  • 1：路由核心
    • 路由基本使用
    • 任選一種路由參數(shù)的方式（查詢字符串）
    • 404（路由匹配規(guī)則）
    • 路由嵌套
    • 編程導(dǎo)航
  • 2：http請(qǐng)求
    • axios 發(fā)起get/post請(qǐng)求（300）
    • axios掛載屬性的方式 Vue.prototype.$axios=Axios
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • vue-cli搭建項(xiàng)目 確保安裝了node與npm 再目標(biāo)文件夾下打開終端 執(zhí)行cnpm i vue-cli -g...
    Akiko_秋子閱讀 3,281評(píng)論 1贊 22
  • 有一天晚上，中山區(qū)區(qū)長谷鐵請(qǐng)我和陳建祥喝酒，酒喝到半夜才結(jié)束。 我喝了很多酒，林大勇喝得更多，大勇的車只好由我開。...
    文人一ke閱讀 238評(píng)論 0贊 0
  • 最近學(xué)校經(jīng)常停水，沒了自來水，宿舍樓的洗澡房要炸鍋了。洗澡房的熱水成為大家洗澡刷牙洗臉的唯一水源，每個(gè)人手上一個(gè)...
    伯魚閱讀 395評(píng)論 0贊 1
  • 最近忙著搬家，整理收納，刷淘寶買東西，很充實(shí)。終于搬的差不多了，計(jì)劃本周一入住。媽媽和婆婆開始忙活開了，要按規(guī)矩來...
    恬隆閱讀 362評(píng)論 5贊 4