小生博客：http://xsboke.blog.51cto.com
-------谢谢您的参考，如有疑问，欢迎交流
目录:
1. 自定义组件
2. 全局注册的自定义组件
3. 局部注册自定义组件
4. 组件的嵌套
5. 组件的动态切换
6. Vue的ajax
- 自定义组件
就相当于自定义标签,其实底层还是html标签,只不过是套了个名字
自定义组件分为全局注册和局部注册
共同点:
为什么data必须以函数方式返回数据？
因为在函数中,变量属于内部变量,这样当自定义组件被多次引用时变量不会互相影响.
只能在Vue对象中使用自定义组件
不同点:
全局注册的自定义组件：创建组件之后,只要是Vue对象就可以使用
局部注册的自定义组件：在Vue实例中使用components选项来定义你的局部组件
-
全局注册的自定义组件
2.1 组件的结构
Vue.component('component-name',{ /* ...... */})
-- 'component-name' 组件名称
-- { /* ...... */} 组件的内容(执行的函数)
2.2 简单组件的实现
<div id="app">
<button-counter></button-counter>
</div>
<div id="app1">
<button-counter></button-counter>
</div>
<script type="text/javascript">
// 自定义组件也是一个Vue对象,因此之前的data,methods,钩子函数都是可用的
Vue.component('button-counter',{
data:function(){ -- 因为返回的是函数,所以两个应用了组件的标签中的count值是互不影响的
return { -- 如果需要所有应用的当前组件的count值都一样,可以定义一个全局变量再引入这里
count:0
}
},
// 自定义组件最后返回的结果
template:'<button v-on:click="count++"><b>{{count}}</b></button>' -- 当点击按钮时,count的值就+1,template定义的是真正生成的html
})
new Vue({el:'#app'}) -- 可以看到只要是Vue对象就可以应用全局自定义组件
new Vue({el:'#app1'})
</script>
2.3 当你需要多个组件之间的data返回值相同时可以这样解决.
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script type="text/javascript">
var mydata= {count:0} -- 在外部定义变量
// 自定义组件也是一个Vue对象,因此之前的data,methods,钩子函数都是可用的
Vue.component('button-counter',{
data:function(){
return mydata; -- 在组件中应用
},
// 自定义组件最后返回的结果
template:'<button v-on:click="count++"><b>{{count}}</b></button>'
})
new Vue({el:'#app'})
</script>
2.4 解决你template里面的内容比较庞大时的操作
```
<head>
<script type="text/template" id="temp"> -- 首先在head中定义一个类型(type)为"text/template"的script标签,然后增加一个唯一的属性如下id="temp"
<div>
{{message}}
<ul>
<li>第一部分：Vue基本语法</li>
<li>第二部分：自定义组件</li>
</ul>
</div>
</script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<div id="app2">
<my-header></my-header>
</div>
<script type="text/javascript">
Vue.component('my-header',{
template:'#temp' -- 然后在template中指定这个id名即可
});
new Vue({el:'#app'});
new Vue({el:'#app2'});
</script>
</body>
```
- 局部注册自定义组件
局部注册自定义标签就是在Vue实例里面通过components选项创建自定义标签
<head>
<script type="text/template" id="temp">
<div>
{{message}}
<ul>
<li>第一部分：Vue基本语法</li>
<li>第二部分：自定义组件</li>
</ul>
</div>
</script>
</head>
<body>
<div id="app">
<my-header></my-header>
</div>
<script type="text/javascript">
// 局部组件就是Vue对象内部定义的组件,仅仅自身可以使用
var vue = new Vue({
el:'#app',
components:{
'my-header':{ -- 创建一个名为'my-header'的自定义标签
template:'#temp', -- 关联模板
data:function(){
return{
message:'hello vue'
}
}
}
}
})
</script>
</body>
- 组件的嵌套
知识点:使用slot的name属性,用来关联标签或者组件,实现定义嵌套标签或者组件的位置
<div id="app">
<my-header>
<my-title>组件与组件之间嵌套</my-title>
</my-header>
</div>
<div id="app2">
<my-header>
<button slot="vleft">左</button> -- 这里的slot值必须和Vue实例中components选项的name值一样
<button slot="vright">右</button>
</my-header>
</div>
<script>
var vue = new Vue({
el:'#app',
// 组件局部注册
components:{
'my-header':{
// 系统给定的slot来实现标签的嵌套操作
template:'<div>我是头部内容<slot /></div>' -- 当只需要嵌套一个标签或组件时,直接使用slot,不需要定义name
},
'my-title':{
template:'<h4>我是标题!!</h4>'
}
}
});
var vue = new Vue({
el:'#app2',
// 组件局部注册
components:{
'my-header':{
// 系统给定的slot来实现标签的嵌套操作
template:'<div><slot name="vleft" />我是头部内容<slot name="vright" /></div>'
}
}
})
</script>
- 组件的动态切换
类似JQuery的tab
<!--
1: component标签的is属性来完成组件动态绑定
2: 按钮的@click来修改data属性从而切换组件
3: keep-alive 标签来保留组件的状态值
-->
<div id="app">
<button @click="changeComp(1)">第一项</button>
<button @click="changeComp(2)">第二项</button> -- 点击按钮时执行changeComp函数,并且传入实参"2".
<button @click="changeComp(3)">第三项</button>
<keep-alive> -- 使用keep-alive标签可以保留当前组件的状态值,防止组件之间切换时,值丢失
<component v-bind:is="nowHeader"></component>
</keep-alive>
</div>
<script>
var vue = new Vue({
el:'#app',
data:{
nowHeader:'header-1'
},
components:{
'header-1':{template:'<div>组件1:<input /></div>'},
'header-2':{template:'<div>组件2:<input /></div>'},
'header-3':{template:'<div>组件3:<input /></div>'},
},
methods:{
changeComp:function(index){
this.nowHeader = 'header-' + index -- 当changeComp函数被触发时,Vue实例data中的变量"nowHeader",将根据实参的值而发生变化
}
}
})
</script>
- Vue的ajax
详情查看axios中文手册
中文手册:https://www.kancloud.cn/yunye/axios/234845
自2.0之后Vue使用axios实现ajax功能
-- 注意使用axios需要引入axios的js文件
<table id="app" border="1" width="300px">
<!-- item就是循环的每个对象 -->
<tr v-for="item in result">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
<script>
var vue = new Vue({
el:'#app',
data:{
result:[]
},
created:function(){ -- 在创建VUE实例后执行这个函数
// 通过axios访问远程数据
axios.get("data.json").then(function(result){ -- then是操作成功后执行的函数
this.result = eval(result.data); -- axios获取的数据默认是string(这将导致您不能循环列表,字典等),可以使用eval将string的格式转换成对象
}.bind(this)); -- bind(this)的意思是将Vue实例中的this和axios中的this绑定到一块,
} -- 因为axios和Vue实例的数据是不互通的
})
</script>
then -- 操作成功后执行的动作
catch -- 操作异常时执行的动作