前言
本文由閱讀一篇vue.js組件文章學習后筆記
http://www.cnblogs.com/keepfool/p/5625583.html
Vue.js的組件的使用有3個步驟：創建組件構造器、注冊組件和使用組件
創建組件
<!DOCTYPE HTML>
<html>
<head>
<meta charset=gb2312" />
<title>vue使用</title>
<script type="text/javascript" src="D:\軟件小組/vue.js"></script>
</head>
<body>
<div id="example-1">
<my-component></my-component> !--組件名稱，使用組件--!
</div>
<div id='example-2'>
<my-component></my-component>
</div>
<script type="text/javascript" >
!--創建組件--!
var myComponent=Vue.extend({
template:'<div>This is my component</div>'
})
Vue.component('my-component',myComponent) !--構造組件,全局組件--!
new Vue({
el:'#example-2'
})
new Vue({
el:'#example-1'
})
</script>
</body>
</html>
局部組件
把上個例子的修改一下
new Vue({
el:'#example-2',
components: {
'my-component':myComponent
}
})
得出
注意：這個位置不能顛倒了，否則會報錯，意思就是要先注冊組件再創建新的Vue實例，不能先創建實例再注冊組件
父子組件
<!DOCTYPE HTML>
<html>
<head>
<meta charset=gb2312" />
<title>vue使用</title>
<script type="text/javascript" src="D:\軟件小組/vue.js"></script>
</head>
<body>
<div id='example-2'>
<my-component></my-component>
</div>
<script type="text/javascript" >
var son=Vue.extend({
template:'<div>This is my component</div>'
})
var father=Vue.extend({ //創建父組件
template:'<div>beauty<child></child></div>',
components:{ //父組件里構造子組件，子組件為局部組件
'child':son
}
})
Vue.component('my-component',father) //注冊父組件，未注冊子組件
new Vue({
el:'#example-2'
});
</script>
</body>
</html>
輸出時父組件里也輸出子組件
創建組件方式
-
1
var son=Vue.extend({ template:'<div>This is my component</div>' }) 2
Vue.component('my-component',{
template:'<div>beauty</div>',
components:{
'child':son}
})
使用script或template標簽
Vue.js提供了兩種方式將定義在JavaScript中的HTML模板分離出來。
<!DOCTYPE HTML>
<html>
<head>
<meta charset=gb2312" />
<title>vue使用</title>
<script type="text/javascript" src="D:\軟件小組/vue.js"></script>
</head>
<body>
<div id="mianmian">
組件<small-component></small-component>
</div>
<script type="text/x-template" id="mianComponent"> //注意type類型
<div>This is a wonderful world</div>
</script>
<script type='text/javascript'>
Vue.component('small-component',{
tempalte:'#mianComponent'
})
new Vue({
el: '#mianmian'
})
</script>
</body>
</html>
注意：使用<script>標簽時，type指定為text/x-template，意在告訴瀏覽器這不是一段js腳本，瀏覽器在解析HTML文檔時會忽略<script>標簽內定義的內容。
#######template標簽
與script標簽類似，只是將script標簽換成template標簽形式
![Upload Paste_Image.png failed. Please try again.]
輸出結果均為
![Upload Paste_Image.png failed. Please try again.]
組件的el和data
在定義組件的選項時，data和el選項必須使用函數,否則會報錯，可在控制臺查看
props使用
組件實例的作用域是孤立的。這意味著不能并且不應該在子組件的模板內直接引用父組件的數據。可以使用props 把數據傳給子組件。
<template id='mianmian'>
myname:{{myName}}
<br>
my boyfriend:{{hisname}}
</template>
<div id='xiaomian'>
<my-component v-bind:myName="name" v-bind:hisname="boyfriend">
</my-component>
</div>
<script type='text/javascript'>
var vm=new Vue({
el:'#xiaomian',
data:{
name:"zhuang",
boyfriend:"zeng"
},
components:{
'my-component':{
template:'#mianmian',
props:['myName','hisname']
}
}
})
</script>
通過中間量聯系起來父模塊與子模塊，將父模塊數據傳遞給子模塊component
注意：不區分大小寫，大寫要用橫線隔開否則報錯
props單項綁定
在父元素修改的數據會在子元素顯示出來，而在子元素修改的數據父元素不會做相應的改變
<!DOCTYPE HTML>
<html>
<head>
<meta charset=gb2312" />
<title>vue使用</title>
<script type="text/javascript" src="D:\軟件小組/vue.js"></script>
</head>
<body>
<template id='mianmian'>
子元素：
<br>
myname:<input type="text" v-model="myName">
<br>
mylike:<input type="text" v-model="hisname">
<br>
</template>
<div id='xiaomian'>
<my-component v-bind:my-name="name" v-bind:hisname="boyfriend">
</my-component>
父元素:
<br>
myname:<input type="text" v-model="name"/>
<br>
mylike:<input type="text" v-model="boyfriend"/>
</div>
<script type='text/javascript'>
var vm=new Vue({
el:'#xiaomian',
data:{
name:"zhuang",
boyfriend:"zeng"
},
components:{
'my-component':{
template:'#mianmian',
props:['myName','hisname']
}
}
})
</script>
</body>
</html>
雙向綁定
使用.sync后綴在子組件的數據綁定上，實現子組件與父組件的雙向綁定，如單項綁定中改變其中一個句子為
![Upload Paste_Image.png failed. Please try again.]
即得到雙向綁定的效果
單次綁定
使用.once后綴在子組件的數據綁定上，顯式地指定單次綁定，單次綁定在建立之后不會同步之后的變化，這意味著即使父組件修改了數據，也不會傳導給子組件。
![Upload Paste_Image.png failed. Please try again.]
應當注意的是沒有二次綁定，三次綁定這樣的效果，若將.once改為.twice或者其他序數會報錯
