1.组件的组成
2.组件的样式隔离
3.dom元素的获取
定义:
使用: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.使用组件
6.组件传参
1.父传子:
父 属性的方式传
子 通过props 接收props:["gallery"]
2.子传父
子 发送事件的方式 this.$emit("事件名",事件的参数)
父 监听事件
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
组件内路由参数的获取
获取参数不带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);
- 去官网粘贴代码修改参数
title="登录" left-text="" left-arrow @click-left="$router.go(-1)" /> 4 审查元素 修改css .van-nav-bar .van-icon{ 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 = { $http({ }) 全局配置 作用:1. 方法修改请求域名,切换地址 在 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") 效果一致的 color:#777 !important;
}
headers:{'Content-Type':'multipart/form-data'}
}
url,
data,
configs,