2023年7月18日发(作者：)

⼆、Vue基础语法学习笔记——事件监听v-on、条件判断（v-if、v-else-if、v。。。四、事件监听在前端开发中，我们需要经常和⽤于交互。这个时候，我们就必须监听⽤户发⽣的时间，⽐如点击、拖拽、键盘事件等等在Vue中如何监听事件呢？使⽤v-on指令v-on介绍作⽤：绑定事件监听器缩写：@预期：Function | Inline Statement | Object参数：event下⾯，我们就具体来学习v-on的使⽤。1.v-on基础这⾥，我们⽤⼀个监听按钮的点击事件，来简单看看v-on的使⽤下⾯的代码中，我们使⽤了v-on:click="counter++”另外，我们可以将事件指向⼀个在methods中定义的函数注：v-on也有对应的语法糖：v-on:click可以写成@click2.v-on参数当通过methods中定义⽅法，以供@click调⽤时，需要注意参数问题：情况⼀：如果该⽅法不需要额外参数，那么⽅法后的()可以不添加。但是注意：如果⽅法本⾝中有⼀个参数，那么会默认将原⽣事件event参数传递进去情况⼆：如果需要同时传⼊某个参数，同时需要event时，可以通过$event传⼊事件。3.v-on修饰符在某些情况下，我们拿到event的⽬的可能是进⾏⼀些事件处理。Vue提供了修饰符来帮助我们⽅便的处理⼀些事件：1. stop - 调⽤ opagation()。2. prevent - 调⽤ tDefault()。3. {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。4. native - 监听组件根元素的原⽣事件。5. once - 只触发⼀次回调。五、条件判断1. v-if、v-else-if、v-elsev-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件简单的案例演⽰：v-if的原理：v-if后⾯的条件为false时，对应的元素以及其⼦元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。条件渲染案例:我们来做⼀个简单的⼩案例：⽤户再登录时，可以切换使⽤⽤户账号登录还是邮箱地址登录。类似如下情景：案例中存在的⼩问题：⼩问题：如果我们在有输⼊内容的情况下，切换了类型，我们会发现⽂字依然显⽰之前的输⼊的内容。但是按道理讲，我们应该切换到另外⼀个input元素中了。在另⼀个input元素中，我们并没有输⼊内容。为什么会出现这个问题呢？问题解答：这是因为Vue在进⾏DOM渲染时，出于性能考虑，会尽可能的复⽤已经存在的元素，⽽不是重新创建新的元素。在上⾯的案例中，Vue内部会发现原来的input元素不再使⽤，直接作为else中的input来使⽤了。解决⽅案：如果我们不希望Vue出现类似重复利⽤的问题，可以给对应的input添加key并且我们需要保证key的不同2. v-showv-show的⽤法和v-if⾮常相似，也⽤于决定⼀个元素是否渲染v-if和v-show对⽐v-if和v-show都可以决定⼀个元素是否渲染，那么开发中我们如何选择呢？v-if当条件为false时，压根不会有对应的元素在DOM中。v-show当条件为false时，仅仅是将元素的display属性设置为none⽽已。开发中如何选择呢？当需要在显⽰与隐藏之间切⽚很频繁时，使⽤v-show当只有⼀次切换时，通过使⽤v-if六、循环遍历1.v-for遍历数组当我们有⼀组数据需要进⾏渲染时，我们就可以使⽤v-for来完成。v-for的语法类似于JavaScript中的for循环。格式如下：item in items的形式。我们来看⼀个简单的案例：如果在遍历的过程中不需要使⽤索引值v-for="item in names"依次从names中取出item，并且在元素的内容中，我们可以使⽤Mustache语法，来使⽤item如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？语法格式：v-for=(item, index) in items其中的index就代表了取出的item在原数组的索引值。2.v-for遍历对象v-for可以⽤户遍历对象：⽐如某个对象中存储着你的个⼈信息，我们希望以列表的形式显⽰出来。3.组件的key属性key的作⽤主要是为了⾼效的更新虚拟DOM4.检测数组更新因为Vue是响应式的，所以当数据发⽣变化时，Vue会⾃动检测数据变化，视图会发⽣对应的更新。Vue中包含了⼀组观察数组编译的⽅法，使⽤它们改变数组也会触发视图的更新。1. push() ：在数组最后⾯添加元素，可传⼊1个或者多个参数2. pop()：删除数组中的最后⼀个元素3. shift()：删除数组中的第⼀个元素4. unshift()：在数组最前⾯添加元素5. splice()：删除元素/插⼊元素/替换元素6. sort()：正序排列7. reverse()：倒序排列

七、阶段案例图书购物车代码实现：HTML、CSS： disabled=" <= 1">-table { border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0;}th, td { padding: 8px 16px; border: 1px solid #e9e9e9; text-align: center;}th { background-color: #f7f7f7; color: #5c6b77; font-weight: 600;}const app = new Vue({ el:'#app', data:{ books: [ { id: 1, name: '《Python⼊门》', date: '2020-10', price: 85.00, count: 36 }, { id: 2, name: '《Vue从⼊门到精通》', date: '2020-10', price: 99.00, count: 22 }, { id: 3, name: '《算法导论》', date: '2020-08', price: 32.00, count: 10 }, { id: 4, name: '《软件⼯程》', date: '2020-02', price: 105.00, count: 50 } ] }, methods: { getFinalPrice(price) { return '￥' + d(2); }, increment(index) { ('increment',index); [index].count++; }, decrement(index) { ('decrement',index); [index].count--; }, removeHandle(index) { (index,1); } }, filters: { showPrice(price) { return '￥' + d(2); } }, computed: { totalPrice() { /*// 1.

普通的for循环 let totalPrice = 0; for (let i = 0; i < ; i++) { totalPrice += [i].price * [i].count; } return totalPrice;*/ /*// 2. for(let i in this..books) let totalPrice = 0; for (let i in ) { totalPrice += [i].price * [i].count; } return totalPrice;*/ /*// 3. for(let item of ) let totalPrice = 0; for (let item of ) { totalPrice += * ; } return totalPrice;*/ // return (function (preValue,book) { return preValue + * },0) } }})//

编程范式：命令式编程/声明式编程//

编程范式：⾯向对象编程（第⼀公民：对象）/函数式编程（第⼀公民：函数）// filter /map /reduce// filter

中的回调函数有⼀个要求：必须返回⼀个boolean值// true :当返回true时，函数内部会⾃动将这次回调的n加⼊到⼼得数组中// false：当返回false时，函数内部会过滤掉这次的nconst nums = [10,20,111,222,444,40,50]/*let total = (function (n) { return n < 100;}).map(function (n) { return n * 2;}).reduce(function (preValue,n) { return preValue + n;},0)(total);*/let total = (n => n < 100) .map(n => n * 2) .reduce((preValue,n) => preValue + n)(total);/*// 1. filter函数的使⽤// 10， 20， 40， 50let newNums = (function (n) { return n < 100;})})(newNums);// 2. map函数的使⽤// 20,40,80,100let new2Nums = (function (n) { return n*2;})(new2Nums);// 3. reduce函数的使⽤// educe函数的作⽤：对数组中所有的内容进⾏汇总/!*// (function (preValue,n) {// return 100;// },0)//

第⼀次：preValue=0,n=20//

第⼆次：preValue=100,n=40//

第三次：preValue=100,n=80//

第四次：preValue=100,n=100*!/let total = (function (preValue,n) { return preValue + n;},0)//

第⼀次：preValue=0,n=20//

第⼆次：preValue=20,n=40//

第三次：preValue=60,n=80//

第四次：preValue=140,n=100//

第五次：preValue + n=(total);*/⼋、双向绑定v-model1.表单绑定v-model表单控件在实际开发中是⾮常常见的。特别是对于⽤户信息的提交，需要⼤量的表单。Vue中使⽤v-model指令来实现表单元素和数据的双向绑定。案例的解析：当我们在输⼊框输⼊内容时因为input中的v-model绑定了message，所以会实时将输⼊的内容传递给message，message发⽣改变。当message发⽣改变时，因为上⾯我们使⽤Mustache语法，将message的值插⼊到DOM中，所以DOM会发⽣响应的改变。所以，通过v-model实现了双向的绑定。当然，我们也可以将v-model⽤于textarea元素2.v-model原理v-model其实是⼀个语法糖，它的背后本质上是包含两个操作：1. v-bind绑定⼀个value属性2. v-on指令给当前元素绑定input事件也就是说下⾯的代码：等同于下⾯的代码：等同于

input="message = $">3.v-model：radio当存在多个单选框时4.v-model：checkbox复选框分为两种情况：单个勾选框和多个勾选框1. 单个勾选框：v-model即为布尔值。此时input的value并不影响v-model的值。2. 多个复选框：当是多个复选框时，因为可以选中多个，所以对应的data中属性是⼀个数组。当选中某⼀个时，就会将input的value添加到数组中。5.v-model：select和checkbox⼀样，select也分单选和多选两种情况。单选：只能选中⼀个值。v-model绑定的是⼀个值。当我们选中option中的⼀个时，会将它对应的value赋值到mySelect中多选：可以选中多个值。v-model绑定的是⼀个数组。当选中多个值时，就会将选中的option对应的value添加到数组mySelects中6.值绑定初看Vue官⽅值绑定的时候，我很疑惑：what the hell is that？但是仔细阅读之后，发现很简单，就是动态的给value赋值⽽已：我们前⾯的value中的值，可以回头去看⼀下，都是在定义input的时候直接给定的。但是真实开发中，这些input的值可能是从⽹络获取或定义在data中的。所以我们可以通过v-bind:value动态的给value绑定值。这不就是v-bind吗？这不就是v-bind在input中的应⽤吗？搞的我看了很久，搞不清他想讲什么。这⾥不再给出对应的代码，因为会⽤v-bind，就会值绑定的应⽤了。7.修饰符1. lazy修饰符：默认情况下，v-model默认是在input事件中同步输⼊框的数据的。 也就是说，⼀旦有数据发⽣改变对应的data中的数据就会⾃动发⽣改变。lazy修饰符可以让数据在失去焦点或者回车时才会更新2. number修饰符：默认情况下，在输⼊框中⽆论我们输⼊的是字母还是数字，都会被当做字符串类型进⾏处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。number修饰符可以让在输⼊框中输⼊的内容⾃动转成数字类型3. trim修饰符：如果输⼊的内容⾸尾有很多空格，通常我们希望将其去除trim修饰符可以过滤内容左右两边的空格