<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件使用中的细节点（is,data,ref）</title>
<script src="vue.js"></script>
</head>
<body>
<!-- is的使用解决组件模板bug
让一个标签使用全局组件的模板
-->
<div id="app">
<table border="" cellspacing="" cellpadding="">
<tr is="row"></tr>
<tr is="row"></tr>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
})
var vm=new Vue({
el:"#app",
})
</script>
<!-- 子组件数据的使用
在子组件中定义数据时必须使用函数，而且返回值必须是一个对象
-->
<div id="app2">
<table border="" cellspacing="" cellpadding="">
<tr is="row1"></tr>
<tr is="row1"></tr>
</table>
</div>
<script>
Vue.component('row1',{
data:function(){
return {
content:"this is content"
}
},
template:'<tr><td>{{content}}</td></tr>'
})
var vm=new Vue({
el:"#app2"
})
</script>
<!-- ref引用属性的使用 -->
<!--
当在普通标签中使用时是对本dom的引用
当在组件中使用时引用的是本组件
-->
<div id="app3">
<div ref='hello' @click="handleClick">hello world</div>
</div>
<!-- ---------------------------------------------------------------------------- -->
<div id="app4">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div><!-- 自动计算上面两个组件的数字之和 -->
</div>
<script>
var vm=new Vue({
el:'#app3',
methods:{
handleClick:function(){
/* 从所有引用中获取名为hello的引用所在的dom */
alert(this.$refs.hello.innerHTML)
}
}
})
/* ------------------------------------------------------------------------------------ */
Vue.component('counter',{
template:'<div @click="handleClick">{{number}}</div>',
data:function(){
return {
number:0
}
},
methods:{
handleClick:function(){
this.number++
this.$emit('change')/* 向外触发一个change事件 */
}
}
})
var app4=new Vue({
el:'#app4',
data:{
total:0
},
methods:{
handleChange:function(){
this.total=this.$refs.one.number+this.$refs.two.number;
}
}
})
</script>
</body>
</html>
790
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
