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)的变化来进去页面页面间的切换 优点: 1. 子页面加载速度快(页面中js第公用,css公用,html是渲染出来,)只要ajax加载一点json数据 2. 模拟手机页面切换, 3. 用户体验好 缺点:搜索引擎不友好(页面是动态加载出来) 9.路由 配置:{ path:'/', // 路由对应的地址 name:'Home" // 路由的名称 component:Home // 路由对应的组件 // 如果浏览器地址栏hash值(#后面的值)对应的是当前的Path // component 对应的组件就会被填充到 router-view这个内置组件里面。 } 路由页面配置: 1. 创建组件 User.vue 2. 在src/router/index.js import User from User.vue (导入组件) 3. 配置路由 { path:"/user", name:"User", component:User } 4. 添加导航 App.vue 组件内路由参数的获取 获取参数不带r 组件内路由参数的获取 获取参数不带r 路由参数 $route.params.id 查询参数 $route.query.名称 地址 $route.path $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 下一步 1. next 一定要被调用 2. 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 1. 在项目目录安装 cd /vrouter npm i vant -S 2. main.js 导入 import Vant from ’vant‘; import 'vant/lib/index.css' Vue.use(Vant); 3. 去官网粘贴代码修改参数 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"; // 配置基础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") 效果一致的10.js 路由切换