1.組件的組成
<temmplata>? <scrippt>? <style>
2.組件的樣式隔離
<style scoped>
3.dom元素的獲取
定義：<div ref="scroll">
使用：this.$refs.scroll
4.生命周期鉤子函數(shù)
創(chuàng)建前后：beforeCreate? ? ? ?created(可以獲取this)
渲染前后： beforeMount? ? ?mounted(可以獲取dom元素)
更新前后：beforeUpdate? ?updatad(可以執(zhí)行多次)
銷毀前后：beforeDestroy(銷毀前移除定時器)? dastroyed
5.組件的運用
? ? 1.創(chuàng)建 xxx.vue的組件=》2.import xxx from "xxx.vue"導(dǎo)入
? ? ? ?3.注冊 components{xxx}=>4.使用組件<xxx></xxx>
6.組件傳參
? ? ? ? 1.父傳子：
?父 屬性的方式傳 <child :gallery=“值”>
?子? 通過props 接收props:["gallery"]
? ? ? ? 2.子傳父
? ??子 發(fā)送事件的方式? ? ?this.$emit("事件名",事件的參數(shù))
? ? ?父 監(jiān)聽事件? ? <child v-on:事件名=“ ”>
7.引入外部插件的一般方法? swiper
????????1. 工作目錄 安裝? : myvue> npm install swiper -S
? ? ? ? ?2. 使用的組件里面 導(dǎo)入mport Swiper from ‘swiper’
? 如果引入的目錄沒有./? ? ../等相對目錄，那么就會從 node_module查找需要引用的內(nèi)容
? ? ? ? 3 . 樣式import? ‘xxxxx/swiper.js’
? ??????4. dom 結(jié)構(gòu)
????????????.swiper-contianer? =>? -- .swiper.wrappr=> --- .swiper-slide
????????5. 初始化swiper
????????????new Swiper(‘.swiper-container’)
????????????swiper組件是要操作dom的，我就應(yīng)該在組件生命周期
? ? ? ? ? ? ? ?mounted 完畢 取執(zhí)行 初始化 swiper
8.單頁面 SPA
特點：所有頁面都集成在一個html文件里面 窿给；其他子頁面，通過ajax取獲取
? ??????通過瀏覽器地址欄參數(shù)（hash）的變化來進去頁面頁面間的切換
優(yōu)點：
1. 子頁面加載速度快（頁面中js第公用墩新，css公用，html是渲染出來窟坐，）只要ajax加載一點json數(shù)據(jù)
2. 模擬手機頁面切換海渊，
3. 用戶體驗好
缺點：搜索引擎不友好（頁面是動態(tài)加載出來）
9.路由
配置：{
path:'/',
// 路由對應(yīng)的地址
name:'Home"
// 路由的名稱
component:Home
// 路由對應(yīng)的組件
// 如果瀏覽器地址欄hash值（#后面的值）對應(yīng)的是當(dāng)前的Path
//? component 對應(yīng)的組件就會被填充到 router-view這個內(nèi)置組件里面。
}
路由頁面配置：
1. 創(chuàng)建組件 User.vue
2. 在src/router/index.js
? ? import User from? User.vue
? (導(dǎo)入組件)
3. 配置路由
{
path:"/user",
name:"User",
component:User
}
4. 添加導(dǎo)航? App.vue
<router-link to="/user">
組件內(nèi)路由參數(shù)的獲取
獲取參數(shù)不帶r
組件內(nèi)路由參數(shù)的獲取
獲取參數(shù)不帶r
路由參數(shù)
$route.params.id
查詢參數(shù)
$route.query.名稱
地址
$route.path
10.js 路由切換
$router.go() 跳轉(zhuǎn)路由
$router.push() 切換到某個頁面
$router.replace() 切換頁面不留歷史記錄
11.router-link切換路由
to="/"
簡單屬性
:to="{name:'Home'}"
對象 -按路由名稱
:to="{name:'Produce,params:{id:456}}"
對象帶參數(shù)
:to="{path='/produce/xyz?from=中國'}"
path切換的參數(shù)配置就不啟效果了
12.路由其他配置
重定向
{path:'a',redirect:'b'}
別名
{path:'/',alias:['/home','/main']}
404
{path:'*',component:NoMatch}
路由鏈接高亮
.router-link-exact-active
精確匹配
.router-link-active
匹配
13.路由的守衛(wèi)頁面進入離開前做些事情
全局守衛(wèi)
beforeEach
所有頁面進入天調(diào)用
回調(diào)函數(shù)參數(shù)
to 要去的頁面路由
from 要離開的頁面路由
next 下一步
1. next 一定要被調(diào)用
2. next(false) 不跳轉(zhuǎn)
3.next() 直接進入to頁面
3.next("/login") 進入登錄頁面
afterEach
所有頁面離開調(diào)用
組件內(nèi)部守衛(wèi)
beforeRouteEnter 在路由進入前（this沒有）
beforeRouteUpdate() 在路由更新前
beforeRouteLeave（）在路由離開前
路由獨享守衛(wèi)
14.路由的懶加載
component:()=>import(produce.vue)
produce.vue會被單獨分割為一個js文件
當(dāng)需要頁面是才會加載這個頁面
如果瀏覽器有空閑也會提前加載這個頁面
component:()=>import(/* webpackChunkName: "category" */ 'produce.vue')
webpack魔法注釋哲鸳，會把當(dāng)前js文件名稱命為 category.js
15.vant
1. 在項目目錄安裝 cd /vrouter
npm i vant -S
2. main.js 導(dǎo)入
import Vant from ’vant‘;
import 'vant/lib/index.css'
Vue.use(Vant);
3. 去官網(wǎng)粘貼代碼修改參數(shù)
<van-nav-bar
? title="登錄"
? left-text=""?
? left-arrow
? @click-left="$router.go(-1)"?
/>?
4 審查元素 修改css
.van-nav-bar .van-icon{
? ? ? ? color:#777 !important;
? ? }
16.axios? ?http請求
axios
http請求
安裝
切換到項目目錄
cd /vrouter
cnpm install axios -S
掛載
main.js
import axios from 'axios'
Vue.prototype.$http = axios;
get
this.$http.get(url?page=1)
this.$http.get(url,params:{page：2})
post
this.$http.post(url,"k=v&k2=v2",{
"Content-Type":'application/x-www-form-urlencoded'
})
file
1. 獲取文件? let file = this.$refs.file[0]
2. formData
let data = new FormData().append("file",file);
3. 配置
let configs = {
? ? ? ? headers:{'Content-Type':'multipart/form-data'}
? ? ? }
4. 請求
$http({
? ? url,
? ? data,
? ? configs,
})
全局配置
作用：1. 方法修改請求域名臣疑，切換地址
2. 省略了再每個ajax請求都需要去配置的事情
在 main.js配置
import axios from 'axios';
axios.defaults.baseURL = "http://520mg.com";
// 配置基礎(chǔ)url
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 配置post編碼
// axios.defaults.withCredentials = true;
//跨域請求的全局憑證
// import axios from './assets/js/axios.min.js'
Vue.prototype.$http = axios;
//? 掛載axios到vue的原型公用方法上面
//? 所有vue的實例都將擁有$http
使用的時候
$http.get("/mi/list.php")
$http.get("http://www.520mg.com/mi/list.php") 效果一致的
