vue快速学习02、基础用法
目录
1、数据双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--视图层-->
<div id="app">
<input type="text" v-model="Msg"><br/>
<p>{{Msg}}</p>
</div>
<!--引入vue环境-->
<script src="js/vue.js"></script>
<!--视图模型层-->
<script>
/* Vue的基础使用方法，内部参数格式为json*/
new Vue({
el: "#app",
data: {
Msg: "天使之吻"
}
})
</script>
</body>
</html>2、数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<fieldset>
<legend>姓名栏</legend>
<p>姓：<input type="text" v-model="xing" /></p>
<p>名：<input type="text" v-model="ming" /></p>
<p>{{xing}}_{{ming}}</p>
</fieldset>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
xing: "",
ming: ""
}
});
</script>
</body>
</html>3、钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg: ""
},
created() {
console.log("初始化");
},
mounted() {
console.log("完成初始化");
},
beforeDestroy() {
console.log("销毁前执行，看不到。");
}
});
</script>
</body>
</html>4、created函数用法1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div id="show">{{ShowText}}</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
StrArray: ["北京第三区交通委提醒您",
"道路千万条",
"安全第一条",
"行车不规范",
"亲人两行泪"
],
index: 0,
ShowText: ""
},
created() {
var _this = this;
_this.ShowText = _this.StrArray[0];
setInterval(() => {
_this.index++;
if (_this.index == _this.StrArray.length) {
_this.index = 0;
}
_this.ShowText = _this.StrArray[_this.index];
}, 2000);
}
});
</script>
</body>
</html>5、created函数用法2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div>{{ShowTime}}</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
ShowTime: "" //Vue里data数据不能给null
},
created() {
//时间的处理
var _this = this;
setInterval(() => {
var str = "当前日期时间是：";
var d = new Date();
var year = d.getFullYear();
var month = (d.getMonth() + 1).toString().padStart(2, '0');
var day = d.getDate().toString().padStart(2, '0');
var hour = d.getHours().toString().padStart(2, '0');
var min = d.getMinutes().toString().padStart(2, '0');
var se = d.getSeconds().toString().padStart(2, '0');
_this.ShowTime = str + year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + se;
}, 1000);
}
});
</script>
</body>
</html>6、filters过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="showText" />
<hr/>
<p>{{showText|filterText}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
showText: ""
},
filters: {
filterText: function(o) {
var isf = o.indexOf("傻") == -1;
return isf ? o : "*";
}
}
})
</script>
</body>
</html>7、v-once与v-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<span>{{Msg}}</span>
<hr/>
<span v-once>{{Msg}}</span>
<hr/>
<span v-text>{{Msg}}</span>
<hr/>
<input type="text" v-model="Msg" />
</div>
<script>
new Vue({
el: "#app",
data: {
Msg: "我是基础的参数"
}
})
</script>
</body>
</html>8、数据计算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 视图层 -->
<div id="app">
<fieldset>
<legend>个人薪资计算器</legend>
<p>基本工资：<input type="text" v-model="a1" /></p>
<p>岗位工资：<input type="text" v-model="a2" /></p>
<p>月度奖金：<input type="text" v-model="a3" /></p>
<p>综合补贴：<input type="text" v-model="a4" /></p>
<p>扣款金额：<input type="text" v-model="a5" /></p>
<p>应发工资：￥{{parseFloat(a1)+parseInt(a2)+parseInt(a3)+parseInt(a4)-parseInt(a5)}}元</p>
</fieldset>
</div>
<!-- 引入环境 -->
<script src="js/vue.js"></script>
<!-- 视图模型 -->
<script>
new Vue({
el: "#app",
data: {
a1: 0,
a2: 0,
a3: 0,
a4: 0,
a5: 0
}
})
</script>
</body>
</html>9、数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<img :src="url" v-bind:style="sty" />
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
url: "imgs/1 (10).png",
sty: "width:300px;height:250px;border:5px solid red"
}
})
</script>
</body>
</html>10、样式控制1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.co {
color: red;
}
.bgc {
background-color: skyblue;
}
.fs {
font-size: 2rem;
}
.bo {
border: 2px solid hotpink;
}
.bor {
border-radius: 50%;
}
.fc {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<p><input type="checkbox" v-model="state1" />字体颜色</p>
<p><input type="checkbox" v-model="state2" />背景颜色</p>
<p><input type="checkbox" v-model="state3" />文字大小</p>
<p><input type="checkbox" v-model="state4" />添加边框</p>
<p><input type="checkbox" v-model="state5" />圆角边框</p>
<p><input type="checkbox" v-model="state6" />文字居中</p>
<hr/>
<p v-bind:class="{co:state1,bgc:state2,fs:state3,bo:state4,bor:state5,fc:state6}">安杰有一个美丽、大方、端庄、孝心的女朋友</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
state1: false,
state2: false,
state3: false,
state4: false,
state5: false,
state6: false
}
})
</script>
</body>
</html>11、样式控制2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<img :src="url" style="width:100%;height:100vh" />
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
Imgs: [
"imgs/1 (1).png",
"imgs/1 (2).png",
"imgs/1 (3).png",
"imgs/1 (4).png",
"imgs/1 (5).png",
"imgs/1 (6).png",
"imgs/1 (7).png",
"imgs/1 (8).png",
"imgs/1 (9).png",
"imgs/1 (10).png",
"imgs/1 (11).png",
"imgs/1 (12).png",
"imgs/1 (13).png"
],
index: 0,
url: ""
},
created() {
//影分身之术
var _this = this;
_this.url = _this.Imgs[0];
//轮播
setInterval(() => {
_this.index++;
if (_this.index == _this.Imgs.length) {
_this.index = 0;
}
//将每次递增或归零的下角标赋值到数组上
_this.url = _this.Imgs[_this.index];
}, 2500);
}
})
</script>
</body>
</html>12、v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="isf" />登录/注册<br/>
<button v-on:click="change">切换</button>
<div v-if="isf">
<p>登录</p>
</div>
<div v-else>
<p>注册</p>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isf: true
},
methods: {
change: function() {
//bool值相互切换
this.isf = this.isf ? false : true;
}
}
})
</script>
</body>
</html>13、v-if、v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1 v-on:click="change" style="cursor: pointer">切换</h1>
<hr/>
<div v-if="isf">
<h1>注册</h1>
<p>账号：<input type="text" placeholder="请输入账号"></p>
<p>密码：<input type="password" placeholder="请输入密码"></p>
<p>二次输入密码：<input type="password" placeholder="请输入密码"></p>
<button>注册提交</button>
</div>
<div v-else>
<h1>登录</h1>
<p>账号：<input type="text" placeholder="请输入账号"></p>
<p>密码：<input type="password" placeholder="请输入密码"></p>
<button>登录提交</button>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isf: true
},
methods: {
change: function() {
//反向切换bool值方法
this.isf = this.isf ? false : true;
}
}
})
</script>
</body>
</html14、v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1><span v-on:click="choose(1)">选项卡一</span><span v-on:click="choose(2)">选项卡二</span></h1>
<div v-if="show1">
某人拥有十个雍容华贵，沉鱼落雁，闭月羞花的姐姐。
</div>
<div v-if="show2">
某人需要一个善解人意，手下过百将的巾帼红颜。
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
show1: true,
show2: false
},
methods: {
choose: function(o) {
console.log(o);
var _this = this;
if (o == "1") {
_this.show1 = true;
_this.show2 = false;
} else {
_this.show2 = true;
_this.show1 = false;
}
}
}
})
</script>
</body>
</html>15、watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<p>用户名:
<input type="text" v-model="userName" placeholder="请输入用户名" />
<span v-if="isf" style="color: red">该用户名规范为6-16字符</span>
</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
userName: "",
isf: false
},
watch: {
userName: function(newWord, oldWord) {
if (newWord.length < 6 || newWord.length > 16) {
this.isf = true;
} else {
this.isf = false;
}
}
}
})
</script>
</body>
</html>16、v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<p v-for="item in list" class="text-center">
<span class="text-info">{{item}}</span>
</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
list: [
"九月九日忆山东兄弟",
"王维",
"独在异乡为异客，",
"每逢佳节倍思亲。",
"遥知兄弟登高处，",
"遍插茱萸少一人。"
]
}
});
</script>
</body>
</html>17、computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 视图层 -->
<div id="app">
<p><input type="text" placeholder="根据姓名搜索" v-model="SelectKey" /></p>
<hr/>
<table class="table table-hover table-border text-center">
<tr class="info">
<td> 编号 </td>
<td> 姓名 </td>
<td> 薪水 </td>
<td> 性别 </td>
<td> 操作 </td>
</tr>
<tr v-for="(item,index) in newlist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.sex==0?"女":"男"}}</td>
<td><button class="btn btn-success">删除</button></td>
</tr>
</table>
</div>
<!-- 环境 -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!-- 视图模型 -->
<script>
new Vue({
el: "#app",
data: {
list: [{
id: 1,
name: "黄杰",
price: 100,
sex: 1
}, {
id: 2,
name: "李炳钊",
price: 999999,
sex: 1
}, {
id: 3,
name: "张培海",
price: 888888,
sex: 1
}, {
id: 4,
name: "雷静",
price: 50000,
sex: 0
}, {
id: 5,
name: "李春梦",
price: 1000000,
sex: 0
}],
SelectKey: ""
},
computed: {
newlist: function() {
var _this = this; //影分身
return _this.list.filter(function(o) {
return o.name.indexOf(_this.SelectKey) != -1;
});
}
}
})
</script>
</body>
</html>18、table增加操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 视图层 -->
<div id="app">
<p>
编号:<input type="text" placeholder="请输入编号" v-model="id" /> 姓名:
<input type="text" placeholder="请输入姓名" v-model="name" /> 薪水:
<input type="text" placeholder="请输入薪水" v-model="price" /> 性别:
<input type="text" placeholder="请输入性别" v-model="sex" />
<button v-on:click="addInfo" class="btn btn-primary">添加信息</button>
</p>
<hr/>
<p><input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p>
<hr/>
<table class="table table-hover table-border text-center">
<tr class="info">
<td> 编号 </td>
<td> 姓名 </td>
<td> 薪水 </td>
<td> 性别 </td>
<td> 操作 </td>
</td>
</tr>
<tr v-for="(item,index) in newlist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.sex==0?"女":"男"}}</td>
<td><button class="btn btn-success">删除</button></td>
</tr>
</table>
</div>
<!-- 环境 -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!-- 视图模型 -->
<script>
new Vue({
el: "#app",
data: {
list: [{
id: 1,
name: "黄杰",
price: 100,
sex: 1
}, {
id: 2,
name: "李炳钊",
price: 999999,
sex: 1
}, {
id: 3,
name: "张培海",
price: 888888,
sex: 1
}, {
id: 4,
name: "雷静",
price: 50000,
sex: 0
}, {
id: 5,
name: "李春梦",
price: 1000000,
sex: 0
}],
SelectKey: "",
id: 0,
name: "",
price: 0,
sex: 0
},
computed: {
newlist: function() {
var _this = this; //影分身
return _this.list.filter(function(o) {
return o.name.indexOf(_this.SelectKey) != -1;
});
}
},
methods: {
addInfo: function() {
this.list.push({
id: this.id,
name: this.name,
price: this.price,
sex: this.sex
});
}
}
})
</script>
</body>
</html>19、table删除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 视图层 -->
<div id="app">
<p>
编号:<input type="text" placeholder="请输入编号" v-model="id" /> 姓名:
<input type="text" placeholder="请输入姓名" v-model="name" /> 薪水:
<input type="text" placeholder="请输入薪水" v-model="price" /> 性别:
<input type="text" placeholder="请输入性别" v-model="sex" />
<button v-on:click="addInfo" class="btn btn-primary">添加信息</button>
</p>
<hr/>
<p><input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p>
<hr/>
<table class="table table-hover table-border text-center">
<tr class="info">
<td> 编号 </td>
<td> 姓名 </td>
<td> 薪水 </td>
<td> 性别 </td>
<td> 操作 </td>
</tr>
<tr v-for="(item,index) in newlist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.sex==0?"女":"男"}}</td>
<td><button class="btn btn-success" v-on:click="del(index)">删除</button></td>
</tr>
</table>
</div>
<!-- 环境 -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!-- 视图模型 -->
<script>
new Vue({
el: "#app",
data: {
list: [{
id: 1,
name: "黄杰",
price: 100,
sex: 1
}, {
id: 2,
name: "李炳钊",
price: 999999,
sex: 1
}, {
id: 3,
name: "张培海",
price: 888888,
sex: 1
}, {
id: 4,
name: "雷静",
price: 50000,
sex: 0
}, {
id: 5,
name: "李春梦",
price: 1000000,
sex: 0
}],
SelectKey: "",
id: 0,
name: "",
price: 0,
sex: 0
},
computed: {
newlist: function() {
var _this = this; //影分身
return _this.list.filter(function(o) {
return o.name.indexOf(_this.SelectKey) != -1;
});
}
},
methods: {
addInfo: function() {
this.list.push({
id: this.id,
name: this.name,
price: this.price,
sex: this.sex
});
},
del: function(o) {
if (confirm('是否删除此行?')) {
this.list.splice(o, 1);
}
}
}
})
</script>
</body>
</html>20、table修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 视图层 -->
<div id="app">
<p>
编号:<input type="text" placeholder="请输入编号" v-model="id" /> 姓名:
<input type="text" placeholder="请输入姓名" v-model="name" /> 薪水:
<input type="text" placeholder="请输入薪水" v-model="price" /> 性别:
<input type="text" placeholder="请输入性别" v-model="sex" />
<button v-on:click="addInfo" class="btn btn-primary">添加信息</button>
<button v-on:click="updateById" class="btn btn-primary">保存修改</button>
</p>
<hr/>
<p><input type="text" placeholder="请输入搜索内容" v-model="SelectKey" /></p>
<hr/>
<table class="table table-hover table-border text-center">
<tr class="info">
<td> 编号 </td>
<td> 姓名 </td>
<td> 薪水 </td>
<td> 性别 </td>
<td> 操作 </td>
</tr>
<tr v-for="(item,index) in newlist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.sex==0?"女":"男"}}</td>
<td><button class="btn btn-success" v-on:click="del(index)">删除</button>
<button class="btn btn-primary" v-on:click="getInfo(item)">修改</button></td>
</tr>
</table>
</div>
<!-- 环境 -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!-- 视图模型 -->
<script>
new Vue({
el: "#app",
data: {
list: [{
id: 1,
name: "黄杰",
price: 100,
sex: 1
}, {
id: 2,
name: "李炳钊",
price: 999999,
sex: 1
}, {
id: 3,
name: "张培海",
price: 888888,
sex: 1
}, {
id: 4,
name: "雷静",
price: 50000,
sex: 0
}, {
id: 5,
name: "李春梦",
price: 1000000,
sex: 0
}],
SelectKey: "",
id: 0,
name: "",
price: 0,
sex: 0
},
computed: {
newlist: function() {
var _this = this; //影分身
return _this.list.filter(function(o) {
return o.name.indexOf(_this.SelectKey) != -1;
});
}
},
methods: {
addInfo: function() {
this.list.push({
id: this.id,
name: this.name,
price: this.price,
sex: this.sex
});
},
del: function(o) {
if (confirm('是否删除此行?')) {
this.list.splice(o, 1);
}
},
getInfo: function(o) {
this.id = o.id;
this.name = o.name;
this.price = o.price;
this.sex = o.sex;
},
updateById: function() {
for (var index = 0; index < this.list.length; index++) {
var item = this.list[index];
if (item.id == this.id) {
console.log(item.id);
this.list[index].name = this.name;
this.list[index].price = this.price;
this.list[index].sex = this.sex;
return;
}
}
}
}
})
</script>
</body>
</html>21、template
基础声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<myheart></myheart>
</div>
<script src="js/vue.js"></script>
<script>
//搭建母版
var myheart_tem = Vue.extend({
template: "<div><h1>My Heart Will Go On</h1><hr/><p>爱无止境·肉丝·杰克</p></div>"
});
//创建组件，第一个参数是自定义组件名称，母版
Vue.component("myheart", myheart_tem);
//创建VUE
new Vue({
el: "#app"
})
</script>
</body>
</html>template简单使用?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
overflow: hidden;
}
.myh {
background: #2E6EC2;
height: 10vh;
color: white;
font-size: 3rem;
line-height: 10vh;
}
.myc {
background-color: #F8F1DC;
text-align: center;
height: 85vh;
font-size: 5rem;
line-height: 85vh;
}
.myf {
background: #2E6EC2;
text-align: center;
height: 5vh;
color: white;
font-size: 2rem;
line-height: 5vh;
}
</style>
</head>
<body>
<div id="app">
<myhead></myhead>
<mycontent></mycontent>
<myfoot></myfoot>
</div>
<!-- 环境 -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
//创建母版
var head = Vue.extend({
template: "<div class='myh'>后台管理系统</div>"
});
var content = Vue.extend({
template: "<div class='myc'>后台管理中心内容</div>"
});
var foot = Vue.extend({
template: "<div class='myf'>版权所有：项目开发组</div>"
});
//绑定组件
Vue.component("myhead", head);
Vue.component("mycontent", content);
Vue.component("myfoot", foot);
new Vue({
el: "#app"
})
</script>
</body>
</html>22、components绑定组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>一堆水果的遍历</h1>
<!-- 需要的自定义的组件 -->
<show-fruit></show-fruit>
</div>
<!-- 模板·在APP的外面 -->
<template id="show">
<div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</template>
<!-- 环境 -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
new Vue({
el: "#app",
components: { //绑定组件
"show-fruit": {
data: function() {
return {
list: ["百香果", "蛇皮果", "姑娘果", "莲雾", "雪莲果"]
}
},
template: "#show"
}
}
})
</script>
</body>
</html>23、props传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<h1 align="center">员工信息表</h1>
<!-- 自定义组件名称 -->
<showlist :newlist="list"></showlist>
</div>
<!-- 组件的模板 -->
<template id="show">
<table class="table table-border" style="text-align: center">
<tr class="info">
<td>编号</td>
<td>诗词名称</td>
<td>作者</td>
<td>经典词语</td>
</tr>
<tr v-for="item in newlist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.worker}}</td>
<td><pre>{{item.classic}}</pre></td>
</tr>
</table>
</template>
<!-- 环境 -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
list: [{
id: 1,
name: "《将进酒》",
worker: "李白",
classic: "烹羊宰牛且为乐，会须一饮三百杯！"
}, {
id: 2,
name: "《夏日绝句》",
worker: "李清照",
classic: "生当作人杰，死亦为鬼雄！"
}, {
id: 3,
name: "《长恨歌》",
worker: "白居易",
classic: "回眸一笑百媚生，六宫粉黛无颜色。"
}, {
id: 4,
name: "《锦瑟》",
worker: "李商隐",
classic: "锦瑟无端五十弦，一弦一度思华年！"
}]
},
components: {
"showlist": {
props: ["newlist"],
template: "#show"
}
}
})
</script>
</body>
</html>24、components子父组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<h1>员工管理系统</h1>
<!-- 父类组件 -->
<fu-temp :showlist="list"></fu-temp>
</div>
<!-- 父类模板 -->
<template id="fu">
<div>
搜索：<input type="text" v-model="SelectKey" placeholder="请输入搜索内容"/>
<hr/>
<zi-temp :newlist="filterlist"></zi-temp>
</div>
</template>
<!-- 子类模板 -->
<template id="zi">
<div>
<table class="table table-border" style="text-align: center">
<tr class="info">
<td>编号</td>
<td>诗词名称</td>
<td>作者</td>
<td>经典词语</td>
</tr>
<tr v-for="item in newlist">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.worker}}</td>
<td><pre>{{item.classic}}</pre></td>
</tr>
</table>
</div>
</template>
<!-- 环境 -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
list: [{
id: 1,
name: "《将进酒》",
worker: "李白",
classic: "烹羊宰牛且为乐，会须一饮三百杯！"
}, {
id: 2,
name: "《夏日绝句》",
worker: "李清照",
classic: "生当作人杰，死亦为鬼雄！"
}, {
id: 3,
name: "《长恨歌》",
worker: "白居易",
classic: "回眸一笑百媚生，六宫粉黛无颜色。"
}, {
id: 4,
name: "《锦瑟》",
worker: "李商隐",
classic: "锦瑟无端五十弦，一弦一度思华年！"
}]
},
components: {
"fu-temp": {
props: ["showlist"],
data: function() {
return {
SelectKey: ""
}
},
template: "#fu",
components: {
"zi-temp": {
props: ["newlist"],
template: "#zi"
}
},
computed: {
filterlist: function() {
var _this = this;
return _this.showlist.filter(function(o) {
return o.classic.indexOf(_this.SelectKey) != -1;
});
}
}
}
}
});
</script>
</body>
</html>25、slot插槽使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>三好学生遍历</h1>
<!-- 声明自定义组件 -->
<showinfo :newlist="list">
<template slot="cache" slot-scope="props">
<li>{{props.item}}</li>
</template>
</showinfo>
</div>
<template id="show">
<div>
<slot name="cache" v-for="item in newlist" :item="item"></slot>
</div>
</template>
<!-- 环境 -->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
list: ["王佳乐", "张雄飞", "宋建飞"]
},
components: {
"showinfo": {
props: ["newlist"],
template: "#show"
}
}
})
</script>
</body>
</html>