1.使用is属性解决模板标签出现bug的问题
image.png
没有使用is的时候会出现当每一行是一个组件，但是tr会跑到tbody外面去的情况。不符合H5的规范。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11组件使用中的细节点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script>
Vue.component('row', {
template: '<tr><td>this is a row</td></tr>'
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
解决方法：通过Vue提供的is属性来解
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11组件使用中的细节点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
<!-- 这样既能保证tr里面显示的是我们的组件，又能够保证它符合H5的编码规范，程序就不会有bug了.同样ul里面也尽量使用is属性 -->
</tbody>
</table>
</div>
<script>
Vue.component('row', {
template: '<tr><td>this is a row</td></tr>'
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
2.子组件的data必须是一个函数：子组件不像根组件只会被调用一次，每一个子组件的数据不希望与其他子组件产生冲突，或者说每一个子组件都应该有自己的数剧，通过一个函数返回一个对象就是让每一个子组件都拥有独立的数据存储，这样不会出现多个子组件互相影响的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11组件使用中的细节点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component('row', {
// 根组件定义data用对象，非根组件定义data就必须是一个函数，同时这个函数要求返回一个对象，这个对象包含你所对应的的数据。
data: function () {
return {
msg: 'this is a row'
}
},
template: '<tr><td>{{msg}}</td></tr>'
})
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
3.Vue通过ref引用来获取dom进行dom操作
** 虽然Vue不建议我们在代码里面直接操作dom，但是在处理一些极其复杂的动画效果，不操作dom，光靠Vue的数据绑定有的时候处理不了这样的情况。必要的情况下，需要操作dom。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11组件使用中的细节点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<!-- 1.给dom取一个引用名字 -->
<div ref='hello' @click='handleClick'>hello world</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
// 虽然Vue不建议我们在代码里面直接操作Dom，但是在处理一些极其复杂的动画效果，不操作dom，光靠Vue的数据绑定有的时候处理不了这样的情况。必要的情况下，需要操作dom
},
methods: {
handleClick() {
// 2.找到引用对应的dom
console.log(this.$refs.hello.innerHTML); //hello world
}
},
})
</script>
</body>
</html>
4. 当 ref 写在div标签上时，通过 this.$refs.名字 获取到的内容实际上是标签对应的dom元素；
当在组件中写ref，通过 this.$refs.名字实际获取的是组件的引用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11组件使用中的细节点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div ref="divya" @click="handleDiv">我是div</div>
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<!-- 对两个counter求和 -->
<div>{{total}}</div>
</div>
<script>
Vue.component('counter', {
template: '<div @click="handleClick">{{number}}</div>',
data: function () {
return {
number: 0
}
},
methods: {
handleClick() {
this.number++
this.$emit('change')
}
}
})
var vm = new Vue({
el: '#app',
data: {
total: 0
},
methods: {
handleChange() {
this.total = this.$refs.one.number + this.$refs.two.number
},
handleDiv() {
console.log(this.$refs.divya); //<div>我是div</div>
}
}
})
</script>
</body>
</html>
网友评论