溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下web開發中使用組件要注意的細節點有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --> </head> <body> <div id="root"> <table> <tbody> <!-- <tr><td>1</td></tr> <tr><td>2</td></tr> <tr><td>3</td></tr> --> <!-- //雖然會顯示出來，但有問題 <br> --> <row></row> <row></row> <row></row> <!-- //可行 <br> --> <tr is="row"></tr> <tr is="row"></tr> <tr is="row"></tr> <!-- //可行 <br> --> <ul> <li is="list"></li> <li is="list"></li> <li is="list"></li> </ul> </tbody> </table> </div> <script type="text/javascript"> Vue.component("row", { template: "<tr><td>1</td></tr>" }); Vue.component("list", { template: "<li>1</li>" }); var vm = new Vue({ el: "#root" }); </script> </body> </html>
在子組件里定義data必須是函數，不能是對象（為了讓子組件之間不共享數據，通過函數返回讓每個子組件都有獨立的數據存儲）：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.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 type="text/javascript">
Vue.component("row", {
/*//然而，在子組件，而不是根組件new Vue()中通過對象定義data是不可以的，而必須是函數
data: {
content: "this is a row"
},*/
//這才是正確的：
data: function() {
return {
content: "this is content"
}
},
template: "<tr><td>{{content}}</td></tr>"
});
Vue.component("list", {
template: "<li>1</li>"
});
var vm = new Vue({
el: "#root"
});
</script>
</body>
</html>vue不建議操作dom，但在處理一些復雜的動畫效果，光靠vue的數據綁定并不一定能滿足情況。vue中通過ref操作dom：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
<div ref="hello" @click="handleClick">hello world</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#root",
methods: {
handleClick: function() {
//獲取指定dom節點
console.log(this.$refs.hello.innerHTML)
}
}
});
</script>
</body>
</html>如果是獲取組件的dom呢？
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="./vue.js"></script>
<!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script type="text/javascript">
Vue.component("counter", {
template: "<div @click='handleClick'>{{number}}</div>",
data: function() {
return {
number: 0
}
},
methods: {
handleClick: function() {
this.number++
this.$emit("change")
}
}
})
var vm = new Vue({
el: "#root",
data: {
total: 0
},
methods: {
handleChange: function() {
/*console.log(this.$refs.one.number)
console.log(this.$refs.two.number)*/
this.total = this.$refs.one.number + this.$refs.two.number
}
}
});
</script>
</body>
</html>
以上是“web開發中使用組件要注意的細節點有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
