博客列表 >vue 基础语法及购物车小案例

vue 基础语法及购物车小案例

超超多喝水
超超多喝水原创
2021年12月06日 22:27:47899浏览

vue 基础语法及购物车小案例

插值操作

对象里的变量用{{}}插入,且可以进行运算及逻辑等操作,但是一般里面要尽量简介,非必要的情况下逻辑跟运算不往这里面写,逻辑跟运算都写在 module 里

  • MVVM 模式(Model-View-ViewModel)
    View 里的内容通过 ViewModel 能动态的改变 Model 的内容,Model 里的内容通过 ViewModel 能动态改变 View 里的内容
  • 常用指令

    • v-model
      如给 input 绑定了 v-model,对应的插值就会与该 input 标签输入的内容一致,改变 input 里面的内容能动态改变插值,改变插值也能动态改变 input 里面的内容
    • v-once
      取消响应式,只显示初始值
    • v-pre
      将{{}}及里面的内容原封不动的全部输出,如<div v-pre>{{msg}}</div>输出就是

      {{msg}}

    • v-text
      基本等同于{{}},,如
    1. <div v-text="msg"></div>

    就等同于

    1. <div>{{ msg }}</div>
    • v-html
      这个跟 test 的使用方法类似,但是这个最重要的一点:用了这个指令,插入的值里面的 html 标签就能被解析出来
  • v-bind:绑定属性
    v-bind:可以给标签内的属性绑定变量或方法,可以简写为:,如

    1. <div v-bind:class="msg"></div>

    就等同于

    1. <div :class="msg"></div>

计算属性 computed

  • 插值中一般只插值,不插入方法,只有事件的地方才加方法,或者方法中调用方法,方法放在程序里面,不放在插值模板里面。
  • 方法跟计算属性的区别:计算属性带缓存,而方法不带,方法每调用一次都会执行一次,计算属性会根据当前的值是否有变化做一个判断,如果没有变化就不重复执行
  • 当不加 get 与 set 直接写成函数方法时,默认是 get 方式
  • get 与 set 的区别:可以简单理解为:get 一般用于将多个变量集合到一起生成计算值,当变量变化的时候计算值变化,set 用于把计算值拆分给多个变量,当计算值变化的时候,变量变化

就好比:

  1. let a = 10;
  2. let b = 20;
  3. // get就是
  4. function sum() {
  5. return a + b;
  6. }
  7. console.log(sum());
  8. // set就是
  9. function add(sum) {
  10. a = sum * 0.5;
  11. b = sum * 0.5;
  12. return [a, b];
  13. }
  14. console.log(add(30)[0], add(30)[1]);

事件监听 v-on

  • v-on:事件名称 绑定时间监听器
  • 语法糖写法:用@缩写
  • 着重介绍 mouseenter(参数,$event)与mouseleave(参数,$event)
    • 任何事件都可以加$event 参数,获取事件对象,里面可以包含各种对应事件的信息,如鼠标位置、按下的是哪个按键等等
    • mouseenter(参数,$event)与mouseleave(参数,$event)区别于 mouseover 跟 mouseout,如果一个最外层的盒模型绑定了这个事件,内部还有多个嵌套的盒模型,使用 mouseover 跟 mouseout 时,内部盒模型也会触发这两个事件,但是 mouseenter 跟 mouseleave 就不会,他只会在最外层的盒模型四边进出时触发该事件
  • .stop 阻止事件冒泡
  • .self 当事件在该元素本身触发时才触发事件
  • .capture 添加事件侦听器是,使用事件捕获模式
  • .prevent 阻止默认事件
  • .once 事件只触发一次

条件判断 v-if v-else v-else-if

  • v-if 接收一个值,这个值是 true 或者 false,也可以是一个判断条件
  • 只有 v-if 是单条件判断,如果为真,则该标签存在,为假该标签不存在
  • v-if 与 v-else 双条件判断,如果为真,该标签存在,而 v-else 的标签不存在,反之该标签不存在,v-else 的标签存在
  • v-if 、v-else-if 、v-else 多条件判断,里面一般加一个判断条件

循环遍历指令 v-for

  • 基础语法v-for="(item,index,num) in arr" :key="item.id"item:值,index:下标,num 数字索引,:key 必加,这里面的值是什么无所谓,但是必须是一个唯一值
  • 一个标签使用了 v-for 其下面的子标签也可以使用其中的内容
  • 一个标签使用 v-for 遍历后,下面子标签可以进行二次遍历进行嵌套
  • :key 这个东西简单理解,可以给所有被遍历出来的元素加一个唯一标识,可以给相如 checkbox 等类型加 checked 属性时,锁定对应元素,不然 checked 的时候就只能一直锁定某个位置的元素

v-model

  • 实现原理,给 value 绑定一个值,然后使用@input 事件获取当前对象,拿到对应的值

    <input type="text" name="111" id="222" :value="msg" @input="getValue($event)"

  • .lazy 懒加载修饰符

  • .number 修饰符让其转换为 number 类型,类似于 parseInt,不同的是,如果开头的字符不是数字,仍然会输出字符串而不是 NaN
  • .trim 修饰符可以自动过滤掉输入框的首尾空格
  • radio 里的 v-model,有两个作用:1、代替 name 的功能,2,如果 v-model 绑定的值的初始值,与其中一个选项的 value 相同,会默认选中该选项
  • checkbox 这里除了能够绑定 name 关系,还有两种情况:1.单值,单值的时候 v-model 绑定的值是一个布尔值,为 true 时默认勾选,为 false 时不勾选,2.多值,绑定的值是一个数组,选中哪个就会往这个数组内传哪个的值,同理这里的数组中初始有哪个选项的值,对应选项就会被选中
  • select,select 给 select 标签加 v-model,然后 option 对应的 value 值会传到 select 绑定的单值或者数组中,如果其中有对应的值,select 里对应的 option 也会被选中

购物车小案例

  1. <template>
  2. <div>
  3. <!-- v-if双条件判断如果books里没有内容提示购物车为空,否则显示table表单 -->
  4. <div v-if="books.length <= 0">购物车空空如也,快去选购商品吧~</div>
  5. <table v-else>
  6. <caption>
  7. 购物车
  8. </caption>
  9. <thead>
  10. <tr>
  11. <th></th>
  12. <th>编号</th>
  13. <th>商品名称</th>
  14. <th>价格</th>
  15. <th>购买数量</th>
  16. <th>操作</th>
  17. </tr>
  18. </thead>
  19. <tbody>
  20. <!-- v-for得加在tr里,v-for这层也会循环 -->
  21. <tr v-for="(items, index) in books" :key="index">
  22. <td>
  23. <!-- 给每个input绑定v-model的true属性,使其默认选中 -->
  24. <input type="checkbox" v-model="items.check" id="cart" />
  25. </td>
  26. <!-- 索引是从0开始的 索引+1,让编号从1开始 -->
  27. <td>{{ index + 1 }}</td>
  28. <!-- 书名 -->
  29. <td>{{ items.name }}</td>
  30. <!-- toFixed(num)将一个数值转为小数点后多少为的小数值 -->
  31. <td><small></small>{{ items.price.toFixed(2) }}</td>
  32. <td>
  33. <!-- 给减号按钮加click事件,点击后数量-1,并给disabled加一个条件判断,如果小于等于1减号失效 -->
  34. <button @click="items.count--" :disabled="items.count <= 1">-</button>
  35. <!-- 数量 -->
  36. <span>{{ items.count }}</span>
  37. <!-- 给加号按钮加click事件,点击后数量+1,并给disabled加一个条件判断,如果大于等于10加号失效 -->
  38. <button @click="items.count++" :disabled="items.count >= 10">+</button>
  39. </td>
  40. <td>
  41. <!-- 将a标签原有事件删除,并定义一个点击事件,点击删除某项 -->
  42. <a href="" @click.prevent.stop="del(index)">删除</a>
  43. </td>
  44. </tr>
  45. </tbody>
  46. <tfoot>
  47. <tr>
  48. <td colspan="3">总价</td>
  49. <!-- 总价 -->
  50. <td colspan="3"><small></small>{{ sum }}</td>
  51. </tr>
  52. </tfoot>
  53. </table>
  54. </div>
  55. </template>
  56. <script>
  57. export default {
  58. data() {
  59. return {
  60. // 初始默认books的数组
  61. books: [
  62. { id: 1, check: true, name: "《细说 PHP》", price: 10, count: 1 },
  63. { id: 2, check: true, name: "《细说网页制作》", price: 10, count: 1 },
  64. { id: 3, check: true, name: "《细说 JavaScript 语言》", price: 10, count: 1 },
  65. { id: 4, check: true, name: "《细说 DOM 和 BOM》", price: 10, count: 1 },
  66. { id: 5, check: true, name: "《细说 Ajax 与 jQuery》", price: 10, count: 1 },
  67. { id: 6, check: true, name: "《细说 HTML5 高级 API》", price: 10, count: 1 },
  68. ],
  69. disabled: true,
  70. };
  71. },
  72. computed: {
  73. // 求和运算
  74. sum() {
  75. let total = 0;
  76. for (let i = 0; i < this.books.length; i++) {
  77. // 判断是否选中,选中的才被计算
  78. if (this.books[i].check) {
  79. // 循环累加
  80. total += this.books[i].price * this.books[i].count;
  81. }
  82. }
  83. // 返回总数
  84. return total;
  85. },
  86. },
  87. methods: {
  88. // 删除方法,传入index索引参数
  89. del(index) {
  90. // 找到索引位置,删除一位
  91. this.books.splice(index, 1);
  92. },
  93. },
  94. };
  95. </script>
  96. <style lang="scss">
  97. table {
  98. border-collapse: collapse;
  99. }
  100. th,
  101. td {
  102. border: 1px solid;
  103. min-width: 30px;
  104. padding: 6px;
  105. text-align: center;
  106. }
  107. span {
  108. padding: 4px;
  109. }
  110. </style>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议