Vue（五）计算属性、过滤器、axios、vue 生命周期_vue计算属性使用axios

最新推荐文章于 2024-11-19 12:44:27 发布

原创最新推荐文章于 2024-11-19 12:44:27 发布 · 281 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#c语言 #c++ #学习

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

      }
      return result;
    }
  }
})

```

效果如下：

二、过滤器

过滤器是专门对变量的原始值先加工再显示的一种特殊函数。

1. 使用方法

（1）创建过滤器函数

Vue.filter("过滤器名",function(旧值){
   return 新值
  })

（2）在页面中使用过滤器函数

<元素>{{变量名|过滤器名}}</元素>

//注意
//过滤器名用在{{}}内，所以如果过滤器名中包含多个单词应用驼峰命名

举例：使用过滤器过滤性别；

<body>
  <div id="app">
    <!--不想显示1和0，显示男和女-->
    <h3>性别: {{sex|sexFilter}}</h3>
  </div>
  <script>
    Vue.filter("sexFilter", function (oldVal) {
      return oldVal == 1 ? "男" : "女";
    })
    new Vue({
      el: "#app",
      data: {
        sex: 0
      }
    })
  </script>
</body>

效果如下：

2. 过滤器传参

//定义
Vue.filter("过滤器名",function(旧值, 自定义形参, ...){
    return 新值
  })

//使用 
<元素>{{变量名 | 过滤器名(实参值1, ...)}}</元素>

举例：使用过滤器显示不同的性别，可以选择不同的语言；

<body>
  <div id="app">
    <!--默认显示中文的男或女-->
    <h3>性别: {{sex|sexFilter("cn")}}</h3>
    <!--通过参数改为显示英文的男或女-->
    <h3>性别: {{sex|sexFilter("en")}}</h3>
    <!--通过参数改为显示中文的男或女-->
    <h3>性别: {{sex|sexFilter("cn")}}</h3>
  </div>
  <script>
    Vue.filter(
      "sexFilter",
      function (sex, language) {
        if (language == "en") {
          return sex == 1 ? "Male" : "FeMale"
        } else {
          return sex == 1 ? "男" : "女"
        }
      }
    )
    new Vue({
      el: "#app",
      data: {
        sex: 1
      }
    })
  </script>
</body>

效果如下：

3. 过滤器连用

//定义 
//充分考虑将来进入这个过滤器的旧值共有几种情况
Vue.filter("过滤器名",function(旧值,..){  })

//使用
<元素>{{变量 | 过滤器1 | 过滤器2 | ... }}</元素>

举例：给性别追加图标；

<body>
  <div id="app">
    <!--只显示图标-->
    <h3>性别: {{sex|sexIcon}}</h3>
    <!--默认显示中文+图标-->
    <h3>性别: {{sex|sexFilter|sexIcon}}</h3>
    <!--通过参数改为英文+图标-->
    <h3>性别: {{sex|sexFilter("en")|sexIcon}}</h3>
    <!--通过参数改为中文+图标-->
    <h3>性别: {{sex|sexFilter("cn")|sexIcon}}</h3>
  </div>
  <script>
    //过滤器sexIcon 控制图标
    Vue.filter("sexIcon", function (sex) {
      if (sex == 0) {
        return "♀"
      } else if (sex == 1) {
        return "♂"
      } else if (sex == "女" || sex == "male") {
        return sex + "♀"
      } else if (sex == "男" || sex == "Female") {
        return sex + "♂"
      }
    })
    //过滤器sexFilter 控制文字
    Vue.filter(
      "sexFilter",
      function (sex, language) {
        if (language == "en") {
          return sex == 1 ? "Male" : "Female"
        } else {
          return sex == 1 ? "男" : "女"
        }
      }
    )

    new Vue({
      el: "#app",
      data: {
        sex: 0
      }
    })
  </script>
</body>

效果如下：

三、axios

axios 是第三方开发的，专门发送 ajax 请求，基于 Promise 的函数库；只要在 vue 中发送 ajax 请求，一律用 axios。

axios的使用：

（1）配置服务器端接口地址的公共路径部分

axios.defaults.baseURL="http://服务器端基础地址部分"

（2）get 请求

axios.get("服务器端接口地址剩余相对路径部分",{
    params:{ 参数名: 参数值, ... : ... , ...  } 
  }).then(result=>{ 

})

//注意：
//.then后必须用箭头函数
//result不直接是响应结果，result.data才是真正的响应结果

（3）post 请求

axios.post(
	"服务器端接口地址剩余相对路径部分",
  	"参数名1=参数值1&参数名2=参数值2&..."
  ).then(result=>{
    console.log(result.data);
})

（4）运行时 axios 会自动将 baseURL和 get/post 中的相对路径拼接成接口的完整地址再发送请求。

举例：模拟访问器服务器相关数据；

<body>
  <script>
    //为所有请求配置公共基础路径
    axios.defaults.baseURL = "http://xzserver.com";
    //1. 请求首页商品对象
    axios.get("/index").then(result => {
      console.log(result.data);
    })
    //2. 查询5号商品的详细信息
    axios.get("/details", {
      params: {
        lid: 5
      }
    }).then(result => {
      console.log(result.data);
    })
    //3. 登录验证
    //（正确的用户名:dingding, 正确的密码:123456）
    axios.post("/users/signin", "uname=dingding&upwd=654321").then(result => {
      console.log(result.data);
    })
  </script>
</body>

请求结果如下：

需要特别注意： axios发送get请求和发送post请求的参数格式是不一样的。

四、vue的生命周期（高频笔试面试）

new Vue() 的加载过程是异步的，放在 new Vue() 之后的代码是无法保证在 vue 加载完之后才执行的，所以将来程序的主要流程和代码，都要写在 new Vue() 内部；

其实 new Vue() 和普通网页一样，在整个加载过程中也要经历多个阶段——生命周期。

1. vue生命周期四个阶段

必经阶段

（1）创建(create)阶段：创建data对象、访问器属性；

（2）挂载(mount)阶段：扫描真实DOM树，创建虚拟DOM树，并首次加载数据到页面显示；

不必经阶段

（3）更新(update)阶段：只当修改 data 中的变量，且影响页面显示时触发；

（4）销毁(destroy)阶段：只当主动调用 vm.$destroy() 函数后触发，只删除虚拟 DOM 树断开的 new Vue() 与页面之间的联系，但是 new Vue() 对象还在内存中。

*提示：主动调用 **vm. $d es t roy () * * 函数销毁后，可用 * * v m .$ mount(“#app”)*将断开的 new Vue() 和页面重新建立虚拟 DOM 树，重新绑定起来挂载界面。

2. 生命周期钩子函数（回调函数）

每个阶段前后，各有一对生命周期钩子函数，也就是回调函数。

new Vue({中

/*必经阶段*/
    beforeCreate(){...} //没data、访问器属性，没虚拟DOM树
  //创建(create)阶段
    created(){...} //有data、访问器属性，没虚拟DOM树
    beforeMount(){...} //有data、访问器属性，有虚拟DOM树，但页面内容未加载
  //挂载(mount)阶段
    mounted(){ ...} //有data、访问器属性和虚拟DOM树，页面内容也加载完成，new Vue()首屏加载完成

/*不必经阶段*/
    beforeUpdate(){...}
  //更新(update)阶段
    updated(){...}
    beforeDestroy(){...}
  //销毁(destroy)阶段
    destroyed(){...}

举例：触发 new Vue() 声明周期各个阶段；

<body>
  <div id="app">
    <h3>Welcome {{uname}}</h3>
    <!--显示学子商城首页6个商品的列表-->
    <ul>
      <li>
        编号 | 详细信息 | 单价
      </li>
      <li v-for="(p,i) of arr" :key="i">
        {{p.pid}}|{{p.details}}|¥{{p.price.toFixed(2)}}
      </li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        uname: "dingding",
        arr: []
      },
      /*必经阶段*/
      beforeCreate() {
        console.log(`创建阶段前自动触发...`)
      },
      created() { //模型对象创建后
        console.log(`创建阶段后自动触发...`)
      },
      beforeMount() {
        console.log(`挂载阶段前自动触发...`)
      },
      mounted() {
        console.log(`挂载阶段后自动触发...`)
      },
      /*不是必经阶段*/
      beforeUpdate() {
        console.log(`更新前自动触发...`)
      },
      updated() {
        console.log(`更新后自动触发...`)
      },
      beforeDestroy() {
        console.log(`销毁前自动触发...`)
      },
      destroyed() {
        console.log(`销毁后自动触发...`)
      }
    });
    //控制台中手写
    //触发更新阶段: 
    //vm.uname="丁丁"
    //触发销毁阶段:
    //vm.$destroy() //该函数只删除DOM树，解除new Vue()对象与界面之间的数据联系
    //销毁后重新绑定
    //vm.$mount("#app")
  </script>
</body>

效果如下：