1、is属性解决模板标签中的bug
1、我们在使用下面的代码的时候,会在浏览器的控制台中发现错误,我们自定义的组件并没有在tbody中,而跑到了外面与table同级的位置,为什么?因为H5标准当中,必须在tbody中放tr标签,所以为了避免这个错误,我们使用is来解决:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件使用细节点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<table>
<tbody><!--表示这里虽然是tr标签,但实际上是个row的组件-->
<tr is="row"></tr><tr is="row"></tr><tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
template: "<tr><td>this is row<td></tr>"
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
2、总结:使用is属性解决模板标签上的bug问题:在表格当中我们要注意使用组件直接代替tr的这样的错误,在列表当中也一样,最好使用<li is="row"></li>这样的方式,还有section下面的option。最好也用<option is="row"></option>。
2、子组件中的data书写方式
1、现在我们把上面的代码中的自定义的组件这样写:把td中的内容写在data中的content当中。
Vue.component('row',{
data: {
content:"this is row", //错误的写法
},
template: "<tr><td>{{content}}<td></tr>"
})
2、上面的这种方式就会报错,会提示data option is not a function。原因是因为:在根组件中以对象的方式去写data是没有问题的,但是非根组件的data必须是个function,而且必须要返回对象,对象中包含着数据。所以正确的写法如下:这样的写法的理由是什么?因为根组件只会被调用一次,而子组件,如下例会被调用三次,而我们希望每个子组件拥有自己的独立的数据,而不是共享一个数据,所以以function的方法,每次都返回一个新的对象作为子组件独立的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>组件使用细节点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<table>
<tbody>
<tr is="row"></tr><tr is="row"></tr><tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row',{
data:function() {//以function的方式去写子组件的数据,返回对象,对象中包含数据
return {
content:"this is row",
}
},
template: "<tr><td>{{content}}</td></tr>"
})
var vm = new Vue({
el: "#root",
})
</script>
</body>
</html>
3、Vue中的ref
1、Vue不建议我们去操作DOM,但是在有些负责的动画效果中不去操作DOM还真就不行,所以Vue中怎么操作DOM?通过使用ref来获取元素去操作DOM.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ref</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!--给这个div的ref取名为hello,实际上也是div的引用名-->
<div ref='hello'
@click="handleClick"
>hello world</div>
</div>
<script>
var vm = new Vue({
el: "#root",
data: {},
methods: {
handleClick: function() {
//通过this.$refs.hello拿到的就是真正的DOM结点
alert(this.$refs.hello.innerHTML);
}
}
})
</script>
</body>
</html>
2、那么问题又来了,现在我们是在html标签中添加的ref,获得的是真正的DOM元素,那么我们在组件上使用ref得到的是什么?
答案是:在子组件上添加ref,使用ref得到的是这个子组件的引用,在子组件上有很多实例属性,还有很多数据,都能通过ref去获取,下面展示的就是一个通过ref去获取子组件中数据的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>the ref of component</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<counter @change="addCounter" ref="oneAdder"></counter>
<counter @change="addCounter" ref="twoAdder"></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++;
this.$emit('change');
}
}
})
var vm = new Vue({
el: "#root",
data: {
total: 0,
},
methods:{
addCounter:function() {
this.total=this.$refs.oneAdder.number+this.$refs.twoAdder.number;
}
},
})
</script>
</body>
</html>