锐客网

  1. 首页 > 睿知 > it技术 > >

vue基础案例

vue


Vue案例

  • 题目列表
    • 一、电影分类
      • 1.1 电影分类class版。
    • 二、购物车
      • 2.1 数组every()方法
      • 2.2 数组splice()方法
      • 2.3 数组reduce()方法
    • 三、todolist
      • 3.1 用v-model添加待办事项。
      • 3.2 数组filter()方法
      • 3.3 filter()和map()的区别
      • 3.4 switch语句
    • 四、图书管理
    • 五，成绩查询
      • 5.1 input输入框
      • 5.2 v-model的使用
        • 1.复选框
        • 2.单选框
        • 3.下拉列表
      • 5.3 sort()方法
      • 5.4 获取对象属性点方法和中括号法的区别
    • 六，this总结
      • 6.1 普通函数中的this
      • 6.2 对象方法中的this
      • 6.3 事件中的this
      • 6.4 构造函数中的this
      • 6.5 箭头函数中的this

题目列表 一、电影分类 需求：（全部 动作 喜剧 谍战 历史）点击谁谁加粗。
//注意：template上面不能写 :key
="/lib/vue.js">> new Vue({ el: '#app', data() { return { movies: ['全部', '动作', '喜剧', '谍战', '历史'], current:'全部' } } })

1.1 电影分类class版。
> //加边距 #app>* { margin-left: 20px; } //设置样式 .active{ color:#ffffff; background-color: tomato; }
-for="item in movies" :key="item" :class="{active:item==current}" @click="current=item"> {{item}} //赋值运算符，将右边的值赋值给左边的变量。
="/vue.js"> > new Vue({ el: '#app', data() { return { movies: ['全部', '动作', '喜剧', '谍战', '历史'], current: '全部' } } })

二、购物车 需求：点击增加或减少，删除完显示购物车为空。vue基础案例
文章图片

//1.数组every方法
商品编号 商品名称 商品单价 商品数量 商品总价 商品操作
购物车为空
//思考：为什么渲染totalPrice要加() 合计：{{totalPrice()}}
="/vue.js"> > new Vue({ el: "#app", data() { return { goodsData: [ { _id: 1, name: '苹果', price: '20', count: 10 }, { _id: 2, name: '芒果', price: '10', count: 20 }, { _id: 3, name: '香蕉', price: '30', count: 30 }, { _id: 4, name: '梨子', price: '15', count: 40 } ] } }, //计算总价 methods: { totalPrice() { // 3.数组reduce累加方法 return this.goodsData.reduce((sum, item) => { return sum + item.price * item.count; }, 0) } }, })

2.1 数组every()方法
every()方法：对数组中的每一个元素进行比对，全为true结果返回true。some()方法则是只要有一个结果为true结果就返回true。
语法：array.every(function(currentValue,index,arr), thisValue)
  • value ：必须，当前元素的值。
  • index：可选，当前元素的索引值。
  • 【vue基础案例】arr：可选，当前元素属于的数组对象。
var arr=[10,30,40]; var flag = arr.every(function(value){ return value > 9; //箭头函数写法：var flag = arr.every(value=> value > 9) }) console.log(flag); //输出ture

2.2 数组splice()方法
splice()方法：用于添加或删除数组中的元素。
语法：array.splice(index,howmany,item1,.....,itemX)
index：起始下标位置（必选）。 例： goodsData.splice(2,2)//从第三个位置删除后两个元素 goodsData.splice(2,1,"apple")//从第三个位置删除一个元素并添加apple

2.3 数组reduce()方法
reduce()方法：接收一个函数作为累加器。
语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数：
  • total：必需。初始值, 或者计算结束后的返回值。
  • currentValue ：必需。当前元素
  • currentIndex ：可选。当前元素的索引
  • arr：可选。当前元素所属的数组对象。
  • initialValue：可选。传递给函数的初始值
例：
var arr = [3,9,4,3,6,0,9]; var sum = arr.reduce((total,currentValue)=>{ return total+currentValue },0) console.log(sum); //输出34

三、todolist 需求：点击切换。vue基础案例
文章图片

> .done { color: red; text-decoration: line-through; } .btns>*{ margin-right: 10px; }
    //遍历筛选后的数组 //用v-bind:class绑定style样式改写： //
  • {{item.text}}


>已完成：{{doneTotal}}/{{lists.length}}
="/vue.js"> > new Vue({ el: "#app", data() { return { //需要记录数据和其状态（完成或者未完成）因此用数组包对象 lists: [ { text: 'HTML', done: false }, { text: 'CSS', done: true }, { text: 'JS', done: false }, ], btns: ['全部', '已完成', '未完成'], current: '全部' } }, //1.数组filter()方法 //2.switch语句 computed:{ filterLists(){ switch (this.current){ case '已完成' : return this.lists.filter(item=>item.done); break; case '未完成' : return this.lists.filter(item=>!item.done); break; default:return this.lists; } }, //已完成的长度 doneTotal(){ return this.lists.filter(item => item.done).length; } } })

3.1 用v-model添加待办事项。
需求：vue基础案例
文章图片

data() { return { lists: [ { text: 'HTML', done: false }, { text: 'CSS', done: true }, { text: 'JS', done: false }, ], btns: ['全部', '已完成', '未完成'], current: '全部', addText:''//设置输入框默认为空 } }, //省略大部分代码。。。 methods: { addTodo(){ this.lists.push({ text:this.addText, done:false }); //输入后清空输入框 this.addText=''; } },

push()方法：向数组末尾（添加到开头则用unshift）添加一个或多个元素，并返回新的长度。
语法：array.push(item1, item2, ... itemX)
3.2 数组filter()方法
filter()方法 ：用于对数组进行过滤（创建一个新数组，不改变原数组；return后面的判断结果，取布尔值，true就添入新的filter数组中，false则不加）。
语法：array.filter(function(currentValue,index,arr), thisValue)
例：
//筛选数组中大于5的数 let arr = [1,2,3,4,5,6,7,8]; let newArr = arr.filter(arr=>{ return arr > 5; //箭头函数省略return写法： //let newArr = arr.filter(arr => arr>5); }); console.log(newArr);

3.3 filter()和map()的区别
  • map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。map() 方法按照原始数组元素顺序依次处理元素。
  • filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
> const array = [1, 4, 9, 16]; const m = array.map(x => x + 2); const f = array.filter(x => x + 2)console.log(m); //[3,6,11,18] console.log(f); //[1,4,9,16]（全为true）

> const array = [1, 4, 9, 16]; const m = array.map(x => x > 2); const f = array.filter(x => x > 2)console.log(m); //[false, true, true, true] console.log(f); //[4,9,16]

3.4 switch语句
语法：
switch(expression) { case n: 代码块 break; case n: 代码块 break; default: 默认代码块 }

expression：必须。指定计算的表达式。表达式只计算一次。表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。
//num=1时，打印出：正确 //num=3时，打印出：我不知道 var num = 3; switch (num) { case 0: console.log('错误'); break; case 1: console.log('正确'); break; case 2: console.log('错误'); break; default: console.log('我不知道'); }

//若没有break，则从正确匹配的位置开始，依次向下执行。 //例如：num=1时，控制台打印出：正确 错误 我不知道 //num=0时，控制台打印出：错误 正确 错误 我不知道 var num = 1; switch (num) { case 0: console.log('错误'); case 1: console.log('正确'); case 2: console.log('错误'); default: console.log('我不知道'); }

四、图书管理 需求：
vue基础案例
文章图片

全部 已借阅 未借阅 总计{{booksData.length}}本书，当前可借阅{{canBorrow}}本书。
图书名称 图书作者 图书价格 图书出版社 图书状态 图书操作
{{item.name}} {{item.auther}} {{item.price}} {{item.press}} -if="item.borrow == true" style="color: red; " >已借阅 -else >未借阅
="/vue.js"> > new Vue({ el:'#app', data(){ return{ booksData:[ {name:'JS程序设计',auther:'小明',price:'99',press:'机械工业出版社',borrow:false}, {name:'JS权威指南',auther:'小红',price:'78',press:'人民邮电出版社',borrow:false}, {name:'ES6入门',auther:'小黄',price:'67',press:'电子工业出版社',borrow:true}, {name:'JS设计模式',auther:'小刚',price:'49',press:'机械工业出版社',borrow:false}, ], booksTpye:'全部' } }, computed:{ canBorrow(){ return this.booksData.filter(item => !item.borrow).length }, fliterBooks(){ switch(this.booksTpye){ case '已借阅' : return this.booksData.filter(item => item.borrow); case '未借阅' : return this.booksData.filter(item => !item.borrow); default:return this.booksData } } } })

五，成绩查询 需求：分数范围筛选和各学科名次排序。vue基础案例
文章图片

//css样式：竖条分数变黄 > .active { color: orange; }
>搜索: >~
//知识点1:单选按钮radio，怎么设置默认值,怎么实现只能选择一项。 >排名方式: //name的作用是只能选一个选框,v-model绑定同一个变量也可以只选一个选,就可以不用name了. 总分 数学 语文 英语
//这后面是先筛选再排序，遍历排序后的数组，这样筛选和排序都有了
排名 姓名 数学 语文 英语 总分
{{index+1}} {{item.name}} {{item.math}} {{item.chinese}} {{item.english}} {{oneTotal(item)}}
="/vue.js"> > new Vue({ el: '#app', data() { return { scoresData: [ { name: '张三', math: 97, chinese: 89, english: 67 }, { name: '李四', math: 67, chinese: 52, english: 98 }, { name: '王五', math: 72, chinese: 87, english: 89 }, { name: '赵钱', math: 92, chinese: 87, english: 59 }, { name: '孙李', math: 47, chinese: 85, english: 92 }, ], rank: 'total',//纪录当前用户选择排名的方式 min: '0', max: '300' } },computed: { //计算属性的传参使用:oneTotal上不能传，但是下面的函数可以。 oneTotal(){ return function(item){ return item.math+item.chinese+item.english } }, //计算属性得到筛选后的数组 //由于math在scoresData中实际上是字符串，因此能用item.math，而rank为变量，则不能用item.rank，访问变量要加中括号item[rank] //由于，scoresData中无total数据，所以item中没有total属性，则不能使用item[this.rank]访问到，需要用if做判断。 filterScoresData(){ return this.scoresData.filter(item=>{ if(this.rank=='total'){ return (this.oneTotal(item))>=this.min&&(this.oneTotal(item))<=this.max; } return item[this.rank]>=this.min&&item[this.rank]<=this.max; }); }, //计算属性得到排序后的数组 //知识点2：数组sort()方法 sortScoresData() { switch (this.rank) { case 'total': return this.filterScoresData.sort((a, b) => (this.oneTotal(b)) - (this.oneTotal(a))) break; case 'math': return this.filterScoresData.sort((a, b) => b.math - a.math) break; case 'chinese': return this.filterScoresData.sort((a, b) => b.chinese - a.chinese) break; case 'english': return this.filterScoresData.sort((a, b) => b.english - a.english) break; } }, } })

5.1 input输入框
单选框：出现在多选一的页面设定中，提交到处理页的是value值。
注意：name值一定要相同，否则就不能多选一。当然提交到处理页的也还是value值。
//name相同才能实现单选按钮。 男 女 //如果用v-model绑定，则无需name参数。

5.2 v-model的使用
1.复选框
  • 单个复选框
在单个复选框上绑定 v-model 属性，可以通过 v-model 属性值的 true 或 false，来控制复选框的选中或未选中，同时，操作复选框的选中或未选中，也会同步更新 v-model 属性值的 true 或 false。
="/vue.js"> > new Vue({ el:'#app', data() { return { isChecked:true } }, })

  • 多个复选框
在多个复选框上绑定同一个 v-model 属性，通过判断复选框自己的 value 值是否在 v-model 的数组里面，来控制复选框的选中或未选中。同时，操作复选框的选中或未选中，也会同步更新复选框的 value 值在数组中添加或删除。
吃饭 睡觉 打豆豆
="/vue.js"> > new Vue({ el: '#app', data() { return { checkeds: ['sleep'], } }, })

显示：vue基础案例
文章图片

2.单选框 在单选框上绑定 v-model 属性，通过判断单选框自己的 value 值是否和 v-model 的值相等，来控制单选框的选中或未选中。
男 女
="/vue.js"> > new Vue({ el: '#app', data() { return { gender: '男', } }, })

3.下拉列表 在 select 身上绑定 v-model 属性，通过判断 option 的 value 值和 v-model 的值是否相等，来决定被选中的 option。
-model="city">
="/vue.js"> > new Vue({ el: '#app', data() { return { city: '北京' } }, })

5.3 sort()方法
sort()方法会改变原数组。语法：array.sort(sortfunction)，若无参数sortfunction则按字母升序排列。字母倒序排列则用reserve()。
//例：a-b是从小到大排列，b-a是从大到小。 var num = [74, 35, 74, 95, 33, 56, 84, 32, 21, 34]; num.sort((a, b) => b - a); console.log(num);

5.4 获取对象属性点方法和中括号法的区别
  1. 中括号法可以用变量作为属性名,而点方法不可以
var obj = {}; obj.name = '张三'; var myName = 'name'; console.log(obj.myName); //undefined,访问不到对应的属性 console.log(obj[myName]); //张三

  1. 中括号法可以用数字作为属性名,而点语法不可以
  2. 中括号法可以使用js的关键字和保留字作为属性名,而点语法不可以
六，this总结 首先，this只有在函数function中才需要去判断它的指向。如果是在全局环境中，this永远指向全局对象。浏览器环境中，全局对象为“window对象”，Nodejs环境中，全局对象为“Global对象”。
6.1 普通函数中的this
//普通函数中的this，永远指向window对象。 function foo(){ console.log(this); } foo();

6.2 对象方法中的this
//对象方法中的this，指向调用该方法的对象 const student = { name: 'zhangsan', sayName: function () { console.log(this); } }; const person = { name: 'lisi' }; person.sayName = student.sayName person.sayName(); //这里的this指向调用调用sayName方法的对象person

6.3 事件中的this
//事件中的this，指向绑定该事件的元素 const father = document.getElementById('father'); father.onclick = function (event){ console.log(this); }//这里指向绑定onclick事件的元素father

6.4 构造函数中的this
//构造函数中的this，指向new调用时得到的函数对象 function Person() { console.log(this); } const p = new Person(); //这里this指向p const b = new Person(); //这里this指向b

6.5 箭头函数中的this
箭头函数没有自己的this，因此在箭头函数中范围this时，实际访问的是父级（箭头函数创建时所在范围）的this。
const student = { foo: function(){ return()=>{//箭头函数的父极是foo console.log(this); } } } const bar = student.foo(); //调用，将函数foo的返回值赋值给bar bar(); //这里调用的是函数的返回值，也就是箭头函数

    推荐阅读


    上一篇：vue|vue基础（主要为vue3）

    下一篇：前端学习笔记|5.0 Vue中使用webpack