如下代码。
一个Vue 项目,是由很多组件组成的,组件是Vue的实例,因此可以理解为:一个Vue 项目,是由很多Vue 实例组成的。
<!DOCTYPE html>
<html>
<head>
<title>vue 实例</title>
<meta charset="utf-8">
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div @click='handleclick'>{{message}}</div>
<item></item>
</div>
<script>
Vue.component('item',{
template: '<div>hello world</div>'
})
var vm = new Vue({
el: '#root',
data: {
message: 'hello'
},
methods:{
handleclick: function () {
alert(this.message)
}
}
})
</script>
</body>
</html>
在浏览器控制台,输入vm 即可查看该实例的所有属性了。
或者直接输入vm.$el 。其中,vm 后面根$的属性(方法),即为实例属性(方法)。