前言
本文由阅读一篇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>
Paste_Image.png
局部组件
把上个例子的修改一下
new Vue({
el:'#example-2',
components: {
'my-component':myComponent
}
})
得出
Paste_Image.png
Paste_Image.png
注意：这个位置不能颠倒了，否则会报错，意思就是要先注册组件再创建新的Vue实例，不能先创建实例再注册组件
Paste_Image.png
Paste_Image.png
父子组件
<!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>
输出时父组件里也输出子组件
Paste_Image.png
创建组件方式
-
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
Paste_Image.png
注意：不区分大小写，大写要用横线隔开否则报错
Paste_Image.png
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>
Paste_Image.png
Paste_Image.png
Paste_Image.png
双向绑定
使用.sync后缀在子组件的数据绑定上，实现子组件与父组件的双向绑定，如单项绑定中改变其中一个句子为
![Upload Paste_Image.png failed. Please try again.]
即得到双向绑定的效果
单次绑定
使用.once后缀在子组件的数据绑定上，显式地指定单次绑定，单次绑定在建立之后不会同步之后的变化，这意味着即使父组件修改了数据，也不会传导给子组件。
![Upload Paste_Image.png failed. Please try again.]
应当注意的是没有二次绑定，三次绑定这样的效果，若将.once改为.twice或者其他序数会报错
网友评论