Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<!--当被点击的时候会自动到vue对应的 methods 中找 handleClick的方法-->
<div v-on:click="handleClick">
<!--{{}}会到vue中的data找message对应的部分来替换message显示-->
{{message}}
</div>
<!--小组件的使用-->
<item> </item>
</div>
<script>
//全局的小组件,无需注册
Vue.component('item',{
template:'<div> hello </div>'
})
//app这个vue的实例会接管root这个
// dom里面的内容,会分析<div id="root"> </div>这个dom里面所有的内容,并显示出来
var app = new Vue({
el:'#root',
components:{ //将局部组件注册一下
},
data: {
message:'hello world'
},
methods:{
handleClick:function () {
}
}
})
</script>
</body>
</html>
网友评论