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

最新推荐文章于 2024-06-01 16:31:18 发布

2401_84434880

最新推荐文章于 2024-06-01 16:31:18 发布

阅读量293

点赞数 8

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84434880/article/details/138310348

版权

程序员专栏收录该内容

171 篇文章 0 订阅

订阅专栏

<!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('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;
}


### 最后

**文章到这里就结束了，如果觉得对你有帮助可以点个赞哦**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

![](https://img-blog.csdnimg.cn/img_convert/c028f79af6c643c8cab0f75496913e49.webp?x-oss-process=image/format,png)

rn '$' + 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;
}


### 最后

**文章到这里就结束了，如果觉得对你有帮助可以点个赞哦**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中...(img-1EUyqAmP-1714369168654)]