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

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
    基本等同于{{}}，，如

  <div v-text="msg"></div>

  就等同于

  <div>{{ msg }}</div>

  • v-html
    这个跟 test 的使用方法类似，但是这个最重要的一点：用了这个指令，插入的值里面的 html 标签就能被解析出来

• v-bind:绑定属性
  v-bind:可以给标签内的属性绑定变量或方法，可以简写为:，如

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

  就等同于

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

计算属性 computed

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

就好比：

let a = 10;
let b = 20;
// get就是
function sum() {
  return a + b;
}
console.log(sum());
// set就是
function add(sum) {
  a = sum * 0.5;
  b = sum * 0.5;
  return [a, b];
}
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 也会被选中

购物车小案例

<template>
  <div>
    <!-- v-if双条件判断如果books里没有内容提示购物车为空，否则显示table表单 -->
    <div v-if="books.length <= 0">购物车空空如也，快去选购商品吧~</div>
    <table v-else>
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th></th>
          <th>编号</th>
          <th>商品名称</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- v-for得加在tr里，v-for这层也会循环 -->
        <tr v-for="(items, index) in books" :key="index">
          <td>
            <!-- 给每个input绑定v-model的true属性，使其默认选中 -->
            <input type="checkbox" v-model="items.check" id="cart" />
          </td>
          <!-- 索引是从0开始的 索引+1，让编号从1开始 -->
          <td>{{ index + 1 }}</td>
          <!-- 书名 -->
          <td>{{ items.name }}</td>
          <!-- toFixed(num)将一个数值转为小数点后多少为的小数值 -->
          <td><small>￥</small>{{ items.price.toFixed(2) }}</td>
          <td>
            <!-- 给减号按钮加click事件，点击后数量-1，并给disabled加一个条件判断，如果小于等于1减号失效 -->
            <button @click="items.count--" :disabled="items.count <= 1">-</button>
            <!-- 数量 -->
            <span>{{ items.count }}</span>
            <!-- 给加号按钮加click事件，点击后数量+1，并给disabled加一个条件判断，如果大于等于10加号失效 -->
            <button @click="items.count++" :disabled="items.count >= 10">+</button>
          </td>
          <td>
            <!-- 将a标签原有事件删除,并定义一个点击事件,点击删除某项 -->
            <a href="" @click.prevent.stop="del(index)">删除</a>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">总价</td>
          <!-- 总价 -->
          <td colspan="3"><small>￥</small>{{ sum }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 初始默认books的数组
      books: [
        { id: 1, check: true, name: "《细说 PHP》", price: 10, count: 1 },
        { id: 2, check: true, name: "《细说网页制作》", price: 10, count: 1 },
        { id: 3, check: true, name: "《细说 JavaScript 语言》", price: 10, count: 1 },
        { id: 4, check: true, name: "《细说 DOM 和 BOM》", price: 10, count: 1 },
        { id: 5, check: true, name: "《细说 Ajax 与 jQuery》", price: 10, count: 1 },
        { id: 6, check: true, name: "《细说 HTML5 高级 API》", price: 10, count: 1 },
      ],
      disabled: true,
    };
  },
  computed: {
    // 求和运算
    sum() {
      let total = 0;
      for (let i = 0; i < this.books.length; i++) {
        // 判断是否选中,选中的才被计算
        if (this.books[i].check) {
          // 循环累加
          total += this.books[i].price * this.books[i].count;
        }
      }
      // 返回总数
      return total;
    },
  },
  methods: {
    // 删除方法,传入index索引参数
    del(index) {
      // 找到索引位置,删除一位
      this.books.splice(index, 1);
    },
  },
};
</script>
<style lang="scss">
table {
  border-collapse: collapse;
}
th,
td {
  border: 1px solid;
  min-width: 30px;
  padding: 6px;
  text-align: center;
}
span {
  padding: 4px;
}
</style>