组件 Component
创建两个数字框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="m1">
年龄: <span @click="num-=1">-</span><input type="text" v-model="num"/><span @click="num+=1">+</span><br/>
数量： <span @click="num-=1">-</span><input type="text" v-model="num"/><span @click="num+=1">+</span>
</div>
<script>
var vm1 = new Vue({
el:"#m1",
data:{
num: 0
}
});
</script>
</body>
</html>
引入组件，复用、搭积木的方式构建应用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="m2">
<lk-header></lk-header>
<lk-footer></lk-footer>
</div>
<script>
var vm2 = new Vue({
el:"#m2",
components:{
"lk-header":{
template:"<div><div>返回</div><h1>我是一个APP</h1><div>选项</div></div>"
},
"lk-footer":{
template:"<div>功能导航</div>"
}
}
});
</body>
</html>
- 要有唯一的根元素。
- template标签。
全局组件
Vue.component("lk-header",{template:.....});
- 能在任何一个Vue的关联元素中使用。
在组件中使用Model（data和methods）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="m3">
年龄: <lk-number></lk-number><br>
数量：<lk-number></lk-number>
</div>
<script>
var vm3 = new Vue({
el:"#m3",
components:{
"lk-number": {
template:'<div><span @click="num-=1">-</span><input type="text" v-model="num"/><span @click="num+=1">+</span></div>',
data:function(){
return {
num: 0
}
},
methods:{}
}
}
});
</script>
</body>
</html>
- data必须是一个函数。
共享变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="m3">
年龄: <lk-number></lk-number><br>
数量：<lk-number></lk-number>
</div>
<script>
var share = {num: 0};
var vm3 = new Vue({
el:"#m3",
components:{
"lk-number": {
template:'<div><span @click="num-=1">-</span><input type="text" v-model="num"/><span @click="num+=1">+</span></div>',
data:function(){
return share;
},
methods:{}
}
}
});
</script>
</body>
</html>
如何和组件交互
props down, event up.
用过props输入数据
- props中的属性名是字符串类型。
- 和变量一样通过this访问。
- 因为是标签属性，所以数据类型是字符串。
案例:限定数据范围 min max
输入数据的类型。
- v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<!--<div id="m1">
年龄: <span @click="num-=1">-</span><input type="text" v-model="num"/><span @click="num+=1">+</span><br/>
数量： <span @click="num-=1">-</span><input type="text" v-model="num"/><span @click="num+=1">+</span>
</div> -->
<!--<div id="m2">
<lk-header></lk-header>
<lk-footer></lk-footer>
</div>-->
<div id="m3">
年龄: <lk-number :max="8" :min="0"></lk-number><br>
数量：<lk-number :max="5" :min="0"></lk-number>
</div>
<script>
var vm3 = new Vue({
el:"#m3",
data:{
},
components:{
"lk-number": {
template:'<div><span @click="change(-1)">-</span><input type="text" v-model="num"/><span @click="change(1)">+</span></div>',
props:["max", "min"],
data:function(){
return {
num: 0
}
},
methods:{
change:function(d){
// this.num += d;
// var min = parseInt(this.min);
// var max = parseInt(this.max);
//
// if(this.num > max)
// this.num = max;
// else if (this.num < min)
// this.num = min;
// var min = parseInt(this.min);
// var max = parseInt(this.max);
var min = this.min;
var max = this.max;
var temp = this.num + d;
if (temp > max)
temp = max;
else if (temp < min)
temp = min;
this.num = temp;
}
}
}
}
});
</script>
</body>
</html>
事件
- 一定明确什么时候触发事件，触发代码写在什么位置。
- 作业：increase事件和decrease事件。
- 事件参数
- 分析@shift="changeHanler"与@shift="changeHanler()"的区别。
- 作业：num参数。
- 多个参数传递
- 作业：oldNum参数和newNum参数。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="m3">
年龄: <lk-number :max="8" :min="0" @shift="changeHanler"></lk-number><br>
数量：<lk-number :max="5" :min="0" @shift="changeHanler()" @increase="increaseHanler()" @decrease="decreaseHanler()"></lk-number>
</div>
<script>
var vm3 = new Vue({
el:"#m3",
data:{
},
methods:{
changeHanler: function(d){
console.log("我发现lk-number中的数据变了:"+d);
},
increaseHanler: function(){
console.log("我发现lk-number中的数据变大了.");
},
decreaseHanler: function(){
console.log("我发现lk-number中的数据变小了.");
}
},
components:{
"lk-number": {
template:'<div><span @click="change(-1)">-</span><input type="text" v-model="num"/><span @click="change(1)">+</span></div>',
props:["max", "min"],
data:function(){
return {
num: 0
}
},
methods:{
change:function(d){
var temp = this.num + d;
if (temp > this.max)
temp = this.max;
else if (temp < this.min)
temp = this.min;
if (temp != this.num){
// 数据被修改了，产生了shift事件.
this.num = temp;
this.$emit("shift", d);
if(d>0){
this.$emit("increase");
} else if (d <0){
this.$emit("decrease");
}
}
}
}
}
}
});
</script>
</body>
</html>
什么是组件?
- 页面上每个独立的区域就是组件, 例如: 搜索框, 下拉菜单, 导航栏等
- 将重复的代码封装成组件
用途
- 在Vue里, 每一个页面就是一个独立的组件
- 将多个组件可以自由组合
好处
- 效率高, 有现成的组件直接拿来用
- 低耦合, 有利于协同开发, 代码不互相依赖
- 灵活定制, 可以自由开发组件
Vue里的组件
- 在应用程序开发中, 有些组件是没有的, 需要自定义一个组件
- Vue 内置的组件有:
- 有很多Vue的第三方组件库, 例如:
- 组件可以作为模板
- 组件可以制作sap 单页
- 性能好, 最接近原生iOS和安卓开发的APP
使用组件
全局组件
第一步 创建全局组件
- 通过
Vue.conponent()创建一个全局组件 - Vue首字母为大写, 表示是类, 不是实例, 这是类方法
第一个参数为组件名称, 可以自定义,要求小写, 并且包含一个短杠
Vue类方法 组件名称 组件数据存到对象 Vue.component('my-component', {template: '#example'})template两种方式: id和html结构
第二步 调用组件
- 组件名称就是标签名称
<div id="example"> <my-component>我是新的组件!</my-component> </div>
现在我们可以在html里直接使用组件了, 但是和div标签一样, 并没有特别的效果.
第三步 在组件中使用data
- 给组件添加数据data和方法 method