Vue基础知识总结 3：vue常用标签

原创 2022-03-02 20:06:11 2.1w 阅读 AI写同款

收录于

JavaScript与Vue基础教程系列

哪吒

码龄9年墨衍会员 · AI 创作全网分发

59万+粉丝2933篇原创

关注

Vue 开发：打造多功能标签云组件通过本文的介绍，我们详细阐述了如何使用 Vue 开发一个多功能的标签云组件。从需求分析出发，确定了组件的基本功能、交互功能和其他功能；通过技术选型，选择了合适的技术栈来实现组件；在代码实现部分，给出。阅读详情

AI摘要

本文详细介绍了Vue.js的基础标签和用法，包括v-for、v-if/v-show、事件处理、计算属性、响应式数组方法等，并通过购物车案例展示了Vue的综合应用。此外，还提供了Vue知识体系的上下文链接，帮助读者深入学习。

🍅 作者简介：哪吒，优快云2021博客之星亚军🏆、新星计划导师✌、博客专家💪

🍅 哪吒多年工作总结：Java学习路线总结，搬砖工逆袭Java架构师

🍅 关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步

一、vue常用标签简介

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

2、合并两个字符串

3、计算属性的复杂操作

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

一、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 - 阻止默认事件修饰符
capture - 添加事件侦听器时使用 capture 模式。
self - 只能在event.target是当前元素自身时触发处理函数
{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('优快云','哪吒')
        //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;
}