search

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

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

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

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>
  57. <script>
  58. export default {
  59.   data() {
  60.     return {
  61.       // 初始默认books的数组
  62.       books: [
  63.         { id: 1, check: true, name: "《细说 PHP》", price: 10, count: 1 },
  64.         { id: 2, check: true, name: "《细说网页制作》", price: 10, count: 1 },
  65.         { id: 3, check: true, name: "《细说 JavaScript 语言》", price: 10, count: 1 },
  66.         { id: 4, check: true, name: "《细说 DOM 和 BOM》", price: 10, count: 1 },
  67.         { id: 5, check: true, name: "《细说 Ajax 与 jQuery》", price: 10, count: 1 },
  68.         { id: 6, check: true, name: "《细说 HTML5 高级 API》", price: 10, count: 1 },
  69.       ],
  70.       disabled: true,
  71.     };
  72.   },
  73.   computed: {
  74.     // 求和运算
  75.     sum() {
  76.       let total = 0;
  77.       for (let i = 0; i < this.books.length; i++) {
  78.         // 判断是否选中,选中的才被计算
  79.         if (this.books[i].check) {
  80.           // 循环累加
  81.           total += this.books[i].price * this.books[i].count;
  82.         }
  83.       }
  84.       // 返回总数
  85.       return total;
  86.     },
  87.   },
  88.   methods: {
  89.     // 删除方法,传入index索引参数
  90.     del(index) {
  91.       // 找到索引位置,删除一位
  92.       this.books.splice(index, 1);
  93.     },
  94.   },
  95. };
  96. </script>
  98. <style lang="scss">
  99. table {
  100.   border-collapse: collapse;
  101. }
  102. th,
  103. td {
  104.   border: 1px solid;
  105.   min-width: 30px;
  106.   padding: 6px;
  107.   text-align: center;
  108. }
  109. span {
  110.   padding: 4px;
  111. }
  112. </style>
上一条：对象模拟数组下一条：Linux系统查看磁盘可用空间的5个命令
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多