一.品牌案例
首先是品牌案例出手，巩固之前的知识点，顺便回顾下基本的Js方法，这里不使用css样式，就最基本的html表格展示:
直接上代码:
<!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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
[v-cloak] { //用于渲染数据完成后展示
display: none
}
</style>
<body>
<div id="app">
id:<input value="id" v-model="id"><br> //输入框绑定data中的id
name:<input value="name" v-model="name"> //name绑定车的姓名
<button @click="addCar">添加</button> //添加方法
<br>
搜索名称关键字:<input v-model="keyword"> //绑定关键字
<table style="border:1px solid black"> //table展示
<tr> //表头
<td>id</td>
<td>品牌名称</td>
<td>添加时间</td>
<td>操作</td>
</tr>
<tr v-for="(item,i) in search(keyword)" :key="item.id"> //从search返回的List遍历取值并展示，同时使用:key绑定对应的值
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time}}</td>
<td @click="deleteByIndex(i)"><button>删除</button></td> //传对应的索引，根据索引删值
</tr>
</table>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
id: '', //新增id
name: '', //新增name
keyword: '', //关键字搜索
car: " ", //新增车辆对象
cars: [{ //默认展示的对象数组
id: 1,
name: '宝马',
time: new Date()
}, {
id: 2,
name: '奔驰',
time: new Date()
}],
},
methods: {
addCar() { //新增车辆，获取到输入的id和name，并Push到this.cars即可，同时清空id和name
this.car = {
id: this.id,
name: this.name,
time: new Date
}
this.cars.push(this.car)
this.id = this.name = null
},
deleteByIndex(index) { //根据索引删除对应的内容
this.cars.splice(index, 1)
},
search(keyword){ //根据关键字搜索，这里使用foreach,js的字符串查询，indexOf，如果=-1则没有该字符串
//方法1: let tempList=[]
// this.cars.forEach(item => {
// if(item.name.indexOf(keyword) != -1){
// tempList.push(item)
// }
// })
// return tempList
//方法2:
let tempList = this.cars.filter(item=>{ //es6的新特性filter，用来过滤生成新数组并返回tempList，使用includes方法判断是否包含
if(item.name.includes(keyword)){
return item
}})
return tempList
}
}
})
</script>
</body>
</html>
说明: 一些Es6的新特性
//forEach:没办法停止遍历，全部都遍历结束
//some:可以提前终止
//filter:过滤,筛选符合条件的数据
//findIndex:查找下标
过滤器
过滤器的使用:mustache和v-bind两种指定才能使用过滤器，其他的不能使用过滤器
过滤器的定义: 并且可以有多个过滤器，内容依次往后传递
//data永远都是过滤器使用传递过来的值
app.filter('过滤器的名称',function(data,arg1,arg2){
return data+'123'+arg1+arg2
})
//过滤器的使用,可以传多个参数
{{name|namenpe(arg1,arg2)}}
配合全局时间过滤器的使用:
Vue.filter('dateFormat',function(data,type='yyyy-mm-dd'){ //获取时间并判断转换日期格式，可以用户自定义
var dt = new Date(data) //转换时间
var y = dt.getFullYear //年
var m = dt.getMonth +1 //月
var d = dt.getDate //日
if(type.toLowerCase()=='yyyy-mm-dd hh:mm:dd'){ //大小写转换
var h = dt.getHours //时
var mm = dt.getMinutes //分
var ss = dt.getSeconds //秒
return `${y}-${m}-${d}-${h}:${mm}:${ss}` //return格式
}else{
return `${y}-${m}-${d}`
}
})
全局过滤器:所有的vm实例都能共享，比如多个app,对应多个vm，那么都能共享。私有过滤器:在当前的vm中定义私有过滤器:如果同名，那么有限调用私有过滤器，就近原则:
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
},
methods: {
},
filters:{
dataFormat(dateStr,pattern){
//局部过滤器1 过滤器调用的时候采用就近原则，如名称一致，那么优先调用私有过滤器
}
}
})
</script>
Es6:padStart:填充字符换方法，两个参数(maxLength,fillString=’ ') 8->08
var m = dt.getMonth +1.toString().padStart(2,'0')
自定义修饰符:
- @keyup.enter:回车键，
- .tab
- .delete
- .esc
- space
- up
- down
- left
- right
自定义全局按键修饰符:
Vue.config.KeyCodes.f2=113 //不过现在浏览器新特性已经支持f2了
name:<input value="name" v-model="name" @keyup.f2="addCar">
默认获取焦点:自定义指令:v-fous:
Vue.directive('focus',{
bind:(el){ //样式
}, //每当指令绑定到元素上时会执行的函数，只执行一次，但是刚绑定的时候还没能插入到Dom元素中去，因此focus在这里不生效
inserted:(el){
el.focus() //行为，防止不生效
}, //表示元素插入到DOM中的时候会执行insrted函数
update:(el){
} //当VNode更新时会执行update，可能会触发多次
}):
定义全局的指令，参数1:指令的名称，在定义时前面不需要加v-前缀，但是在i调用时指令名称前加上v-调用。参数2是一个对象，有一些指令相关的函数，这些函数可以在特定的时候执行相关操作.在每个函数中，第一个参数永远都是el，就是原生的js对象，调用原生的dom方法。
Vue.directive('focus',{
inserted(el){
el.focus()
}
})
样式只要绑定给了元素，不管这个元素有没有被插入到页面中，这个元素肯定有了一个内联的样式，将来元素肯定会显示，浏览器会解析应用给这个元素，通常第二个参数为binding,里面有几个常用的值:name,value,expression即可。demo:
Vue.directive('color',{ //定义color指令
bind(el,binding){
el.style.color=binding.value //操作原生dom改变颜色
}
})
搜索名称关键字:<input v-model="keyword" v-focus v-color="'green'">
将文本框内容的颜色渲染成绿色
私有指令:绑定在vm下，和data,methods,filter同级:
directive:{
‘fontweight’:{
bind(el,binding){
el.style.fontWeight=binding.value
}
}
}
简写:->
'fontsize':(el,binding){ //类似存放在了bind和update上
el.style.fonsize=binding.value
}
Vue对象的生命周期:
分类:创建阶段/运行阶段/销毁阶段
new Vue()->初始化:->beforeCreated(第一个生命周期函数，实例完全被创建出来之前会执行)，data和methods中的内容都没被初始化->init data and method->created(数据和方法都能被获取到，最早的方法)->判断是否有el,判断是否有template，如果没有的话就把el编译为模板，只是在内存中渲染好了->编译完之后要挂载:before mount:模板编译完成，还没渲染到页面->内容只是{{msg}}->将内存中编译好的模板真实地替换到浏览器中->mounted()输出真实值。->此时如果没有其他操作，实例就不动了->如果通过插件操作页面上的DOM节点，最早要在mounted中进行->运行阶段:当数据改变时候的两个函数:beforeUpdate/update两个函数，这两个函数会根据data的改变会有选择性的触发0-无穷大次->销毁:beforeDestory钩子函数:都处于可用状态，还没有真正进行销毁的过程->destory,真正的进行销毁.
扫一扫
165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
