Vue 实例
- 创建一个Vue实例,并让其接管id为root的DOM的显示,通过插值表达式可以将data中的内容显示出来,通过@(v-on)给div绑定一个 handleClick 的点击事件,点击触发 methods 中的事件,船舰一个名为 item 全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div @click="handleClick">
{{message}}
</div>
<item></item>
</div>
<script type="text/javascript">
Vue.component('item', {
template: '<div>hello item</div>'
})
var vm = new Vue({
el: '#root',
data: {
message: 'hello world'
},
methods: {
handleClick: function() {
alert("hello")
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例生命周期</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
template: "<div>{{test}}</div>",
data: {
test: "hello world"
},
beforeCreate: function() {
console.log("beforeCreate");
},
created: function() {
console.log("created");
},
beforeMount: function() {
console.log(this.$el);
console.log("beforeMount");
},
mounted: function() {
console.log(this.$el);
console.log("mounted");
},
beforeDestroy: function() {
console.log("beforeDestroy");
},
destroy: function() {
console.log("destroy");
},
beforeUpdate: function() {
console.log("beforeUpdate");
},
updated: function() {
console.log("updated");
}
})
</script>
</body>
</html>