vue计算属性和vue实力的属性和方法

最新推荐文章于 2024-08-14 15:45:18 发布

weixin_30338481

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量91

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wspblog/p/9857602.html

版权

生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue生命周期</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload=function(){
            let vm=new Vue({
                el:'#itany',
                data:{
                    msg:'welcome to itany'
                },
                methods:{
                    update(){
                        this.msg='欢迎来到南京网博！';
                    },
                    destroy(){
                        // this.$destroy();
                        vm.$destroy();
                    }
                },
                beforeCreate(){
                    alert('组件实例刚刚创建，还未进行数据观测和事件配置');
                },
                created(){  //常用！！！
                    alert('实例已经创建完成，并且已经进行数据观测和事件配置');
                },
                beforeMount(){
                    alert('模板编译之前，还没挂载');
                },
                mounted(){ //常用！！！
                    alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
                },
                beforeUpdate(){
                    alert('组件更新之前');
                },
                updated(){
                    alert('组件更新之后');
                },
                beforeDestroy(){
                    alert('组件销毁之前');
                },
                destroyed(){
                    alert('组件销毁之后');
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        {{msg}}
        <br>

        <button @click="update">更新数据</button>
        <button @click="destroy">销毁组件</button>
    </div>
</body>
</html>

计算属性

计算属性也是用来存储数据，但具有以下几个特点：
    a.数据可以进行逻辑处理操作
    b.对计算属性中的数据进行监视

转载于:https://www.cnblogs.com/wspblog/p/9857602.html

weixin_30338481

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue计算属性和vue实力的属性和方法

生命周期<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue生命周期</title> <script src="js/vue.js"></script> <script&...
复制链接

扫一扫