<!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>
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
