02-vue第二天学习笔记

指令修饰符

1. 按键修饰符：@keyup.enter----回车键弹起事件
2. 事件修饰符：@事件名.stop—阻止冒泡，@事件名.prevent—阻止浏览器默认行为
3. v-model: v-model.trim—清除两边的空格，v-model.number—转为数字
4. v-bind对于class和style的控制

<!-- v-bind对于class的控制 -->
<div id="app">
    <ul>
      <li v-for="(item,index) in list" :key="item.id" @click="activeindex = index">
        <a :class="{active : activeindex === index}" href="#">{{item.name}}</a>
      </li>
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeindex: 0,
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]

      }
    })
  </script>

  <!-- v-bind对于style的控制 -->
  <div id="app">
    <div class="progress">
      <div class="inner" :style=" {width: precent + '%' }">
        <span>{{precent}}%</span>
      </div>
    </div>
    <button @click="precent = 25">设置25%</button>
    <button @click="precent = 50">设置50%</button>
    <button @click="precent = 75">设置75%</button>
    <button @click="precent = 100">设置100%</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        precent: 25,
      }
    })
  </script>

5. v-model应用于其他表单元素

<div id="app">
    <h3>小黑学习网</h3>

    姓名：
      <input type="text" v-model="username"> 
      <br><br>

    是否单身：
      <input type="checkbox" v-model="issingle"> 
      <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input type="radio" name="gender" value="1" v-model="gender">男
      <input type="radio" name="gender" value="2" v-model="gender">女
      <br><br>

    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="value">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">成都</option>
        <option value="4">南京</option>
      </select>
      <br><br>

    自我描述：
      <textarea v-model="textarea"></textarea> 

    <button>立即注册</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        issingle: 'true',
        gender: 1,
        value: 2,
        textarea: ''
      }
    })
  </script>

6. 计算属性(具有缓存特性，一次计算，之后读取缓存即可)

<div id="app">
    <h3>小黑的礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{total}} 个</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 1 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        total() {
          let total =  this.list.reduce((sum,item) => sum + item.num , 0)
          return total
        }
      }
    })
  </script>

  <!-- 计算属性完整写法 -->
  <div id="app">
    姓：<input type="text" v-model="firstname"><br>
    名：<input type="text" v-model="lastname"><br>
    <p>姓名：{{ fullname }}</p>
    <button @click="changeName">修改姓名</button>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstname: '',
        lastname: '',
      },
      computed: {
          fullname: {
            // (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）
            // 会将返回值作为，求值的结果
              get() {
                return this.firstname + this.lastname
              },
            // (2) 当fullName计算属性，被修改赋值时，执行set
            //修改的值，传递给set方法的形参
              set(value) {
                  this.firstname = value.slice(0,1)
                  this.lastname = value.slice(1)
              }
          }
      },
      methods: {
        changeName() {
          this.fullname = '萧炎'
        }
      }
    })
  </script>

成绩案例

<div id="app" class="score-case">
      <div class="table">
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>科目</th>
              <th>成绩</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody v-if="list.length > 0">
            <tr v-for="(item,index) in list" :key="item.id">
              <td>{{ index + 1 }}</td>
              <td>{{item.subject}}</td>
              <td :class="{ red : item.score < 60 }">{{item.score}}</td>
              <td><a href="#" @click="del(item.id)">删除</a></td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="5">
                <span class="none">暂无数据</span>
              </td>
            </tr>
          </tbody>

          <tfoot>
            <tr>
              <td colspan="5">
                <span>总分：{{total}}</span>
                <span style="margin-left: 50px">平均分：{{ average }}</span>
              </td>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="form">
        <div class="form-item">
          <div class="label">科目：</div>
          <div class="input">
            <input v-model="subject" type="text" placeholder="请输入科目"/>
          </div>
        </div>
        <div class="form-item">
          <div class="label">分数：</div>
          <div class="input">
            <input v-model.number="score" type="text" placeholder="请输入分数" />
          </div>
        </div>
        <div class="form-item">
          <div class="label"></div>
          <div class="input">
            <button class="submit" @click="add">添加</button>
          </div>
        </div>
      </div>
    </div>
    <script src="../vue.js"></script>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          list: [
            { id: 1, subject: '语文', score: 20 },
            { id: 7, subject: '数学', score: 99 },
            { id: 12, subject: '英语', score: 70 },
          ],
          subject: '',
          score: '',
        },
        computed: {
          total() {
           let total = this.list.reduce((sum,item) => sum + item.score, 0)
           return total
          },
          average() {
            return (this.total / this.list.length || 0).toFixed(2)
          }
        },
        methods: {
          add() {
            if(this.subject != '' && this.score != '') {
              this.list.unshift({
                id: + new Date(),
                subject: this.subject,
                score: this.score
                })
                this.subject = ''
                this.score = ''
            }
          },
          del(id) {
            this.list = this.list.filter(item => item.id !== id)
          }
        }
      })
    </script>

7. watch侦听器

<div id="app">
      <!-- 条件选择框 -->
      <div class="query">
        <span>翻译成的语言：</span>
        <select>
          <option value="italy">意大利</option>
          <option value="english">英语</option>
          <option value="german">德语</option>
        </select>
      </div>

      <!-- 翻译框 -->
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="obj.words"></textarea>
          <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
          <div class="transbox">{{results}}</div>
        </div>
      </div>
    </div>
    <script src="./vue.js"></script>
    <script src="./axios.js"></script>
    <script>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
        el: '#app',
        data: {
          // words: '',
          obj: {
            words: ''
          },
          results: ''
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
           'obj.words' (newValue) {
            clearTimeout(this.timer)
            this.timer = setTimeout(async () => {
              const res = await axios({
                methods: 'GET',
                url: 'https://applet-base-api-t.itheima.net/api/translate',
                params: {
                  words: newValue
                }
              })
              this.results = res.data.data
              console.log(res.data.data)
            },300)
          }
        }
      })
    </script>

    <!-- watch完整写法 -->
    <!-- obj: {
            deep: true,//深度监测复杂类型
            immediate: true,//打开页面立即执行一次
            handler (newValue) {
                clearTimeout(this.timer)
                this.timer = setTimeout(async () => {
                  const res = await axios({
                    methods: 'GET',
                    url: 'https://applet-base-api-t.itheima.net/api/translate',
                    params: newValue
                  })
                  this.results = res.data.data
                  console.log(res.data.data)
                },300)
            }
          } -->

综合案例—渲染购物车

const arr = [
            {
              id: 1,
              icon: 'http://autumnfish.cn/static/火龙果.png',
              isChecked: true,
              num: 2,
              price: 6,
            },
            {
              id: 2,
              icon: 'http://autumnfish.cn/static/荔枝.png',
              isChecked: false,
              num: 7,
              price: 20,
            },
            {
              id: 3,
              icon: 'http://autumnfish.cn/static/榴莲.png',
              isChecked: false,
              num: 3,
              price: 40,
            },
            {
              id: 4,
              icon: 'http://autumnfish.cn/static/鸭梨.png',
              isChecked: true,
              num: 10,
              price: 3,
            },
            {
              id: 5,
              icon: 'http://autumnfish.cn/static/樱桃.png',
              isChecked: false,
              num: 20,
              price: 34,
            },
          ]
      const app = new Vue({
        el: '#app',
        data: {
          // 水果列表
          fruitList: JSON.parse(localStorage.getItem('list') || arr),
        },
        computed: {
          //全选反选
          isAll: {
            get() {
              return this.fruitList.every(item => item.isChecked === true)
            },
            set(value) {
              return this.fruitList.forEach(item => item.isChecked = value)
            }
          },

          // 计算总数
          totalCount() {
            return this.fruitList.reduce((sum,item) => {
              if(item.isChecked) {
                return sum + item.num
              }else {
                return sum
              }
            },0)
          },
          // 计算总价
          totalPrice() {
            return this.fruitList.reduce((sum,item) => {
              if(item.isChecked) {
                return sum + item.num * item.price
              }else {
                return sum
              }
            },0)
          }
        },
        methods: {
          del(id) {
            this.fruitList = this.fruitList.filter(item => item.id !== id)
          },
          sub(id) {
            //根据id操作对象
            const fruit = this.fruitList.find(item => item.id === id)
            // 操作数量
            fruit.num--
          },  
          add(id) {
            //根据id操作对象
            const fruit = this.fruitList.find(item => item.id === id)
            // 操作数量
            fruit.num++
          }
        },
        watch: {
          fruitList: {
            deep: true,
            handler(newValue) {
              localStorage.setItem('list', JSON.stringify(newValue))
            }
          }
        }
      })