Vue 前端知识汇总（二）
Vue过滤应用
需求 ： 当我们输入表单就开始过滤查询过滤出包含字段的元素
1- 使用@change方法 这个方法 是鼠标失去焦点才开始触发
2- 使用@input方法 这个方法是只要value值改变才开始触发
根据我们的业务逻辑 该先择使用第二种方法 来完成我们的业务逻辑
<body><div id="app"><input type="text" @input="handleInput()"><ul><li v-for="item in dataList">{{item}}</li></ul></div></body></html><script>new Vue({el: '#app',data: {dataList: ['aaa', 'bbb', 'ccc', 'abc', 'ddd']},methods: {handleInput(){console.log('只要value改变就会触发这个方法')}},})</script>
使用数据双向绑定 v-model 来绑定这个状态
<input type="text" ="handleInput()" v-model="mytext"><script>new Vue({el: '#app',data: {mytext:'',dataList: ['aaa', 'bbb', 'ccc', 'abc', 'ddd']},methods: {handleInput(){console.log(this.mytext)}},})</script>
使用 filter 方法过滤
下面我来写一个简单的小案例
使用filter方法遍历找出当前项大于 3 的数字
var arr = [1,2,3,4,5]var newArr = arr.filter(item=>{return item>3})console.log(newArr)// (2) [4, 5]
继续写我们的业务逻辑
methods: {handleInput(){var newList = this.dataList.filter(item=>item.indexOf(this.mytext)>-1)//使用indexOf判断元素是否存在 大于-1 过滤 存在的元素console.log(newList)//返回我们过滤出来的元素}},
业务逻辑 ： 将返回出过滤的数组替换原来的数组
将当前的数组等于我们的新数组不就好了吗
记住这种方法是不可行的
当我们每次dataList过滤时 都会对newList进行改变
methods: {handleInput(){var newList = this.dataList.filter(item=>item.indexOf(this.mytext)>-1)//使用indexOf判断元素是否存在 大于-1 过滤 存在的元素//console.log(newList)//返回我们过滤出来的元素this.dataList = newList}},
现在我们有两种办法来满足我们当前的业务逻辑
1- 再声明一个数据 list 改变list的数组 当返回还是返回dataList （不提倡）
<script>new Vue({el: '#app',data: {mytext:'',dataList: ['aaa', 'bbb', 'ccc', 'abc', 'ddd'],list: ['aaa', 'bbb', 'ccc', 'abc', 'ddd']},methods: {handleInput(){var newList = this.list.filter(item=>item.indexOf(this.mytext)>-1)//使用indexOf判断元素是否存在 大于-1 过滤 存在的元素// console.log(newList)this.dataList=newList}},})</script>
视频演示
2- 使用计算属性 （提倡该方法）
在我们使用 计算属性 结果一样
<body><div id="app"><input type="text" v-model="mytext"><ul><!-- 改变后的dataList --><li v-for="item in getDataList">{{item}}</li></ul></div></body></html><script>new Vue({el: '#app',data: {mytext:'',dataList: ['aaa', 'bbb', 'ccc', 'abc', 'ddd']},computed: {getDataList(){return this.dataList.filter(item=>item.indexOf(this.mytext)>-1)}},})</script>
Vue中的事件冒泡
在我们的js中存在事件冒泡 当然vue中也存在
举例子说明
在
<body><div id="app"><ul @click=handleUlClick()><li @click=handleLiClick()>111</li><li>222</li><li>333</li></ul></div></body></html><script>new Vue({el:'#app',methods: {handleUlClick(){console.log('ul的点击事件')},handleLiClick(){console.log('li的点击事件')}},})</script>
当我们点击111的时候 ul触发点击事件 再次点击222时 ul也触发事件
阻止事件冒泡
在点击事件的方法后面加参数 $event 事件对象方法 点击111阻止ul冒泡
使用事件修饰符 @click.stop 同样可以阻止事件冒泡
使用事件修饰符 @click.self 只有点击ul才会触发这个方法
使用事件修饰符 @click.once 只执行一次
使用事件修饰符 @click.prevent 阻止a标签的默认行为
<body><div id="app"><ul @click=handleUlClick($event)><li @click=handleLiClick($event)>111</li><li>222</li><li>333</li></ul><a href="https://www.baidu.com/" @click.prevent='handleChangePage()'>百度</a></div></body></html><script>new Vue({el: '#app',methods: {handleUlClick(ev) {console.log(ev)console.log('ul的点击事件')},handleLiClick(ev) {ev.stopPropagation();console.log('li的点击事件')},handleChangePage(){console.log('百度')}},})</script>
按键修饰符
当我们点击键盘的时候触发
使用事件修饰符 @click.enter 触发回车
使用事件修饰符 @click.键盘的键值/13回车键值
<body><div id="app"><input type="text" @keyup.enter="handleKeup($event)"><input type="text" @keyup.13="handleKeup($event)"></div></body></html><script>new Vue({el: '#app',methods: {handleKeup(ev){console.log('回车触发')}},})</script>
数据双向绑定
<body><div id="app"><input type="text" v-model="text">{{text}}</div></body></html><script>new Vue({el: '#app',data:{text:''},})</script>
Vue购物车案例
案例需求 下载bootstrap
在html中引入 bootstrap 样式
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"><table class="table table-hover table-striped"><thead><tr><th>ID</th><th>Name</th><th>NCtime</th><th>Operation</th></tr></thead><tbody><tr><td></td></tr></tbody></table>
创建假数据
<script>new Vue({el: '#app',data: {list: [{id: 1,name: '奔驰',ctime: new Date()},{id: 2,name: '宝马',ctime: new Date()},{id: 3,name: '玛莎拉蒂',ctime: new Date()},]},methods: {},})</script>
将数据展现到网页中
<table class="table table-bordered table-hover table-striped"><thead><tr><th>ID</th><th>Name</th><th>NCtime</th><th>Operation</th></tr></thead><tbody><tr v-for="item in list" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="#">删除</a></td></tr></tbody></table>
开始写 添加功能
<div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加品牌</h3></div><div class="panel-body form-inline"><label>ID<input type="text" class="form-control"></label><label>Name<input type="text" class="form-control"></label><label><input type="button" value="添加" class="btn btn-primary"></label></div></div>
基本样式完成
给所需要的添加元素 添加事件
<input type="text" class="form-control" v-model="id">
<input type="text" class="form-control" v-model="name">
在vue中 使用事件绑定机制 为元素指定处理函数的时候 如果加了小括号 就可以给函数传参
<input type="button" value="添加" class="btn btn-primary" @click="add()">
添加功能 业务逻辑
1- 获取到ID /Name 直接从data上面获取
2- 组织一个对象
3- 把这个对象 调用数组的相关方法 添加到当前data中的list
注意 ： 在Vue中 已经实现了数据双向绑定 每当我们修改了data中的数据 Vue会默认监听到数据的改动 自动的把最新的数据 应用到页面中
完成这三部业务逻辑
data: {<a href="#" @click.prevent="del(item.id)">删除</a>id: '',//id为空name: '',//name为空list: [{id: 1,name: '奔驰',ctime: new Date()},{id: 2,name: '宝马',ctime: new Date()},{id: 3,name: '玛莎拉蒂',ctime: new Date()},]},methods: {add() {var car = {id: this.id, name: this.name,ctime: new Date()}this.list.push(car)}}
添加完之后 清空输入框的字
this.id=this.name='' 在后面直赋值为 ‘ ’
给所需要的删除元素 添加事件
删除功能 要删除的是item.id 将它作为参数放到删除事件中
<a href="#" @click.prevent="del(item.id)">删除</a>
删除业务 业务逻辑
1- 如何根据id找到要删除这样一项的索引
2- 如果找到索引 直接调用数组的 splice 方法
删除方法 有两种方法
1- 使用some方法
定义和用法
some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。
some() 方法会依次执行数组的每个元素：
> 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
> 如果没有满足条件的元素，则返回false。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。
del(id) {this.list.some((item, i) => {if (item.id == id) {this.list.splice(i, 1)// 在数组的some 方法中 如果return true 就会立即终止数组的后续循环return true}})}
1- 使用findIndex方法 直接找到index
定义和用法
findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
findIndex() 方法为数组中的每个元素都调用一次函数执行：
> 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
> 如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。
del(id) {var index = this.list.findIndex(item => {if (item.id == id) {return true}})console.log(index)}
直接调用index同样可以删除
this.list.splice(index,1)
搜索 功能样式
样式 添加标签
<label>搜索关键字:<input type="text" class="form-control" v-model="keywords"></label>
以及在data中定义双向绑定
keywords:'', //搜索关键字
搜索关键字 功能业务逻辑
1- 之前 v-for 中的数据 都是直接从data上的list 直接渲染过来的 现在我们定义了一个search方法 同时把搜索的关键字通过参数传递过来
2- 在search 方法内部 通过执行for循环 把符合搜索的关键字返回到新数组中 返回
搜索方法 有两种方法
1- 使用forEach方法 来遍历数组
search(keywords) {var newList = []this.list.forEach(item => {if (item.name.indexOf(keywords) > -1) {newList.push(item)}})return newList}
2- 使用filter方法 来遍历数组
includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
直接将结果return
return this.list.filter(item => {if (item.name.includes(keywords)) {return item}})
视频演示
codekrist