vue.js实例选项-阿里云开发者社区

vue.js实例选项

2022-11-08 77

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue.js实例选项

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>方法</title>
        <!-- js表示当前文件夹中包含的js文件夹 -->
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="box">
            <div v-html="title"></div>
            <h3>{{showInfo()}}</h3>
            <!-- v-on处理事件 -->
            <button v-on:click="showInfo()">执行方法showInfo</button>
            <button v-on:click="xiaohui()">销毁Vue实例对象</button>
        </div>
        <script>
            let demo = new Vue({   //创建vue实例对象
                //el选项
                el : "#box",
                //date选项
                data : {
                    title: '<h1 style="color:red;">明日学院</h1>',
                    name:'明日学院',
                    url: 'www.mingrisoft.com'
                },
                //方法选项：用于定义处理时间的函数或者一些普通的函数
                methods:{
                    //在对象中在的函数，我们称为方法，定义格式与常规的函数有一定的区别
                    showInfo : function(){
                        //this 代表当前的这个showInfo方法所在的Vue实例对象demo
                        alert('showInfo方法被调用了！');
                        // 调用Vue实例对象内置方法$destory,将当前this代表胡demo对象销毁
                        return this.name + ':' + this.url;
                    },
                    xiaohui:function(){
                        //调用Vue实例对象内置方法$destory,将当前this代表的demo对象销毁
                        this.$destroy();
                    }
                },
                //定义生命周期钩子函数
                    beforeCreate:function() {
                        console.log('beforeCreated生命周期钩子函数被自动调用！')
                    },
                    created:function(){
                        console.log('created生命周期函数被自动调用了！')
                    },
                    beforeMount:function(){
                        console.log('beforeMount生命周期钩子函数被自动调用了！')
                    },
                    mounted:function(){
                        console.log('mounted生命周期钩子函数被自动调用了！')
                    },
                    beforeDestroy:function(){
                        console.log('beforeDestroy生命周期钩子函数被自动调用了！')
                    },
                    destroyed:function(){
                        console.log('destroyed生命周期钩子函数被自动调用了！')
                    }
            })
        </script>
    </body>
</html>

vue.js实例选项

热门文章

最新文章

相关课程

相关电子书

相关实验场景