vue第四篇

1、Vue实例的属性的使用

(1)属性watch

// 语法:
watch:{
	'键是要监听的数据':数据变化时的处理函数(newval, oldval)
}

用watch属性监听data上数据的变化：

名称案例：

watch:{
    'firstname':function(newval, oldval){
        this.fullname = newval + '-' + this.lastname;
    },
    'lastname':function(newval, oldval){
        this.fullname = this.firstname + '-' + this.lastname;
    },
}

传统方式实现：双向数据绑定+事件监听（文本框的change|keyup事件）

用watch属性监听虚拟数据的变化，如：监听URL地址的改变：

watch:{                
   '$route.path':function(newval){
        if(newval === '/login'){
            this.msg="欢迎进入登录页面";
        }else if(newval === '/reg'){
            this.msg="欢迎进入注册页面";
        }
   }
}

注意：

• 刷新不会触发'$route.path'的改变事件，不能使msg被赋予新值

解决刷新问题：

created() { // created生命周期函数，在页面刚被打开的时候会执行，同时，页面被刷新也会执行
   const path = this.$route.path;
   if (path === '/login') {
       this.msg = "欢迎进入登录页面";
   } else if (path === '/reg') {
       this.msg = "欢迎进入注册页面";
   }
}

(2)computed属性：

computed可以定义一些函数，这些函数叫做计算属性

• 只要data中的数据发生改变，computed会同步改变（ 只要在计算属性的function中，所依赖的任何数据发生变化时，就会触发计算属性的重新求值），提高了性能
• 引用计算属性时不要加()，应当成普通属性使用
• computed多用在模板
• computed和watch的特点：
• computed需要主动调用，它具有缓存能力，只有数据再次改变才会被重新渲染，否则就会直接拿取缓存中的数据
• watch无论在哪只要被绑定数据发生变化watch就会被触发，适合在异步操作上使用

computed:{ // 计算属性区域
    'fullname':function(){ // fullname就是计算属性
         // firstname或lastname改变时(fullname依赖于firstname和lastname的改变)，fullname都要被重新计算
         return this.firstname + '-' + this.lastname;
    }
}

(3)计算属性的get和set：

computed:{ // 计算属性区域
    'fullname':{
        get(){  // get表示外界要引用fullname的值，即firstname和lastname改变时，fullname被赋值
         	return this.firstname + '-' +  this.lastname;
        },
        set(val){  // set表示外界重新为fullname赋值
            const parts = val.split('-');
            this.firstname = parts[0];
            this.lastname = parts[1];
		}
    }
}

2、methods、computed、watch的对比

• methods方法表示一个具体操作，主要书写业务逻辑
• computed属性的结果会被缓存，除非依赖的响应式属性才会重新计算，主要当作属性来使用
• watch是一个对象，键是需要观察的表达式，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看成computed和methods的结合体

3、webpack

（1）webpack的简单使用

新建文件夹后
1.npm init -y 初始化项目
2.创建src、dist及src下的main.js(项目入口文件)、index.html、index.js文件
3.cnpm install jquery -S
4.npm install webpack webpack-cli -d 安装 webpack 和 weback-cli
5.npx webpack ./src/main.js -o ./dist/bundle.js --mode development打包

优化1：
1.在更目录下配置文件webpack.config.js的书写：

const htmlWebpackPlugin = require('html-webpack-plugin') // 导入的是构造函数
module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
}

2.npx webpack server --mode development打包（与下一个优化的命令的效果一致）

优化2：实时编译：
1.cnpm install webpack-dev-server -D安装webpack-dev-server工具
2.将命令写入package.json：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack server --mode development"
  },

3.npm run dev启动服务
注意：

• webpack-dev-server打包出来的bundle.js/main.js并没有放到实际的物理磁盘中，而是托管到内存中！

（2）使用html-webpack-plugin插件配置启动页面

即怎么把页面也托管到内存中？
插件的作用：

• 能够根据给定的页面路径，在内存中生成一个一模一样的页面
• 能够托管到内存中的页面中，自动把打包好的bundle.js文件，注入为一个script标签

配置插件：
1.cnpm install html-webpack-plugin -D安装操作html的webpack的插件（安装到本地的开发依赖）
2.在配置文件中导入把html页面生成到内存中的插件：

const htmlWebpackPlugin = require('html-webpack-plugin') // 导入的是构造函数

3.在配置文件的配置对象中，新增一个plugins插件节点：

plugins:[   // 插件的数组
   new htmlWebpackPlugin({  // 创建一个把html首页托管到内存中的插件
   	   template:path.join(__dirname,'./src/index.html'), // 要把哪个html页面，作为模板，复制一份托管到内存中
  	   filename:'index.html'  // 指定将来在内存中复制出来的页面，名称是 index.html
   })
]

（3）webpack-dev-server设置指令：

方式一：直接在package.json的dev脚本后，添加相关的 --指令即可

"dev": "webpack server --mode development --open --port 3000 --host 127.0.0.1 --hot"

• mode：在开发时使用 webpack 打包后不压缩，所以只需要在 webpack 打包命令中加上 --mode development 即可；如果没有 --mode development 就会自动使用 production 模式，所有打包的代码将会是压缩过的，没办法调试
• open：自动打开页面
• port：指定托管端口号
• host：指定托管地址
• hot：实现热更新，不再生成bundle.js，而是补充一些插件，提高编译效率

方式二：在配置文件中添加devServer（不推荐）

devServer:{// 配置webpack-dev-server运行时的指令
   open:true, 
   port:3000,
   host:'127.0.0.1',
   hot:true
   // 旧版本中这里的hot还需要配合一个热更新的插件使用，但是新版本中不需要
    }

（4）webpack打包css、less、scss文件

4、axios的基本使用（复习）

请求方式一:axios(config)可通过设置一些属性来发送请求

axios({
     	method:'get',  // 默认get请求
     	url:'https://autumnfish.cn/api/joke',
		data:{}
	}).then(res=>{
     	console.log(res);
	}).catch(err=>{
     	console.log(err);
})

请求方式二：axios.get(url [,config])|axios.post(url [,data [,config]])

axios.get('https://autumnfish.cn/api/joke').then(res=>{
      console.log(res);
   }).catch(err=>{
      console.log(err);
})
axios.get('http://wthrcdn.etouch.cn/weather_mini',{
	params:{
		city:'成都'
	}  // 针对get的请求参数
}).then(res=>{
      console.log(res);
   }).catch(err=>{
      console.log(err);
})


axios.post(url地址,{
    name: 'Simon',
    age:18
}).then(res=>console.log(res))
.catch(err=>console.log(err));

注意：

• 引入第三方库解决参数格式的转码问题import qs from "qs"
• 一般将 form-data格式和json格式（?name=simon&age=18 与 {name:simon,age:18}）互相转换，请求参数出错时，可以往这个方向思考
• qs.stringify({ name: 'Simon',age:18})

请求方式三：axios.all(iterable)可实现发送多个请求，参数不一定是数组，只要有iterable接口就行，函数返回的是一个数组，axios.spread(callback)可用于将结果数组展开

axios.all([axios({
  url:'地址1'
}),axios({
  url: '地址2',
  pramas: {
    type: 'sell',
    page:1  
  }
})]).then(
   results =>{
		console.log(results)  这里results是一个数组[results[0],results[1]]
        console.log(results[0]) 要分开拿只能通过下标取出来
        console.log(results[1]) 
} 
// 或
//spread方法可以直接将results里的results[0]，results[1]分开 
   .then(axios.spread((results1, results2) => { 
    console.log(results1);
    console.log(results2)
}))

请求方式五：创建axios实例，可以创建多个不同的axios实例

const instance = axios.create({
    baseURL: '',
    timeout: 5000,
    headers: {'X-Custom-Header':'foobar'}
});
// instance的使用
instance.get('/user',{
    params:{ID:12345}
}).then(res=>console.log(res))
.catch(err=>console.log(err))

axios的全局配置，有多个请求有相同配置时可以使用全局配置

请求方式六：单独的一个main.js文件

（1）npm install axios --save 安装axios到项目中
（2）在入口文件（main.js）引入axios：

// 引入axios
import axios from 'axios'
// 使用axios
Vue.prototype.axios = axios;  // 把axios挂载到Vue的原型上

（3）在.vue文件中使用axios：

<script>
    export default{
        data(){
           return {}
        },
        mounted(){  // 测试
           this.axios.get('https://autumnfish.cn/api/joke').then(res=>{
               console.log(res);
           }).catch(err=>{
               console.log(err);
           })
        }
	}
</script>

5、拦截器（发送请求和接收数据之前做一个判断）