您的位置：首页 > Web前端 > Vue.js

Vue学习笔记4.1 is方法，全局组件的data， Vue中操作DOM元素

2019-01-21 13:52 976 查看

1.is方法

看如下情况

[code]<body>
<div id="root">
<table>
<row></row>
<row></row>
</table>
</div>
</body>
<script>
Vue.component('row', {
template: "<tr><td>Hello World</td></tr>"
})

var vm = new Vue({
el: '#root'
})
</script>

<tr><td>跑到<table>之外了。这是因为html5标准要求特定标签中的标签元素也要是特定的，比如<select>中必须是<option> ,<ul>中一定要是<li>作为子标签。所以以上示例违反了html5的标准。就出现了如下bug。碰到这种情况就需要使用vue的is方法来处理。

is方法示例如下：

[code]<body>
<div id="root">
<table>
<tr is="row"></tr>
<tr is="row"></tr>
</table>
</div>
</body>
<script>
Vue.component('row', {
template: "<tr><td>Hello World</td></tr>"
})

var vm = new Vue({
el: '#root'
})
</script>

在组建中，也经常会用data函数来存储数据。但会出现如下问题：

[code]<body>
<div id="root">
<table>
<tr is="row"></tr>
<tr is="row"></tr>
</table>
</div>
</body>
<script>
Vue.component('row', {
data: {
content: "Hello World"
},
template: "<tr><td>{{content}}</td></tr>"
})

var vm = new Vue({
el: '#root'
})
</script>

这是因为全局子组件中。data必须使用函数返回。以保证数据的独立性。因为子组件不会像根组件一样只调用一次。有可能会调用很多次。所以用函数返回的方法可以保证每个地方调用的数据是独立的

[code]<body>
<div id="root">
<table>
<tr is="row"></tr>
<tr is="row"></tr>
</table>
</div>
</body>
<script>
Vue.component('row', {
data: function() {
return {
content: 0
}
},
template: '<tr @click="handleClick"><td>{{content}}</td></tr>',
methods: {
handleClick: function(){
this.content ++;
}
}
})

var vm = new Vue({
el: '#root'
})
</script>

3.操作DOM元素----ref

虽然Vue是一直提倡不直接操作DOM 但是有些特殊场景下咋们又不得不操作DOM 这时候就需要用ref来做处理了

比如以下例子：（该例子是通过点击上面两个数字，自动算出总数）

[code]<body>
<div id="root">
<table>
<tr ref="one" is="row" @change="handleChangeClick"></tr>
<tr ref="two" is="row" @change="handleChangeClick"></tr>
<tr><td>{{sum}}</td></tr>
</table>
</div>
</body>
<script>
Vue.component('row', {
data: function() {
return {
content: 0
}
},
template: '<tr @click="handleClick"><td>{{content}}</td></tr>',
methods: {
handleClick: function(){
this.content ++;
this.$emit('change')
}
}
})

var vm = new Vue({
el: '#root',
data: {
sum: 0
},
methods: {
handleChangeClick: function() {
this.sum = this.$refs.one.content + this.$refs.two.content
}
}
})
</script>

实现：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航