vuejs学习2.6 语法——组件化开发1——基础
组件化开发
组件化的实现和使用步骤(vue1.x方法实现)
组件化是vuejs的重要思想,可以开发出一个个独立可复用的小组件来构造我们的应用,任何的应用都会被抽象成一颗组件树。
组件的使用分为三个步骤:创建组件构造器(调用Vue.extend()方法),注册组件(调用Vue.component()方法),使用组件(在Vue实例作用范围内使用)
ES5语法中定义字符串使用单(双)引号必须通过+连接才能换行
ES6语法:可以使用 ``(tab键上面)来定义字符串,可以直接换行
<body>
<div id="app">
<my-cpn></my-cpn>
</div>
<script src="../js/vue.js"></script>
<script>
//创建组件构造器对象,template中使用html源码
const cpnC = Vue.extend({
template:`<div>
<h2>我是标题</h2>
<p>我是内容1232412</p>
<p>我是内容222232412</p>
</div>`
})
//注册组件,名字为my-cpn
Vue.component('my-cpn',cpnC);
const app = new Vue({
el:'#app',
data:{
message:"你好"
}
})
</script>
</body>
1,创建组件构造器Vue.extend
传入的template代表自定义组件的模板,模板就是使用到组件的地方,要显示html代码
2,注册组件Vue.component
将刚才的组件构造器注册为一个组件,并且给它起一个组件的标签名,传递的参数为两个:标签名,构造器
3,组件必须挂在在Vue实例下,否则不会生效
全局组件和局部组件
按照上述创建组件为全局组件,如果要创建局部组件,需要在vue实例内部的components属性
<script>
//创建组件构造器
const cpnC = Vue.extend({
template:`<div>
<h2>我是标题</h2>
<p>我是内容1232412</p>
<p>我是内容222232412</p>
</div>`
});
//注册全局组件,表示可以在多个Vue的实例下使用
//Vue.component('cpn',cpnC);
//注册局部组件
const app = new Vue({
el:'#app',
data:{
message:"你好"
},
components:{//局部属性
cpn:cpnC,
}
})
</script>
父组件和子组件
组件和组件之间存在层级关系,一个组件中可能包含一个组件,在创建组件构造器中使用components来注册子组件
<body>
<div id="app">
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
//创建组件构造器
const cpnC1 = Vue.extend({
template:`<div>
<h2>我是子组件</h2>
<p>我是内容1232412</p>
<p>我是内容222232412</p>
</div>`
});
//创建组件构造器
const cpnC2 = Vue.extend({
template:`<div>
<h2>我是父组件</h2>
<p>我是内容1232412</p>
<p>我是内容222232412</p>
<cpn1></cpn1>
</div>`,
components:{
//注册组件
cpn1:cpnC1,
}
});
//注册局部组件
const app = new Vue({
el:'#app',
data:{
message:"你好"
},
components:{//局部属性
//注册组件
cpn2:cpnC2,
}
})
</script>
cpn1不能在app下使用,只能在cpn2下使用
注册组件的语法糖写法(vue2.x后方法方法实现)
省去了调用Vue.extend的步骤,可以直接用一个对象来代替
注册全局组件
Vue.component('cpn1',{template:`<div>
<h2>我是子组件</h2>
<p>我是内容1232412</p>
<p>我是内容222232412</p>
</div>`});
//注册局部组件
const app = new Vue({
el:'#app',
data:{
message:"你好"
},
components:{
cpn1:{
template:`<div>
<h2>我是子组件</h2>
<p>我是内容1232412</p>
<p>我是内容222232412</p>
</div>`
}
}
})
组件模板抽离
方法:使用template或者script,以后基本使用template
script
<div id="app">
<cpn></cpn>
</div>
<!--第一种写法,使用Script标签,type为text/x-template 使用id-->
<script type="text/x-template" id="cpn">
<div>
<h2>我是子组件</h2>
<p>我是内容1232412</p>
<p>我是内容222232412</p>
</div>
</script>
<script src="../js/vue.js"></script>
<script>
Vue.component('cpn',{
//对应id
template:'#cpn'
})
const app = new Vue({
el:'#app',
data:{
message:"你好"
}
})
</script>
template
<div id="app">
<cpn></cpn>
</div>
<!--第二种写法,使用template标签 id-->
<template id="cpn">
<div>
<h2>我是子组件</h2>
<p>我是内容1232412</p>
<p>我是内容222232412</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component('cpn',{
//对应id
template:'#cpn'
})
const app = new Vue({
el:'#app',
data:{
message:"你好"
}
})
</script>
组件存放数据
组件不可以访问Vue实例中的data数据
组件中存放自己的数据用data属性,Vue实例中的data为对象类型,但是组件中的data属性为函数,必须返回一个对象
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>{{title}}</h2>
<p>我是内容1232412</p>
<p>我是内容222232412</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
Vue.component('cpn',{
template:'#cpn',
data(){//必须是一个函数
return {//而且必须包含return返回一个对象
title:"我是标题data"
}
}
})
const app = new Vue({
el:'#app',
data:{
message:"你好"
}
})
</script>
data必须是一个函数原因
1,函数例子
函数每次返回值的地址不同,当一个对象值改变时,其他值不会变
<script>
function abc() {
return {
name:"123"
}
}
let obj1 = abc();
let obj2 = abc();
obj1.name="234";
console.log(obj2.name);//返回值为123
</script>
但是如果返回同一个对象,由于地址一样,当改变时,所有对象都改变
<script>
let obj = {
name:"123",
}
function abc() {
return obj
}
let obj1 = abc();
let obj2 = abc();
obj1.name="234";
console.log(obj2.name);//返回值为234
</script>
2,解释
如果data使用对象,每一个组件的data的值都是同一个对象,如果一个组件的data值发生改变,其他组件的值会发生改变,这样影响了其他组件
如果使用函数,返回值的data对象的地址不同,如果一个组件的data发生改变,其他组件不会发生影响
所以如果使用对象会报错,data必须是函数
下一篇: 竞选主席