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

1.is方法

看如下情况

<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方法示例如下：

<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函数来存储数据。但会出现如下问题：

<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必须使用函数返回。以保证数据的独立性。因为子组件不会像根组件一样只调用一次。有可能会调用很多次。所以用函数返回的方法可以保证每个地方调用的数据是独立的

<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来做处理了

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

<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>

实现：

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

猜你喜欢