7.vue组件
2018-07-07 本文已影响16人
yaoyao妖妖
1.is标签
<!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">
<table>
<tbody>
<!-- tbody中只能是tr，所以使用is属性来表示他真实的是row组件 -->
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
<select>
<option is="row"></option>
</select>
<ul>
<li is="row"></li>
</ul>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template:'<tr><td>this is a row template</td></tr>'
})
var app = new Vue({
el:'#root',
})
</script>
</body>
</html>
- 非根组件的data
<!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">
<table>
<tbody>
<!-- tbody中只能是tr，所以使用is属性来表示他真实的是row组件 -->
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
// 在除了根组件的data只能是一个function（），不能是一个对象，同事要求返回你对应的数据
// 因为非根组件可能被调用多次，所以它对应的数据应该是独有的，通过函数返回是为了让每一个非根组件有一套独立的数据
data: function(){
return {
content:'this is Content'
}
},
template:'<tr><td>{{content}}</td></tr>'
})
var app = new Vue({
el:'#root',
// 根组件的data可以是一个对象
})
</script>
</body>
</html>
- ref引用
<!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">
<!-- ref引用名字为hello -->
<div
ref='hello'
@click="handleClick"
>
hello wordld
</div>
</div>
<script>
var app = new Vue({
el:'#root',
methods:{
handleClick:function () {
// this.$refs当前vue所有的ref引用
// this.$refs.hello即div对用的dom节点，在view中获取dom节点
console.log(this.$refs.hello.innerHTML)
}
}
})
</script>
</body>
</html>
- ref组件引用
<!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">
<!-- ref引用名字为hello -->
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component('counter',{
template: '<div @click="handleClick">{{number}} </div>',
data:function(){
return {
number: 0
}
},
methods:{
handleClick:function () {
this.number ++
//对应上面的@change,'change'不写会报错
this.$emit('change')
}
}
})
var app = new Vue({
el:'#root',
data:{
total:0
},
methods:{
handleChange:function(){
this.total = this.$refs.one.number + this.$refs.two.number
}
}
})
</script>
</body>
</html>
