-
今日重点
* axios
* watch
* 计算属性
* 项目 - 路由操作的基本步骤
引入对象 import VueRouter from 'vue-router'; 安装插件 Vue.use(VueRouter); 挂载属性的行为 创建路由对象 let router = new VueRouter({ routes:[ { name:'xxx',path:'/xxx',组件 } ] }); 将路由对象放入到options中new Vue() new Vue({ router }) -
套路
- 1: 去哪里 <router-link :to="{name:'bj'}"></router-link>
- 2: 导航(配置路由规则) `{name:'bj',path:'/beijing',组件A}`
- 3: 去了干嘛(在组件A内干什么)
+ 在created事件函数中，获取路由参数
+ 发起请求，把数据挂载上去 -
参数
- 查询字符串（#/beijing?id=1&age=2）
+ 1: 去哪里 <router-link :to="{name:'bj',query:{id:1,age:2} }"></router-link>
+ 2: 导航(配置路由规则) `{name:'bj',path:'/beijing',组件A}`
+ 3: 去了干嘛(在组件A内干什么)
* `this.$route.query.id||age`
- path(#/beijing/1/2)
+ 1: 去哪里 <router-link :to="{name:'bj',params:{id:1,age:2} }"></router-link>
+ 2: 导航(配置路由规则) `{name:'bj',path:'/beijing/:id/:age',组件A}`
+ 3: 去了干嘛(在组件A内干什么)
* `this.$route.params.id||age` -
编程导航
- 一个获取信息的只读对象($route)
- 一个具备功能函数的对象($router)
- 根据浏览器历史记录前进和后台 `this.$router.go(1|-1);`
- 跳转到指定路由 `this.$router.push({ name:'bj' });` -
嵌套路由
- 让变化的视图(router-view)产生包含关系(router-view)
- 让路由与router-view关联，并且也产生父子关系 -
多视图
- 让视图更为灵活，以前一个一放，现在可以放多个，通过配置可以去修改 -
axios:
- 开始:
+ 跨域 + 默认的头是因为你的数据是对象，所以content-type:application/json
+ 有OPTIONS预检请求（浏览器自动发起）
- 最终:
+ 当我们调整为字符串数据，引起content-type变为了www键值对
+ 没有那个OPTIONS预检请求
- 总结： 跨域 + application/json 会引起OPTIONS预检请求，并且自定义一个头(提示服务器，这次的content-type较为特殊)，content-type的值
- 服务器认为这个是一次请求，而没有允许content-type的头，
- 浏览器就认为服务器不一定能处理掉这个特殊的头的数据
- 抛出异常
- 在node服务器 response.setHeader("Access-Control-Allow-Headers","content-type,多个");
- formdata的样子: key=value&key=value -
axios属性关系
- options: headers、baseURL、params
- 默认全局设置(大家都是这么用)
+ Axios.defaults-> options对象
- 针对个别请求来附加options
- axios.get(url,options)
- axios.post(url,data,options) -
axios
* 合并请求
* axios.all([请求1,请求2])
* 分发响应 axios.spread(fn)
* fn:对应参数(res)和请求的顺序一致
* 应用场景:
- 必须保证两次请求都成功，比如，分头获取省、市的数据
* 执行特点: 只要有一次失败就算失败，否则成功 -
拦截器
* 过滤，在每一次请求与响应中、添油加醋
* axios.interceptors.request.use(fn) 在请求之前
* function(config){ config.headers = { xxx }} config 相当于options对象
* 默认设置 defaults 范围广、权利小
* 单个请求的设置options get(url,options) 范围小、权利中
* 拦截器 范围广、权利大 -
拦截器案例
-
目录结构
-
app.vue
<template> <div> {{data}} </div> </template> <script> export default { data(){ return { data:[] } },created(){ //拦截器对每一次请求都有效 this.$axios.get('getcomments/300?pageindex=1',{ headers:{ accept:'get' } }) .then(res=>{ console.log(res); }) .catch(err=>{ console.log(err) }) this.$axios.get('getcomments/300?pageindex=1') .then(res=>{ console.log(res); }) .catch(err=>{ console.log(err) }) } } </script> <style scoped> .h{ height: 100px; background-color: yellowgreen; } .b{ height: 100px; background-color: skyblue; } .f{ height: 100px; background-color: hotpink; } </style> -
index.html
<html> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head> <body> <div id="app"></div> </body> </html> -
main.js
//引入一堆 import Vue from 'vue'; //主体 import App from './components/app.vue'; //引入 import Axios from 'axios'; Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/'; //默认设置 Axios.defaults.headers = { accept: 'defaults' } //拦截器 Axios.interceptors.request.use(function(config) { //console.log(config); //return false; //返回没有修改的设置,不return config 就是一个拦截 //个性化的修改 // config.headers.accept = 'interceptors'; config.headers = { accept: 'interceptors' } return config; }) -
package.json
{ "name": "webpack_class", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev":".\\node_modules\\.bin\\webpack-dev-server --inline --hot --open --port 8888", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer-loader": "^3.2.0", "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.24.1", "css-loader": "^0.28.4", "file-loader": "^0.11.2", "less": "^2.7.2", "less-loader": "^4.0.5", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "vue-loader": "^13.0.4", "vue-template-compiler": "^2.4.2", "webpack": "^3.4.1", "webpack-dev-server": "^2.6.1" }, "dependencies": { "html-webpack-plugin": "^3.2.0", "vue": "^2.4.2" } } -
webpack.config.js
const htmlWebpackPlugin = require('html-webpack-plugin'); const path = require('path') module.exports = { entry:{ //main是默认入口,也可以是多入口 main:'./src/main.js' }, //出口 output:{ filename:'./build.js', //指定js文件 path: path.join(__dirname,'dist') //最好是绝对路径 //代表当前目录的上一级的dist }, module:{ //一样的功能rules: webpack2.x之后新加的 loaders:[ //require('./a.css||./a.js') {test:/\.css$/, loader:'style-loader!css-loader', //顺序是反过来的2!1 }, { test:/\.(jpg|svg|png|gif)$/, loader:'url-loader?limit=4096&name=[name].[ext]', //顺序是反过来的2!1 //[name].[ext]内置提供的，因为本身是先读这个文件 // options:{ // limit:4096, // name:'[name].[ext]' // } },{//处理ES6的js test:/\.js$/, loader:'babel-loader', //排除 node_modules下的所有 exclude:/node_modules/, options:{ presets:['es2015'],//关键字 plugins:['transform-runtime'],//函数 } },{//解析vue test:/\.vue$/, loader:'vue-loader',//vue-template-compiler是代码上的依赖 } ] }, plugins:[ //插件的执行顺序是依次执行的 new htmlWebpackPlugin({ template:'./src/index.html', }) //将src下的template属性描述的文件根据当前配置的output.path，将文件移动到该目录 ] } -
进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev
-
token(扩展)
* cookie 和session的机制，cookie自动带一个字符串
* cookie只在浏览器
* 移动端原生应用，也可以使用http协议，1:可以加自定义的头、原生应用没有cookie
* 对于三端来讲，token可以作为类似cookie的使用，并且可以通用
* 拦截器可以用在添加token上 -
拦截器操作loadding
* 在请求发起前open，在响应回来后close -
loadding案例
-
目录
-
app.vue
<template> <div> <button @click="send">发请求1</button> <button @click="send2">发请求2</button> </div> </template> <script> export default { data(){ return { data:[] } },created(){ }, methods:{ send(){ //拦截器对每一次请求都有效 this.$axios.get('getcomments/300?pageindex=1',{ headers:{ accept:'get' } }) .then(res=>{ console.log(res); }) .catch(err=>{ console.log(err) }) }, send2(){ //拦截器对每一次请求都有效 this.$axios.get('getlunbo',{ headers:{ accept:'get' } }) .then(res=>{ console.log(res); }) .catch(err=>{ console.log(err) }) } } } </script> <style scoped> .h{ height: 100px; background-color: yellowgreen; } .b{ height: 100px; background-color: skyblue; } .f{ height: 100px; background-color: hotpink; } </style> -
index.html
<html> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head> <body> <div id="app"></div> </body> </html> -
main.js
//引入一堆 import Vue from 'vue'; //主体 import App from './components/app.vue'; //引入 import Axios from 'axios'; //引入mint-ui import Mint from 'mint-ui'; // export default 整个对象 // import { Indicator } from 'mint-ui'; //export 整个对象.Indicator -> {Indicator} //引入css import 'mint-ui/lib/style.css'; //安装插件，注册一堆全局组件 Vue.use(Mint); Axios.defaults.baseURL = 'http://182.254.146.100:8899/api/'; //默认设置 Axios.defaults.headers = { accept: 'defaults' } //拦截器 Axios.interceptors.request.use(function(config) { Mint.Indicator.open(); //请求发起之前 显示loadding return config; }) Axios.interceptors.response.use(function(config) { //在响应回来之后，隐藏loadding Mint.Indicator.close(); // console.log(config); return config; }) //给Vue原型挂载一个属性 Vue.prototype.$axios = Axios; //new Vue 启动 new Vue({ el: '#app', render: c => c(App), }) -
package.json和webpack.config.js不变，进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev
-
监视
* watch 可以对（单个）变量进行监视，也可以深度监视
* 如果需求是对于10个变量进行监视？
* 计算属性computed 可以监视多个值，并且指定返回数据，并且可以显示在页面
* 都是options中的根属性
- watch监视单个
- computed可以监视多个this相关属性值的改变,如果和原值一样
- 不会触发函数的调用，并且可以返回对象 -
watch案例
-
目录
-
app.vue
<template> <div> <!-- <input type="text" name="" v-model="text"> {{text}} --> <button @click="changeValue">改变值</button> </div> </template> <script> export default { data(){ return { text:'', persons:[{ name:'jack' },{ name:'rose' }] } },created(){}, methods:{ changeValue(){ // this.text = 'abc'; this.persons[0].name = 'mick'; } }, watch:{ text:function(newV,oldV){ console.log('值改变了，很开心') }, persons:{ handler: function (val, oldVal) { console.log('person改变了。很开心') }, deep: true } } } </script> <style scoped> .h{ height: 100px; background-color: yellowgreen; } .b{ height: 100px; background-color: skyblue; } .f{ height: 100px; background-color: hotpink; } </style> -
insex.html
<html> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head> <body> <div id="app"></div> </body> </html> -
main.js
//引入一堆 import Vue from 'vue'; //主体 import App from './components/app.vue'; new Vue({ el: '#app', render: c => c(App), }) -
package.json和webpack.config.js不变，进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev
-
计算机属性案例
-
目录
-
app.vue
<template> <div> 单价:<input type="text" name="" v-model="price"> * 件数:<input type="text" name="" v-model="num"> * 折扣:<input type="text" name="" v-model="rate"> = {{sum.name}} {{sum.price}} </div> </template> <script> export default { data(){ return { price:0,num:0,rate:0 } },created(){}, methods:{}, computed:{ sum(){ console.log('触发了'); //如果当函数内涉及到的this.相关属性发生改变以后触发，并返回一个值(可以是对象) return { name:'古龙水', price:this.price * this.num * (this.rate/100) } } } } </script> <style scoped> .h{ height: 100px; background-color: yellowgreen; } .b{ height: 100px; background-color: skyblue; } .f{ height: 100px; background-color: hotpink; } </style> -
index.html
<html> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> </head> <body> <div id="app"></div> </body> </html> -
main.js
//引入一堆 import Vue from 'vue'; //主体 import App from './components/app.vue'; new Vue({ el: '#app', render: c => c(App), }) -
package.json和webpack.config.js不变，进入到目录下，进入cmd，执行npm install 安装package.jaon里面的模块产生node_modules目录。然后执行 npm run dev
-
相关命令
-
npm i mint-ui vue-preview axios vue-router monent vue - S; npm i webpack html - webpack - plugin css - loader style - loader less less - loader autoprefixer - loader babel - loader babel - core babel - preset - es2015 babel - plugin - transform - runtime url - loader file - loader vue - loader vue - template - compiler webpack-dev-server - D
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
