一.使用vue制作一个可以新增修改删除检查的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,td{
text-align: center;
}
.xzym {
width:100%;
height:500px;
background-color:rgba(0,0,0,0.2);
position:absolute;
top:0;
}
.xzymm {
width:500px;
height:400px;
background-color:white;
margin:50px auto;
}
</style>
</head>
<body>
<div id="app">
<button @click="openBtn()">新增</button>
<input type="text" v-model="queryStr">
<button @click="queryBtn()">查询</button>
<button @click="resetBtn()">重置</button>
<table width="100%" border="1" cellpadding="0" cellspacing="0" align="center">
<tr>
<th>序号</th>
<th>姓名</th>
<th>学号</th>
<th>手机号</th>
<th>操作</th>
</tr>
<!-- <div v-if="">
<tr v-for="(item,index) of datalist" :key="index+item">
</div> -->
<tr v-for="(item,index) of datalist" :key="index+item">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.schoolNum}}</td>
<td>{{item.iphone}}</td>
<td>
<button @click="updataBtn(item)">修改</button>
<button @click="del(item.schoolNum)">删除</button>
</td>
</tr>
</table>
<!-- 新增页面 -->
<div class="xzym" v-show="fal">
<div class="xzymm">
<h1 v-text="contexts"></h1>
<label for="">姓名:</label>
<input type="text" v-model="obj.name">
<br>
<label for="">学号:</label>
<input type="text" v-model="obj.schoolNum">
<br>
<label for="">电话号码:</label>
<input type="text" v-model="obj.iphone">
<br>
<button @click="addBtn()">确认</button>
<button @click="clone()">取消</button>
</div>
</div>
</div>
</body>
<script src="../vue.js"></script>
<script>
Vue.config.productionTip = false;
var vm = new Vue({
el:"#app",
data() {
return {
fal:false,
// 新增修改切换的文字
contexts:"",
// 查询绑定值
queryStr:"",
obj:{
name:"",
schoolNum:"",
iphone:""
},
datalist:[],
newDatas:[],
schoolNums:"",
}
},
methods: {
// 新增\修改打开
openBtn(){
this.fal = true;
this.contexts = "新增";
},
// 新增|修改提交
addBtn(){
if(this.contexts == "新增"){
this.datalist.push({
name:this.obj.name,
schoolNum:this.obj.schoolNum,
iphone:this.obj.iphone
})
}else{
this.datalist.map((item,index)=>{
if(item.schoolNum==this.schoolNums){
this.datalist.splice(index,1,{
name:this.obj.name,
schoolNum:this.obj.schoolNum,
iphone:this.obj.iphone
})
}
})
}
this.clone();
},
// 取消
clone(){
this.fal = false;
this.obj={
name:"",
schoolNum:"",
iphone:""
}
},
// 删除事件
del(user){
// this.datalist.map((item,index)=>{
// if(item.schoolNum==user){
// this.datalist.splice(index,1);
// }
// })
this.datalist = this.datalist.filter((item)=> item.schoolNum !== user);
},
// 修改
updataBtn(user){
this.contexts = "修改";
this.fal = true;
this.schoolNums = user.schoolNum;
this.obj={
name:user.name,
schoolNum:user.schoolNum,
iphone:user.iphone
}
},
// 查询
queryBtn(){
this.newDatas = this.datalist;
this.datalist = this.datalist.filter((item,index)=>{
return item.name==this.queryStr;
})
},
// 重置
resetBtn(){
this.queryStr = "";
this.datalist = this.newDatas;
}
},
})
</script>
</html>
二.computed计算属性
规则：
1.使用已有的属性来计算不存在的属性
2.默认调用一次get
3.简写形式（函数）没有set方法，如果需要更改值必须使用对象写法，不能使用函数
4.原理使用了Object.defineproperty(目标对象,名称,{get(),set(value)})
例：
computed:{ info(){ return this.bool?"炎热":"凉爽"; }, // abc:{ // get(){ // console.log("触发了get"); // return 2; // }, // set(value){ // console.log("触发了set"); // console.log(value); // } // }, abc(){ console.log("触发了get"); return 1; } },
三. watch监听属性
规则：
1.监听已有的属性
2.immediate设置为true默认触发一次，false不会默认触发
3.handler(新值,旧值)函数，当监听值发生改变时就会触发handler函数
4.写法：第一种Vue实例中，第二种实例化vm.$watch("监听的属性",{})
5.watch默认监听一层，需要监听多级如对象中的值，需要添加深度监听deep:true
6.简写，只有handler函数，才可以简写。写法：监听的属性名(新值,旧值){}
例：
watch:{ bool:{ immediate:false, handler(newValue,oldValue){ console.log(newValue); console.log(oldValue); console.log(this); if(newValue==true){ this.userName = "张三"; this.obj.id = 100; }else{ this.userName = "李四"; this.obj.id = 99; } } },
四. computed与watch的区别
1.computed能做到的watch都可以，watch能做到的computed不一定能
2.被Vue实例管理的函数最好都使用普通函数，不被Vue实例管理的函数最好都使用箭头函数
五. 全局自定义指令和全局过滤器
全局自定义指令
Vue.directive()
过滤器
1.两种写法：Vue.filter("名称",函数(接收前一个的值))
new Vue({filters:{函数名(接收前一个的值){}}})
2.过滤后产生新的数据值，多个过滤器串联，
3.使用时|过滤名 过滤名后面可加可不加()
例:
Vue.filter("mySlice",function(value){ // console.log(value); // return value.slice(0,11); // return value.substring(0,11); return value.substr(0,11); })
六. beforeCreate
1. beforeCreate初始化之前,取不到data和methods中的数据
beforeCreate() { console.log("beforeCreate触发的生命周期"); console.log(this.time); // console.log(this.sum()); },2.created初始化之后, 可以取到data和methods中的数据
created() { console.log("created触发的生命周期"); console.log(this.time); console.log(this.sum()); },3.beforeMount解析前|挂载前
beforeMount() { this.a = false; this.texts = 222222222; },4. mounted解析后|挂载后
1.定时器，绑定自定义事件，发送请求，订阅消息
mounted() { this.texts = 3333333333; },
七.生命周期
1.是回调函数，钩子函数
2.生命周期名称不可以更改
3.this指向vue实例化对象
局部过滤器
filters:{ newDates(value,str="YYYY年MM月DD日 HH:mm:ss"){ // return new Date(value); // console.log(time); // let times = time.toISOString(); // console.log(times); return dayjs(value).format(str); // console.log(value); // 年 // let values = value-13*24*60*60*1000; // let a = values/1000/60/60/24/365; // let a1 = parseInt(a); // console.log(aa); // let b = (values/1000/60/60/24/365-a1)*12; // let b2 = (values/1000/60/60/24/365-a1); // let b1 = parseInt(b); // let c = ((values/1000/60/60/24/365-a1)*366-b1*30) // //月 // console.log(a); // console.log(a+1970); // console.log(b+1); // console.log(c); // console.log(b2); } },局部自定义指令
directives:{},
计算属性
computed:{},
监听属性
watch:{},
八.day13.html
// 销毁
this.$destroy()
}
},
beforeCreate() {},
created() {},
beforeMount() {},
// 挂载后
mounted() {
this.times = setInterval(()=>{
this.opacity-=0.01;
if(this.opacity<=0) {
this.opacity=1;
}
},10)
},
// 更新前
beforeUpdate() {
},
// 更新后
updated() {
},
// 销毁前
beforeDestroy() {
clearInterval(this.times);
console.log("触发了销毁前");
},
// 销毁后
destroyed() {
},
})
console.log(vm);
</script>
</html>
扫一扫
799
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
