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

已于 2022-03-02 20:06:11 修改
阅读量2w 收藏 237
点赞数 58
分类专栏： JavaScript与Vue基础教程系列 文章标签： vue.js javascript html5
于 2021-07-19 07:36:12 首次发布
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/guorui_java/article/details/118830369
版权

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

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

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

目录

一、vue常用标签简介

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

2、合并两个字符串

3、计算属性的复杂操作

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

5、const 常量的定义

6、v-on的参数问题

7、v-on修饰符

8、v-if

9、v-show

10、v-for遍历对象

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

二、购物车综合案例

1、index.html

2、index.js

3、style.css

4、实现效果

一、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('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、实现效果

通过移除，清空购物车。 

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

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

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

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

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

关注公众号，备注1024，获取Java学习路线思维导图、加入万粉计划交流群 

哪 吒
关注
  • 58
    点赞
  • 踩
  • 237
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 67
    评论
专栏目录
vue的基本标签
weixin_46484970的博客
12-14 3324
el：挂载点，设置vue实例挂载管理元素，不能使用HTML标签和body标签 data：数据对象 methods：方法 vue实例的作用范围是：vue会管理el选项命中的元素及其内部的后代元素 vue指令： 1、内容绑定，事件绑定。 v-text：设置文本 v-html：设置元素的innerHTML，会解析标签 v-on基础：为元素绑定事件，绑定方法定义再methods属性中，this关键字可以访问定义在data数据中，可以简写成@ 2、显示切换，属性绑定。 v-show：根据表达值的真假，切换元素的显示与
前端开发Vue基础篇：Day02 Vue基础知识.pdf
11-11
Vue基础知识 本文主要介绍了 Vue 基础知识，包括模板语法的插值操作、v-for 指令的 key 属性、reduce 方法的使用和计算属性的使用。 一、模板语法的插值操作 在 Vue 中，我们可以使用模板语法来插值操作。常用的...
Vue常用标签
weixin_55404498的博客
06-19 6812
1. v-text标签： 效果与{{}}效果相同，改变指定元素的文本值，
Vue配置项之el
最新发布
weixin_45134711的博客
06-12 511
首先说明一下，本人是前端小学生级别的菜鸡，吐槽的话请口下留情，在评论区指出错误或者补充不足，我会很喜欢，互喷不会进步，相互指点才会。。。。
vue常用标签
weixin_46395869的博客
02-21 1207
vue基本标签
vue常用标签，详细讲解
2401_84093019的博客
04-04 784
button @click=“btnClick(abc, $event)”>按钮一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
Vue各种标签的使用方法
weixin_45718431的博客
03-02 1310
Vue各种标签的使用方法
Vue中常用到的标签和指令
hulin的博客
08-01 1986
Vue中常用到的标签和指令
基于SpringBoot + Vue的知识库管理系统源码.zip
06-12
《构建基于SpringBoot + Vue的知识库管理系统》 在当今信息化社会，知识库管理系统的重要性日益凸显，它能够帮助企业、团队和个人高效地存储、管理和检索信息。本项目“基于SpringBoot + Vue的知识库管理系统”正是...
_vue基础知识
02-14
以上就是Vue基础知识的主要内容。通过学习这些概念，你可以构建出功能丰富的前端应用，并逐步掌握Vue的开发模式。在压缩包文件`_vueFundamentals-main`中，可能包含了更多关于Vue基础学习的资料，如教程、示例代码或...
vue实践基础项目面试题
01-10
以下是对给定文件信息的详细解释和知识点总结： 一、CSS 作用域 在 Vue 中，CSS 只在当前组件起作用，可以通过在 style 标签中写入 scoped 即可，例如：<style scoped></style> 二、v-if 和 v-show 的区别 v-if ...
vue组件入门知识全梳理
10-14
让我们深入了解一下Vue组件的基础知识。 ### 组件概念 Vue组件是可复用的代码模块，它们有自己的视图和数据逻辑。组件可以嵌套并在不同组件之间重用。每个组件都有自己的`template`、`data`、`methods`等属性，...
Vue快速入门以及基础标签使用
SeeYouAgain的博客
08-25 878
介绍vue的基本使用以及它的基础标签使用场景和用法
Vue常用7个属性
weixin_54495206的博客
07-21 6428
Vue常用7个属性。
Vue 一些常用的标签
weixin_41359273的博客
10-28 3677
1.v-once标签，我们知道vue是响应式的，即某个地方数据更改了，界面的数据也会更改，有时候我们只希望界面只渲染一次，不希望界面的数据乱变动，那么就可以使用v-once标签了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id=
Vue基础知识总结 3：vue常用标签_vue标签
2401_84434880的博客
04-29 332
按钮data: {//定义数据message: '哪吒',abc: 123},methods: {})
一、vue学习之常用标签
码
05-13 995
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue常用标签</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app">.
Vue基本标签及用法
weixin_46251037的博客
08-21 646
vue是一套前端框架，免除原生JavaScript的DOM操作，简化缩写基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程关注放到数据上官网：https://cn.vuejs.com。
评论 67
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哪 吒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值