创建vue组件
一、’创建vue组件有四个步骤:
全局组件
1.先命名,用Vue.extend()构建一个你需要渲染的html;创建一个模版
2.调用Vue.component('Html里自己创建的标签',1步骤中创建的构造器名称);注册
3.创建一个vue实例,让其他的挂载在其标签下面;
4.html中写自己要创建的标签
<div id="app1">
<my-component></my-component>
</div>
<div id="app2">
<my-component></my-component>
</div>
<my-component></my-component>
<script>
//first:creat a 组件构造器
var myComponent=Vue.extend({
template:'<div>This is my first component!</div>'
})
//2.注册组件,并制定组件的标签,组件的HTML标签为,<my-component>
Vue.component('my-component',myComponent)
var app1=new Vue({
el:'#app1'
});
var app2=new Vue({
el:'#app2'
})
</script>
二、局部组件
在vue实例下面注册component,用components代替上面第二部的Vue.component
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
<script>
var myComponent=Vue.extend({
template:'<div>This is my first component!</div>'
})
new Vue({
el:'#app',
components:{
'my-component':myComponent //这个标签下是局部的,那别的vue实例下就不能用
}
});
</script>
实现后的状态是
原来的自己创建的标签被替换成我vue.extend中的html
三、父子关系
要在一个组件中使用另外一个组件,这就存在一个父子关系~基本子组件放在父组件里面
<body>
<div id="app">
<parent-component></parent-component>
</div>
</body>
<script>
//父子关系
// 先构造子元素
var Child=Vue.extend({
template:'<i>This is a Child!</i>'
})
// 子级注册都是在父级构造的里面,
var Parent=Vue.extend({
template:'<span>This is Parent!</span><child-component></child-component>',
components:{
'child-component':Child
}
})
Vue.component('parent-component',Parent)
new Vue({
el:'#app'
})
</script>
四、发现新大陆 不需要那么多步骤
省掉了第一步的构造~自动内部构造,将构造和注册一起使用
全局
Vue.component('parent-component',{
template:'<div>This is the first component!'
})
new Vue({
el:'#app'
})
在选项对象的components属性中实现局部注册:
var vm2 = new Vue({
el: '#app2',
components: {
// 局部注册,my-component2是标签名称
'my-component2': {
template: '<div>This is the second component!</div>'
},
// 局部注册,my-component3是标签名称
'my-component3': {
template: '<div>This is the third component!</div>'
}
}
})
五、js和html分开
这边分开的意义还不知道,还有我写到复杂的东西怎么办呢
<body>
<div id="app">
<my-component></my-component>
</div>
<script type="text/x-template" id="myComponent"> //type指定为text/x-template
<div>This is a component!</div>
</script>
</body>
<script>
Vue.component('my-component',{
template:'#myComponent' //这边写的是js的ID
})
new Vue({
el:'#app'
})
</script>
引用了template标签
<body>
<div id="app">
<my-component></my-component>
</div>
<!-- 这边引用了一个template标签 不需要再写js的text -->
<template id="myComponent">
<div>This is a component!</div>
</template>
</body>
<script>
Vue.component('my-component',{
template:'#myComponent' //这边写的是js的ID
})
new Vue({
el:'#app'
})
</script>
在定义组件的选项时,data和el选项必须使用函数。
下面的代码在执行时,浏览器会提出一个错误
Vue.component('my-component',{
data:{
a:1
}
})
昨天晚上
<body>
<div id="app">
<my-component v-bind:my-name="name" v-bind:my-age="age"></my-component>
</div>
<template id="myComponent">
<table>
<tr>
<th colspan="2">
子组件数据
</th>
</tr>
<tr>
<td>my name</td>
<td>{{myName}}</td>
</tr>
<tr>
<td>my age</td>
<td>{{myAge}}</td>
</tr>
</table>
</template>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
name:'keepfool',
age:28
},
components:{
'my-component':{
template:'#myComponent',
props:['myName','myAge']
}
}
})
</script>
接下来写的是那篇博文最后写的那个小例子
完整代码,实现一个查询的功能
<body>
<div id="app">
<div id="searchBar">
Search <input type="text" v-model="searchQuery">
</div>
<simple-grid :data="gridData" :columns="gridColumns" :filter-Key="searchQuery"></simple-grid>
</div>
<template id="grid-template">
<table>
<thead>
<tr>
<th v-for="col in columns">
{{col|capitalize}} <!-- 过滤器,将所有文字过滤为首字母大写 -->
</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in data|filterBy filterKey">
<td v-for="col in columns">
{{entry[col]}} <!-- 渲染entry中的数据 -->
</td>
</tr>
</tbody>
</table>
</template>
</body>
<script>
var demo=new Vue({
el:'#app',
data:{
searchQuery:'',
gridColumns:['name','age','sex'],
gridData:[{
name:'Jack',
age:'30',
sex:'Male'
},{
name:'Bill',
age:'26',
sex:'Male'
},{
name:'Tracy',
age:'22',
sex:'Female'
},{
name:'Chris',
age:'36',
sex:'Male'
}]
},
components:{ /*components中定义了父组件中准备传入的数据*/
'simple-grid':{ /*要插入的位置*/
template:'#grid-template', /*子组件的位置*/
props:{ /*父组件数据往子组件传入*/
data:Array, /*这边定义了数据的格式*/
columns:Array,
filterKey:String
}
}
}
})
</script>