当前位置 博文首页 > GooReey的博客：【Vue知识体系总结 3】Vue常用标签

最大化 缩小

    GooReey的博客：【Vue知识体系总结 3】Vue常用标签

    作者：[db:作者] 时间：2021-08-30 19:33

    在进行一门新的语言学习时，基础是最重要的点，只要你get到它，学习新技术只是时间的问题。

    一、vue常用标签简介

    1、v-for和@click实现点击赋予红色效果

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>

</head>
<body>
<div id="app">
  <ul>
    <li v-for="(item,index) in girls"
        v-bind:class="{active:currentIndex == index}"
        @click="liClick(index)">{{item}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      girls: ['比比东','千仞雪','美杜莎','云韵','雅妃'],
      currentIndex: 0
    },
    methods: {
      liClick(index){
        this.currentIndex = index
      }
    }
  })
</script>
</body>
</html>

    2、合并两个字符串

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{fullName}}</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
      el: '#app',
      data: {//定义数据
        message: '哪吒',
        firstName: '无情',
        lastName:'冷血'
      },
      computed: {
          fullName: function () {
            return this.firstName + ' ' + this.lastName
          }
      }
    })
</script>
</body>
</html>

    3、计算属性的复杂操作

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">{{es62}}</div>

<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
      el: '#app',
      data: {//定义数据
        girls: [
            {name: '千仞雪',age:18},
            {name: '云韵',age:20},
            {name: '比比东',age:25},
            {name: '美杜莎',age:22}
        ]
      },
      computed: {
          ageSum: function () {
            let sum = 0
            let result = 0
            for(let i = 0;i<this.girls.length;i++){
              sum += this.girls[i].age
            }
            result = sum/this.girls.length;
            return result
          },
          es6: function () {
            let sum = 0
            let result = 0
            for(let i in this.girls){
              sum += this.girls[i].age
            }
            result = sum/this.girls.length;
            return result
          },
          es62: function () {
            let sum = 0
            let result = 0
            for(let girl of this.girls){
              sum += girl.age
            }
            result = sum/this.girls.length;
            return result
          }
      }
    })
</script>
</body>
</html>

    4、var没有块级作用域，let有块级作用域

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>

<script src="../js/vue.js"></script>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
    let app = new Vue({
        el: '#app',
        data: {//定义数据
            message: '哪吒'
        }
    })

    // 因为ES5前if和for都没有块级作用域，所以很多时候引入function的块级作用域
    var btns = document.getElementsByTagName('button');
    for(var i = 0;i<btns.length;i++){
      (function (i) {
        btns[i].addEventListener('click',function () {
          console.log('第'+i+'个按钮被点击');
        })
      })(i)
    }

    const btns = document.getElementsByTagName('button')
    for(let i = 0;i<btns.length;i++){
      btns[i].addEventListener('click',function () {
        console.log('第'+i+'个按钮被点击');
      })
    }
</script>
</body>
</html>

    5、const 常量的定义

    6、v-on的参数问题

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <button @click="btnClick(abc, $event)">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {//定义数据
      message: '哪吒',
      abc: 123
    },
    methods: {
      btnClick(abc,event){
        console.log(abc, event);
      }
    }
  })
</script>
</body>
</html>

    7、v-on修饰符

    • stop - 调用 event.stopPropagation(),停止冒泡。
    • prevent - 调用 event.preventDefault()，组织浏览器默认事件。
    • capture - 添加事件侦听器时使用 capture 模式。
    • self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    • {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    • native - 监听组件根元素的原生事件。
    • once - 只触发一次回调。
    • left - (2.2.0) 只当点击鼠标左键时触发。
    • right - (2.2.0) 只当点击鼠标右键时触发。
    • middle - (2.2.0) 只当点击鼠标中键时触发。
    • passive - (2.3.0) 以 { passive: true } 模式添加侦听器

    8、v-if

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <span v-if="isUser">
    <label for="username">用户账号</label>
    <input type="text" id="username" placeholder="用户账号" key="username">
  </span>
  <span v-else>
    <label for="email">用户邮箱</label>
    <input type="text" id="email" placeholder="用户邮箱"  key="email">
  </span>
  <button @click="isUser = !isUser">切换类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {//定义数据
      message: '哪吒',
      isUser: true
    }
  })
</script>
</body>
</html>

    注：通过key=username解决input复用问题，input复用机制是vue底层为了缓存而制定的策略。

    9、v-show

    10、v-for遍历对象

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in user">{{item}}</li>
  </ul>

  <ul>
    <li v-for="(key, value) in user">{{key}}-{{value}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {//定义数据
      message: '哪吒',
      user: {
        name: '哪吒',
        age: 18,
        address: '大连'
      }
    }
  })
</script>
</body>
</html>

    key的作用主要是为了高效的更新虚拟DOM。

    11、哪些数组的方法是响应式的

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="item in girls" :key="item">{{item}}</li>
  </ul>
  <button @click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  let app = new Vue({
    el: '#app',
    data: {//定义数据
      message: '哪吒',
      girls: [
          '比比东','云韵','美杜莎','雅妃'
      ]
    },
    methods: {
      // 响应式方法简介
      btnClick(){
        //1.push方法
        this.girls.push('哪吒')
        //2.pop()：删除数组中的最后一个元素
        this.girls.pop()
        //3.shift()：删除数组中的第一个元素
        this.girls.shift()
        //4.unshift()：在数组最前面添加元素
        this.girls.unshift('哪吒')
        this.girls.unshift('CSDN','哪吒')
        //5.splice()：删除元素/插入元素/替换元素
        //删除元素：第二个参数表示你要删除几个元素
        //插入元素：第二个参数，传入0，后面加上要插入的元素
        //替换元素：第二个参数，表示我们要替换几个元素，后面是用于替换前面元素的新元素
        //splice(start)
        this.girls.splice(2,2,'无情','冷血')
        //6.sort()
        this.girls.sort()
        //7.reverse()
        this.girls.reverse()
        //8.注意：通过索引值修改数组中的元素，不是响应式的
        this.girls[0] = '云芝'
        //9.set(要修改的元素，索引值，修改后的值)
        Vue.set(this.girls,0,'云芝啊')
      }
    }
  })
</script>
</body>
</html>

    非响应式“云芝”写入失败。

    响应式，“云芝”写入成功

    二、购物车综合案例

    需求分析：通过动态加载数据，价格格式化展示，数量可增可减，可移除购物车，可清空购物车。

    1、index.html

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="app">
    <div v-if="girls.length">
      <table>
        <thead>
        <tr>
          <th></th>
          <th>名字</th>
          <th>年龄</th>
          <th>价格</th>
          <th>数量</th>
          <th>技能</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item,index) in girls">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.price | showPrice}}</td>
          <td>
            <button @click="decrement(index)"
                    :disabled="item.count <= 1">-</button>
            {{item.count}}
            <button @click="increment(index)">+</button>
          </td>
          <td>{{item.skill}}</td>

          <td>
            <button @click="removeHandler(index)">移除</button>
          </td>
        </tr>
        </tbody>
      </table>
      <h2>总价格：{{totalPrice | showPrice}}</h2>
    </div>
    <h2 v-else>购物车为空</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script src="index.js"></script>
</body>
</html>

    2、index.js

    const app = new Vue({
  el: '#app',
  data: {
    girls: [
      {
        id: 1,
        name: '比比东',
        age: 18,
        count: 1,
        skill: '不死之身',
        price: 100.00
      },{
        id: 2,
        name: '千仞雪',
        age: 20,
        count: 1,
        skill: '天使圣剑',
        price: 25.00
      },{
        id: 3,
        name: '美杜莎',
        age: 17,
        count: 1,
        skill: '美杜莎的凝望',
        price: 19.00
      },{
        id: 4,
        name: '云韵',
        age: 25,
        count: 1,
        skill: '风之极陨杀',
        price: 1999.99
      },{
        id: 5,
        name: '雅妃',
        age: 21,
        count: 1,
        skill: '红衣诱惑',
        price: 68.00
      }
  ]
  },
  methods :{
    increment(index){
      this.girls[index].count++
    },
    decrement(index){
      this.girls[index].count--
    },
    removeHandler(index){
      this.girls.splice(index, 1)
    }
  },
  computed: {
    totalPrice(){
      let totalPrice = 0;
      for(let i=0;i<this.girls.length;i++){
        totalPrice += this.girls[i].price * this.girls[i].count;
      }
      return totalPrice;
    }
  },
  filters: {
    showPrice(price) {
      return '$' + price.toFixed(2)
    }
  }
})

    3、style.css

    table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td {
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th {
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

    4、实现效果

    通过移除，清空购物车。?

    上一篇：【Vue知识体系总结 2】Vue动态绑定v-bind

    下一篇：【Vue知识体系总结 4】Vue组件化开发

    往期精彩内容：

    Java知识体系总结

    Spring框架总结

    超详细的springBoot学习笔记

    常见数据结构与算法整理总结

    Java设计模式：23种设计模式全面解析

    Java面试题总结（附答案）

    MySql知识体系总结

    Linux知识体系总结

    Redis知识体系总结

    cs
    上一篇：GooReey的博客：【Vue知识体系总结 4】Vue组件化开发
    下一篇：没有了