ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue之生命周期钩子、axios的使用、计算属性、侦听属性

2022-05-03 15:01:26  阅读:129  来源: 互联网

标签:el vue console log 状态 name axios data 属性


目录

生命周期钩子

生命周期图

image

生命周期

钩子函数 描述
beforeCreate 创建Vue实例之前调用,data空的
created(重要) 创建Vue实例成功后调用(可以在此处发送异步请求后端数据)
beforeMount 渲染DOM之前调用
mounted(重要) 渲染DOM之后调用---》看到页面了,插值已经进去了
beforeUpdate 重新渲染之前调用(数据更新等操作时,控制DOM重新渲染)
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed(重要) 销毁之后调用

create

向后端发请求拿数据,发送ajax请求

let vm = new Vue()

update

let vm = new Vue({
    el: '#box',
    data: {
        isShow: true    // 修改这个内容
    },
    methods: {
        handleClick() {
            console.log('我是根组件')
        }
    }
})

bedoreCreate

beforeMount

mounted(用得最多)

定时任务,延迟任务 js中

beforeUpdate

updated

beforeDestroy

destroyed

组件销毁 - 给组件写一个定时器

setTimeout()    // 延迟3s干什么事(执行一次)
setInterval()    // 每3s干什么事(循环执行)

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <child v-if="isShow"></child>
    <br>
    <button @click="terminate">删除子组件</button>
    <button @click="reborn">显示子组件</button>
</div>
</body>
<script>
    Vue.component('child', {
        template: `
            <div>
                {{name}}
                <button @click="name='Darker1'">更新数据1</button>
                <button @click="name='Darker2'">更新数据2</button>
            </div>`,
        data() {
            return {
                name: 'Darker1',
            }
        },
        beforeCreate() {
            console.group('当前状态:beforeCreate')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        created() {
            console.group('当前状态:created')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        beforeMount() {
            console.group('当前状态:beforeMount')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        mounted() {
            console.group('当前状态:mounted')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
          //用的最多,向后端加载数据,创建定时器等
            console.log("页面已被vue实例渲染, data, methods已更新");
            console.log('mounted')
            this.t = setInterval(function () {
                console.log('daada')
            }, 3000)
          
        },
        beforeUpdate() {
            console.group('当前状态:beforeUpdate')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        updated() {
            console.group('当前状态:updated')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        beforeDestroy() {
            console.group('当前状态:beforeDestroy')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
        },
        destroyed() {
            console.group('当前状态:destroyed')
            console.log('当前el状态:', this.$el)
            console.log('当前data状态:', this.$data)
            console.log('当前name状态:', this.name)
          //组件销毁,清理定时器
            clearInterval(this.t)
            this.t = null
            console.log('destoryed')
        },


    })
    let vm = new Vue({
        el: '#box',
        data: {
            isShow: true
        },
        methods: {
            terminate() {
                this.isShow = false
            },
            reborn() {
                this.isShow = true
            }
        }
    })
</script>
</html>

组件

fetch和axios

axios与fetch实现数据请求

(1)fetch(不是所有浏览器都支持,谷歌浏览器支持)
XMLHttpRequest 是一个设计粗糙的 API,配置和调用方式非常混乱,而且基于事件的异步模型写起来不友好。 兼容性不好

fetche使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>fetch</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">

    <button @click="handleClick()">获取影片信息</button>
    <ul>
        <li v-for="data in datalist">
            <h3>{{data.name}}</h3>
            <img :src="data.poster"/>
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {
            datalist: []
        },
        methods: {
            handleClick() {
                //https://m.maizuo.com/v5/?co=mzmovie#/films/nowPlaying
                fetch("./json/test.json").then(res => res.json()).then(res => {
                    console.log(res.data.films)
                    this.datalist = res.data.films
                })
            }
        }
    })
</script>
</body>
</html>

axios的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios</title>
<script type="text/javascript" src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="box">
       <button @click="handleClick()">正在热映</button>

        <ul>
            <li v-for="data in datalist">
                <h3>{{data.name}}</h3>
                <img :src="data.poster"/>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
       
      new Vue({
          el:"#box",
          data:{
              datalist:[]
          },
          methods:{
            handleClick(){
                axios.get("./json/test.json").then(res=>{
                    console.log(res.data.data.films) // axios 自动包装data属性 res.data
                    this.datalist = res.data.data.films
                }).catch(err=>{
                    console.log(err);
                })
            }
          }
      })
    </script>
</body>
</html>

计算属性

在插值写普通函数,只要页面一刷新,函数就会重新执行,跟函数没关的其他的变化,函数也会重新计算,这样会影响效率

计算属性就是:把函数当成属性来用---》只有这个函数使用的属性(变量)变化,函数才重写运算

通过计算属性实现名字首字母大写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!--大段的代码写在这里不好,使用计算属性-->
    {{mytext.substring(0,1).toUpperCase()+mytext.substring(1)}}
    <p>计算属性:{{getname}}</p>
    <!--普通方法要加括号-->
    <p>普通方法:{{getNameMethod()}}</p>
    <!--区别是在同一个页面中使用多次计算属性,不会多次执行-->
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            mytext:'lqz',
        },
        computed:{
            getname(){//依赖的状态改变了,会重新计算
                console.log('计算属性')
                return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
            }
        },
        methods:{
            getNameMethod(){
                console.log('普通方法')
                return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
            }
        }
    })
</script>
</html>

通过计算属性重写过滤案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <p><input type="text" v-model="mytext" @input="handleChange"></p>
    <ul>
        <li v-for="data in newlist">{{data}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            mytext: '',
            datalist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],

        },
        computed: {
            newlist() {
                var newlist = this.datalist.filter(item => {
                    return item.indexOf(this.mytext) > -1
                })
                return newlist
            },
        },

    })
</script>
</html>

侦听属性

只要被监听的变量发生变化,就会执行监听属性中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="div_id">
    <p><input type="text" v-model="text"></p>

</div>

<script>
    let vm = new Vue({
        el:'#div_id',
        data:{
            text:'',
        },
        // 只要text值改变就会执行该函数
        watch:{
            text:function (){
                console.log('监听text函数执行了')
            }
        }
    })
</script>
</body>
</html>

标签:el,vue,console,log,状态,name,axios,data,属性
来源: https://www.cnblogs.com/zonghan/p/16218382.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有