Vue 前端知识汇总

Posted 2021-04-16 codekrist

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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" @input="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也触发事件

Vue 前端知识汇总（二）

阻止事件冒泡

在点击事件的方法后面加参数 $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>

Vue 前端知识汇总（二）

按键修饰符

当我们点击键盘的时候触发

使用事件修饰符 @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>

Vue 前端知识汇总（二）

数据双向绑定

<body> <div id="app"> <input type="text" v-model="text"> {{text}} </div></body>
</html><script> new Vue({ el: '#app', data:{ text:'' }, })</script>

Vue 前端知识汇总（二）

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>

Vue 前端知识汇总（二）

开始写添加功能

 <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>

Vue 前端知识汇总（二）

基本样式完成

给所需要的添加元素添加事件

在vue中使用事件绑定机制为元素指定处理函数的时候如果加了小括号就可以给函数传参

添加功能业务逻辑

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) } }

Vue 前端知识汇总（二）

添加完之后清空输入框的字

this.id=this.name='' 在后面直赋值为 ‘ ’

给所需要的删除元素添加事件

删除功能要删除的是item.id 将它作为参数放到删除事件中

删除业务业务逻辑

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:'', //搜索关键字

Vue 前端知识汇总（二）

搜索关键字功能业务逻辑

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

以上是关于Vue 前端知识汇总的主要内容，如果未能解决你的问题，请参考以下文章

前端常见知识点汇总(ES6，Vue，axios，Node.js，npm，webpack)

大厂真题汇总jQuery+angular+react+vue!这波羊毛它不香？