vue基础常用语法及axios接口请求

官网:https://haomo-tech.com

作者:陶宁

邮箱: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 来完成。

    1. 遍历的时候没有下标值的情况

      <li v-for="item in arr"></li>

    2. 遍历的时候有下标值的情况

      <li v-for="(item,index) in arr">-</li>

    3. 如果在遍历对象的时候,只有一个值,那么这值就是 value

      <li v-for="(value) in obj"></li>

    4. ​ 遍历对象时,也可以获取 key 值,格式:(value,key)

      <li v-for="(value,key) in obj">-</li>

    5. 遍历对象时,也可以获取下标值,格式:(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之间的对比

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

实例讲解:使用任意一个监听属性完善手机登录简单手机号验证实例


vue axios 接口请求

  • axios 简介

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

    1. 从浏览器中创建 XMLHttpRequest
    2. 从 node.js 发出 http 请求
    3. 支持 Promise API
    4. 拦截请求和响应
    5. 转换请求和响应数据
    6. 取消请求
    7. 自动转换JSON数据
    8. 客户端支持防止 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请求时,参数的处理

    1. 下载安装第三方模块 qs -> npm install qs --save-dev

    2. 处理方式

       // 第一种: 直接在发送的时候,对数据进行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对象

    promise对象的简单介绍


实例讲解:使用axios完善登录的接口请求


课后练习:

完成一个简单的表格增删改查,使用mock.js模拟数据