组件的使用
1.构建组件（使用 is 方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件使用中的注意点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<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:'#root'
})
</script>
</body>
</html>输出：虽然显示正确，但是在控制台可以看到，<tr> 本应该在 <table> 中，却和 <table> 平级了，因为 H5 语法规定，<tbody>中
必须包含 <tr>；
修改代码：将 <row></row> 修改为 <tr is="row"></tr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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',{
template:'<tr><td>this is a row </td></tr>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
</html>输出：使用 is ；这样既实现了组件的功能，也可以符合 H5 的语法
同理可得：<ol> 中的 <li> 和 <select> 中的 <option> 都推荐此方法
<table>
<ol>
<li is="row"></li>
</ol>
</table>
<table>
<select>
<option is="row"></li>
</select>
</table>2.data 在子组件中的定义
错误写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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:{
content:'this is a row'
},
template:'<tr><td>{{content}}</td></tr>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
</html>报错：data 在根组件中可以这样定义，写在 Var vm = new Vue里面 是正确的，但写在 Vue.component 子组件中错误
修正代码：子组件定义data时， 后面必须跟函数，不能跟对象；因为子组件会调用多次，为了和其他子组件不产生冲突，每个子组件都能拥有自己独立的数据存储，防止子组件之间互相影响；故后面只能跟函数。改为
data:function(){
return{
content:'this is a row'
}输出：
3.Vue 中操作 DOM
Vue 不建议在代码中操作 DOM，但在处理一些极其复杂的动画效果时，只依靠 Vue 的数据绑定无法处理，在某些情况下不得不操作 DOM；通过 ref 引用的形式来获取 DOM。进行 DOM 操作；
功能：点击 DIV ，将其中内容打印出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件使用中的注意点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div
ref='hello'
@click="handleClick"
>
hello world
</div>
</div>
<script>
var vm = new Vue({
el:'#root',
methods:{
handleClick:function(){
alert(this.$refs.hello.innerHTML)
// 在整个Vue实例里面所有的引用中取hello这个引用（对应DIV的DOM节点）
}
}
})
</script>
</body>
</html>输出：点击 hello world ，打印输出 hello world
4.计数器（点击一次就加一）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件使用中的注意点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<counter></counter>
<counter></counter>
</div>
<script>
Vue.component('counter',{
template:'<div @click="handleClick">{{number}}</div>',
data:function(){
return{
number:0
}
},
methods:{
handleClick:function(){
this.number++
}
}
})
var vm = new Vue({
el:'#root',
});
</script>
</body>
</html>输出：每点击一次就加一
添加计数功能（合计上下两个数的更改次数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件使用中的注意点</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<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++
this.$emit('change')
//子组件向父组件传值，监听change 事件
}
}
})
var vm = new Vue({
el:'#root',
data:{
total:0
},
methods:{
handleChange:function(){
this.total = this.$refs.one.number +
this.$refs.two.number
}
}
});
</script>
</body>
</html>输出：第三行为 前两行改变次数之和
ref:写在 DIV 标签里的时候，通过 this.$refs.名称 实际上是 标签获取的元素；
通过组件写 ref 时，通过 this.$refs.名称 ，实际是 counter 子组件的引用
