vue基础常用语法及axios接口请求
作者：陶宁
邮箱：taoning@haomo-studio.com
更改历史
* 2021-06-22 陶宁 初始化文档
插值操作
Mustache 语法(Mustache 语法又叫胡子语法，或者双大括号),数据都是响应式的
“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。
<div id="app">
<h2></h2>
<h2>NaN</h2>
<h2>NaN</h2>
<h2>undefined undefined</h2>
<h2></h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "aqing",
firstName: "柯",
lastName: "南",
m: 100
}
})
</script>
基本常用指令
vue指令：通常指令（Directives）是指带有v-属性的特殊属性。以下着重介绍一些常用的
v-on 事件监听
```javascript
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
btnclick1() {
console.log("按钮1");
},
btnclick2(ab) {
console.log(ab);
},
btnclick3(ab, event) {
console.log(ab + "============" + event);
}
}
})
</script>
延伸： **事件修饰符**
在某些情况下，我们拿到 event 的目的可能是进行一些事件处理。
Vue 提供了修饰符来帮助我们方便的处理一些事件：
```html
<!--停止冒泡-->
<button @click.stop="doThis"></button>
<!--阻止默认行为-->
<button @click.prevent="doThis"></button>
<!--阻止默认行为，没有表达式-->
<form @submit.prevent></form>
<!--串联修饰符-->
<button @click.stop.prevent="doThis"></button>
<!--键修饰符，键别名-->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码-->
<input @keyup. 13="onEnter">
<!--点击回调只会触发一次-->
<button @click.once="doThis"></button>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
v-if v-else-if v-else 条件渲染
v-if、v-else-if、v-else这三个指令与 JavaScript 的条件语句 if、else、else if 类似。 Vue 的条件指令可以根据表达式的值在 DOM 中渲染或销毁元素或组件
v-if 的原理：v-if 后面的条件为 false 时，对应的元素以及其子元素不会渲染。 也就是根本没有不会有对应的标签出现在 DOM 中。
<div id="app"> <div v-if="score>=90">优秀</div> <div v-else-if="score>=60">及格</div> <div v-else-if="score>=60">及格</div> <div v-else>不及格</div> </div> <script src="../js/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { score: 98 } }) </script>v-show
v-show 和 v-if 的用法类似，都是决定一个页面是否被渲染。
区别：
v-if 当条件为 false 时，压根不会有对应的元素在 DOM 中。 v-show 当条件为 false 时，仅仅是将元素的 display 属性设置为 none 而已。开发中如何选择呢？
当需要在显示与隐藏之间切片很频繁时，使用 v-show。
当只有一次切换时，通过使用 v-if。
v-for 循环遍历
当我们有一组数据需要进行渲染时，我们就可以使用 v-for 来完成。
遍历的时候没有下标值的情况
<li v-for="item in arr"></li>遍历的时候有下标值的情况
<li v-for="(item,index) in arr">-</li>如果在遍历对象的时候，只有一个值，那么这值就是 value
<li v-for="(value) in obj"></li> 遍历对象时，也可以获取 key 值，格式：(value,key)
<li v-for="(value,key) in obj">-</li>遍历对象时，也可以获取下标值，格式：(value,key，index)
<li v-for="(value,key,index) in obj">--</li>
补充： 检测数组更新
因为 Vue 是响应式的，所以当数据发生变化时，Vue 会自动检测数据变化，视图会发生对应的更新。Vue 中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。
methods: { updateData: function o { // 1.push方法 this.names.push( ' why ' , 'zs ') // 2.pop方法 this.names.pop(); // 3.unshift方法 this.names.unshift( ' why ' , 'zs ') //4.shift方法 this.names.shift() // 5.splice方法 //传递一个参数(index):将对应index，以及后面的所有数据删除掉 this.names.splice(2) //6.sort排序数据 this.names.sort() //7.reverse反转数据 this.names.reverse() //不会修改 // this.names[1]= ' kobe' //通过下面的方法 this.names.splice(i,1,' kobe ') vue.set(this.names,1, ' kobe ' ) } }有一点要注意的是，通过数组的索引值来修改数组中的数据的时候，并不能使视图发生对应的更新。
v-model 表单绑定
表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。Vue 中使用 v-model 指令来实现表单元素和数据的双向绑定。
<div id="app"> <input type="text" v-model="message"> <h1></h1> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: "aqing" } }) </script>当我们在输入框输内容的时候，
因为 input 中的 v-model 绑定了 message，所以会实时将输入的内容传递给 message，则 message 发生变换，
当 message 放上变化的时候，因为上面我们使用 Mustache 语法，将 message 的值插入到 DOM 中，所以 DOM 会发生响应的改变。
因此，通过 v-model 实现了表单的双向绑定。
实例讲解：使用v-on v-if v-for v-model 实现一个登录，手机登录简单切换实例
vue 监听属性
watch
使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数 该方法可以不用绑定事件
```html
<div id="app"> <input type="text" v-model="firstname">+ <input type="text" v-model="lastname">= <input type="text" v-model="fullname"> </div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {},
watch: {
'firstname': function(newVal){
this.fullname = newVal + '-' + this.lastname
},
'lastname': function(newVal){
this.fullname = this.firstname + '-' + newVal
}
}
});
</script>
</body>
```
computed 计算属性
注意1： 计算属性，在引用的时候，一定不要加 () 去调用，直接把它当作普通 属性去使用就好了；
**注意2：** 只要 计算属性，这个 function 内部，所用到的 任何 data 中的数据发送了变化，就会立即重新计算 这个 计算属性的值
```html
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
},
methods: {},
watch: {},
computed: {
'fullname': function(){
return this.firstname + '-' + this.lastname
}
}
});
</script>
</body>
```
watch、computed和methods之间的对比
- computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
- methods方法表示一个具体的操作，主要书写业务逻辑；
- watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；
实例讲解：使用任意一个监听属性完善手机登录简单手机号验证实例
vue axios 接口请求
axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
发送GET请求
// created:vue生命周期中的钩子函数，在这个时间点，data中的数据已经注入到响应式系统中 created(){ axios.get('api/xxxxxxx',{ // 还可以直接把参数拼接在url后边 params:{ title:'xxx' } }).then(function(res){ this.goodsList = res.data; }).catch(function (error) { console.log(error); }); }发送POST请求
axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }).then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 注意: 如果发送请求时，发现传递的参数是对象，那么可用如下方式传参数 var params = new URLSearchParams(); params.append('title', 'xxx'); params.append('id',1); axios.post('/user', params) .then(function(res){}) .catch(function(error){});执行多个并发请求
//获得用户信息的请求 function getUserAccount() { return axios.get('/user/12345'); } //获取用户许可证的请求 function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all( [ getUserAccount(), getUserPermissions() ] ) .then(axios.spread(function (acct, perms) { //两个请求现已完成 }) );请求拦截器和响应拦截器
//请求拦截器 axios.interceptors.request.use( function (config) { // 在发送请求之前做些什么 return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); } ); //响应拦截器 axios.interceptors.response.use( function (config) { // 对响应数据做点什么 return config; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); } );Vue中axios在发送POST请求时，参数的处理
下载安装第三方模块 qs -> npm install qs --save-dev
处理方式
// 第一种: 直接在发送的时候，对数据进行qs.stringify处理 // 缺点: 如果项目大，有大量的请求需要发送，那么一个一个加会很麻烦 axios.post("/xxxxx", qs.stringify({ name, pwd })); // 第二种: 使用axios.create创建一个新的axios实例，统一对数据进行处理, 同时也要借助qs模块 const Axios = axios.create({ baseURL: '/api', transformRequest: [function (data) { const d = qs.stringify(data) return d; }] }) Axios.post("/xxxxx", { name, pwd });
拓展： Promise对象
实例讲解：使用axios完善登录的接口请求
课后练习：
完成一个简单的表格增删改查，使用mock.js模拟数据