版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40990854/article/details/89070516
一、is 使用
table、ul、ol、select 这类的不能直接用模板,按照各自的格式写,
在想要用模板的地方 使用 is='row',这样浏览器就不会解析错误
二、组件中的data
组件中定义 data --组件中的 data 必须是一个函数,而且返回是一个对象,因为组件中的数据是可变的
三、ref引用
1、在标签上使用 ref引用是获取 DOM 元素
2、在组件生使用 ref引用 获取的的该组件的引用
引用的使用:this.$refs 这里代表全部的引用,再根据引用名来具体确定某一个引用
this.$refs.hello
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件使用的细节点</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<!--
1、组件使用可能会出现的bug -- table、ul、ol、select 这类的不能直接用模板,按照各自的格式写,在想要用模板的地方 使用 is='row',这样浏览器就不会解析错误
2、组件中定义 data --组件中的 data 必须是一个函数,而且返回是一个对象,因为组件中的数据是可变的
-->
<div id="root">
<!--
表面上和自己想要的结果一样,打开浏览器检查代码就会发现row不在table里面
-->
<table>
<row></row>
<row></row>
</table>
<!--
table、ul、ol、select 这类的不能直接用模板,按照各自的格式写,在想要用模板的地方 使用 is='row',这样浏览器就不会解析错误
-->
<table>
<tr is='row'></tr>
<tr is='row'></tr>
</table>
<!--
ref 引用,
1、在标签上使用 ref引用是获取 DOM 元素
2、在组件生使用 ref引用 获取的的该组件的引用
-->
<div ref='hello' @click='handleClick'>sfa</div>
</div>
<script type="text/javascript">
/*
组件中的 data 必须是一个函数,而且返回是一个对象,因为组件中的数据是可变的,都是独立的数据存储
*/
Vue.component('row',{
data: function () {
return{
content:'This is row'
}
},
template:'<tr><td>{{content}}</td></tr>'
});
var vm = new Vue({
el:'#root',
methods:{
handleClick:function () {
console.log(this.$refs.hello.innerHTML)
}
}
});
</script>
</body>
</html>