vue组件的细节 is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<table>
<tbody>
<tr></tr>
<tr></tr>
<tr></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>
1.把row换成tr
2.把row加载到tr里，要用到is属性在tr里添加 is="row"
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr ></tr>
</tbody>
</table>
当然ul里也不要写row
<ul>
<li is="row"></li>
</ul>
还有ol 以及 select 里option
非根组件声明里 data 里的内容要是函数
因为一个组件会多次利用，一函数返回比较好
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<script type="text/javascript" src="js/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 content"
// }是错误的
data:function(){
return {content:'this is content'}
},
template:'<tr><td>{{content}}</td></tr>'
})
var vm = new Vue({
el:'#root'
})
</script>
</body>
</html>
ref的引用
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>ref</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<div
ref='hello'
@click="handleClik">nihao</div>
</div>
<script>
var vm = new Vue({
el:'#root',
methods:{
handleClik:function () {
console.log(this.$refs.hello)
// $refs指整个vue实例里的引用,找到hello,打印出helloe下的所有节点
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ref</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<div
ref='hello'
@click="handleClik">nihao</div>
</div>
<script>
var vm = new Vue({
el:'#root',
methods:{
handleClik:function () {
// console.log(this.$refs.hello)
// $refs指整个vue实例里的引用,找到hello,打印出helloe下的所有节点
//ref相当于一个连接
console.log(this.$refs.hello.innerHTML)//打印出节点内容
}
}
})
</script>
</body>
</html>