vue的基础用法（3）

最新推荐文章于 2025-02-17 10:31:47 发布

Not Souls

最新推荐文章于 2025-02-17 10:31:47 发布

阅读量239

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/NewSouls/article/details/108132578

版权

vue的基础用法（3）

计算属性中的get和set
生命周期钩子
vue-resource
vue里的单个元素动画
vue里的列表动画（transition-group）
axios的基本使用

计算属性中的get和set

在vue的计算属性中，所定义的都是属性，可以直接调用

正常情况下，计算属性中的每一个属性对应的都是一个对象，对象中包括了set方法与get方法

computed:{
    fullNname:{
        set:function(newValue){
            console.log(newValue)
        }
        get:function(){
            console.log(this.name)
        }
    }
}

而绝大多数情况下，计算属性没有set方法，是一个只读属性

此时计算属性可以简写

computed:{
    fullName:function(){
        console.log(this.name)
    }
}

生命周期钩子

生命周期图示在这里插入图片描述
涉及钩子函数的有：

最最完整的关于生命周期的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue生命周期学习</title>
  <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{message}}</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: 'Vue的生命周期'
    },
    beforeCreate: function() {
      console.group('------beforeCreate创建前状态------');
      console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
      console.log("%c%s", "color:red","message: " + this.message) 
    },
    created: function() {
      console.group('------created创建完毕状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //undefined
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化
    },
    beforeMount: function() {
      console.group('------beforeMount挂载前状态------');
      console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
      console.log(this.$el);
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
    },
    mounted: function() {
      console.group('------mounted 挂载结束状态------');
      console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
      console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
    },
    beforeUpdate: function () {
      console.group('beforeUpdate 更新前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);   
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    updated: function () {
      console.group('updated 更新完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el); 
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    beforeDestroy: function () {
      console.group('beforeDestroy 销毁前状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);    
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message); 
    },
    destroyed: function () {
      console.group('destroyed 销毁完成状态===============》');
      console.log("%c%s", "color:red","el     : " + this.$el);
      console.log(this.$el);  
      console.log("%c%s", "color:red","data   : " + this.$data); 
      console.log("%c%s", "color:red","message: " + this.message)
    }
  })
![屏幕快照 2018-07-28 下午1.55.40.png](https://upload-images.jianshu.io/upload_images/13263206-520675dfb8c9fc03.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</script>
</html>

vue-resource

vue.js的一个插件
作用 : 就是发送网络请求
和jQuery相比功能更加纯粹(只做一件事)

发送请求  是通过向vue的实例化对象里面添加$http属性  调用get方法
可以发送get请求 post请求  还可以请跨域资源

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
const app = new Vue({
        el: "#app",
        data: {
            weatherList: []
        },
        methods: {
            search() {
                // GET /someUrl
                this.$http.get('http://wthrcdn.etouch.cn/weather_mini?city=武汉').then(
                    response => {
                        // get body data
                        console.log(response);
                        this.weatherList = response.body.data.forecast;

                    }, error => {
                        // error callback
                        console.log(error);
                    });
            }
        },
    })
</script>

vue里的单个元素动画

1.如果元素切换需要动画需要切换的元素必须用transition标签包裹
2.transition标签里面必须有name属性和样式进行关联
3.动画的类名 Vue一斤封装好了会动态的添加和删除不需要手动操作
4.如果需要其他的动画去调整css样式

<div id="app">
        <input type="button" @click="isShow = !isShow" value="切换">
        </input>
        <transition name="fade" @after-enter="afterEnter" @after-leave="afterLeave">
            <img src="./imgs/1.jpg" v-show="isShow" alt="">
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    /*
    vue动画豆子   回调函数
    让开发人员在动画播放的特定时期执行自定义逻辑

    after-enter
    after-learve
    这些钩子绑定的元素是  transition标签
    函数定义有一个形参   是操作的dom元素
    动画钩子是vue里面定义好的   我们不能随便修改
    */
    const app = new Vue({
        el: "#app",
        data: { isShow: true },
        methods: {
            afterEnter(el) {
                console.log(el);
                console.log("afterEnter");
                el.src = "./imgs/2.jpg"
            },
            afterLeave(el) {
                console.log(el);
                console.log("afterLeave");

            }
        },
    })
</script>

vue里的列表动画（transition-group）

注意点:
1.他的子元素里面必须要有key属性
2.key必须具有唯一性而且里面只能设置字符串或者数字
3.transition-group会自动生成包裹的标签如果不写默认生成span标签
4.列表动画也支持vue的动画钩子

<div id="app">
        <input type="button" value="点我添加" @click="add">
        <transition-group name="list" tag="ul" @after-enter="afterEnter">
            <li v-for="(item,index) in numList" :key="index">
                {{item}} </li>
        </transition-group>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
        el: "#app",
        data: {
            numList: []
        },
        methods: {
            add() {
                this.numList.push(Math.floor(Math.random() * 100))
            },
            afterEnter(el) {
                console.log(el);

            }
        },
    })
</script>

axios的基本使用

最初的样子

<script>
const app = new Vue({
    el: "#app",
    data: {
      // 天气列表
      weatherList: [],

      // 查询的地点
      query: "",
      // 控制遮罩层显示隐藏
      isShow: false
    },

    methods: {
      search() {
        this.isShow = true;

        // 清空weatherList
        this.weatherList = [];

        this.$http.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.query}`).then(res => {
          console.log(res);

          // setTimeout(function() {
          setTimeout(() => {
            // 关闭遮罩层
            this.isShow = false;
          }, 1000)


          // 获取数据
          this.weatherList = res.body.data.forecast
        }, err => {
          console.log(err);
        })
      }
    },
    </script>

改成axios的样子

    <div id="app">
        <!-- <input type="button" value="查天气" @click="search"> -->
        <!-- <input type="text" v-model="query"> -->
        <p>{{weatherList}}</p>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            query: "武汉",
            weatherList: []
        },

        // 遭页面加载完成之后  就直接获取数据
        created() {
            axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.query}`)
                .then(response => {
                    // 处理请求成功之后的响应体
                    console.log(this);
                    console.log(response);
                    this.weatherList = response.data.data.forecast;
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                })
        },
    })
</script>