1.组件的组成
<temmplata> <scrippt> <style>
2.组件的样式隔离
<style scoped>
3.dom元素的获取
定义：<div ref="scroll">
使用：this.$refs.scroll
4.生命周期钩子函数
创建前后：beforeCreate created(可以获取this)
渲染前后： beforeMount mounted(可以获取dom元素)
更新前后：beforeUpdate updatad(可以执行多次)
销毁前后：beforeDestroy(销毁前移除定时器) dastroyed
5.组件的运用
1.创建 xxx.vue的组件=》2.import xxx from "xxx.vue"导入
3.注册 components{xxx}=>4.使用组件<xxx></xxx>
6.组件传参
1.父传子：
父 属性的方式传 <child :gallery=“值”>
子 通过props 接收props:["gallery"]
2.子传父
子 发送事件的方式 this.$emit("事件名",事件的参数)
父 监听事件 <child v-on:事件名=“ ”>
7.引入外部插件的一般方法 swiper
1. 工作目录 安装 : myvue> npm install swiper -S
2. 使用的组件里面 导入mport Swiper from ‘swiper’
如果引入的目录没有./ ../等相对目录，那么就会从 node_module查找需要引用的内容
3 . 样式import ‘xxxxx/swiper.js’
4. dom 结构
.swiper-contianer => -- .swiper.wrappr=> --- .swiper-slide
5. 初始化swiper
new Swiper(‘.swiper-container’)
swiper组件是要操作dom的，我就应该在组件生命周期
mounted 完毕 取执行 初始化 swiper
8.单页面 SPA
特点：所有页面都集成在一个html文件里面 ；其他子页面，通过ajax取获取
通过浏览器地址栏参数（hash）的变化来进去页面页面间的切换
优点：
子页面加载速度快（页面中js第公用，css公用，html是渲染出来，）只要ajax加载一点json数据
模拟手机页面切换，
用户体验好
缺点：搜索引擎不友好（页面是动态加载出来）
9.路由
配置：{
path:'/',
// 路由对应的地址
name:'Home"
// 路由的名称
component:Home
// 路由对应的组件
// 如果浏览器地址栏hash值（#后面的值）对应的是当前的Path
// component 对应的组件就会被填充到 router-view这个内置组件里面。
}
路由页面配置：
创建组件 User.vue
-
在src/router/index.js
import User from User.vue
(导入组件)
- 配置路由
{
path:"/user",
name:"User",
component:User
}
- 添加导航 App.vue
<router-link to="/user">
组件内路由参数的获取
获取参数不带r
组件内路由参数的获取
获取参数不带r
路由参数
$route.params.id
查询参数
$route.query.名称
地址
$route.path
10.js 路由切换
$router.go() 跳转路由
$router.push() 切换到某个页面
$router.replace() 切换页面不留历史记录
11.router-link切换路由
to="/"
简单属性
:to="{name:'Home'}"
对象 -按路由名称
:to="{name:'Produce,params:{id:456}}"
对象带参数
:to="{path='/produce/xyz?from=中国'}"
path切换的参数配置就不启效果了
12.路由其他配置
重定向
{path:'a',redirect:'b'}
别名
{path:'/',alias:['/home','/main']}
404
{path:'*',component:NoMatch}
路由链接高亮
.router-link-exact-active
精确匹配
.router-link-active
匹配
13.路由的守卫页面进入离开前做些事情
全局守卫
beforeEach
所有页面进入天调用
回调函数参数
to 要去的页面路由
from 要离开的页面路由
next 下一步
next 一定要被调用
next(false) 不跳转
3.next() 直接进入to页面
3.next("/login") 进入登录页面
afterEach
所有页面离开调用
组件内部守卫
beforeRouteEnter 在路由进入前（this没有）
beforeRouteUpdate() 在路由更新前
beforeRouteLeave（）在路由离开前
路由独享守卫
14.路由的懒加载
component:()=>import(produce.vue)
produce.vue会被单独分割为一个js文件
当需要页面是才会加载这个页面
如果浏览器有空闲也会提前加载这个页面
component:()=>import(/* webpackChunkName: "category" */ 'produce.vue')
webpack魔法注释，会把当前js文件名称命为 category.js
15.vant
- 在项目目录安装 cd /vrouter
npm i vant -S
- main.js 导入
import Vant from ’vant‘;
import 'vant/lib/index.css'
Vue.use(Vant);
- 去官网粘贴代码修改参数
<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
获取文件 let file = this.$refs.file[0]
formData
let data = new FormData().append("file",file);
- 配置
let configs = {
headers:{'Content-Type':'multipart/form-data'}
}
- 请求
$http({
url,
data,
configs,
})
全局配置
作用：1. 方法修改请求域名，切换地址
- 省略了再每个ajax请求都需要去配置的事情
在 main.js配置
import axios from 'axios';
axios.defaults.baseURL = "http://520mg.com";
// 配置基础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") 效果一致的
