【Vue知识体系总结 3】Vue常用标签

约定不等于承诺〃 2021-09-09 01:52 741阅读 0赞

在进行一门新的语言学习时，基础是最重要的点，只要你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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70][]

### 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>

![20210717233755268.png][]

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>

![20210718001433254.png][]

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

![20210718001444526.png][]

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

![20210718001756193.png][]

## 二、购物车综合案例 ##

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

### 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 ###

### 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、实现效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 2][]

通过移除，清空购物车。

![20210718234344926.png][]

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

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

往期精彩内容：

[Java知识体系总结][Java]

[Spring框架总结][Spring]

[超详细的springBoot学习笔记][springBoot]

[常见数据结构与算法整理总结][Link 1]

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

[Java面试题总结（附答案）][Java 1]

[MySql知识体系总结][MySql]

[Linux知识体系总结][Linux]

[Redis知识体系总结][Redis]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70]: /images/20210813/a20ce619a45b494dae26e9dec7fcf134.png
[20210717233755268.png]: /images/20210813/257719d2a77a4922a918c350af91a91d.png
[20210718001433254.png]: /images/20210813/5466d451c5104173b0c8c354faed25a5.png
[20210718001444526.png]: /images/20210813/9ecb4e24ea28484dabfdf4bb2928689a.png
[20210718001756193.png]: /images/20210813/e91b56a867164e799f872006ad06c3a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 1]: /images/20210813/9cddd784c5d940db8ffaa4481ce40aef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3J1aV9qYXZh_size_16_color_FFFFFF_t_70 2]: /images/20210813/0c3bc0c5ac8846f098842691866d5e82.png
[20210718234344926.png]: /images/20210813/26d00576ef6241ddb0f6bb5e5edc1b36.png
[Vue_ 2_Vue_v-bind]: https://blog.csdn.net/guorui_java/article/details/118684853
[Vue_ 4_Vue]: https://blog.csdn.net/guorui_java/article/details/118979393
[Java]: https://blog.csdn.net/guorui_java/article/details/112391105
[Spring]: https://blog.csdn.net/guorui_java/article/details/104018528
[springBoot]: https://blog.csdn.net/guorui_java/article/details/104137262
[Link 1]: https://blog.csdn.net/guorui_java/article/details/106217472
[Java_23]: https://blog.csdn.net/guorui_java/article/details/104026988
[Java 1]: https://blog.csdn.net/guorui_java/article/details/107803283
[MySql]: https://blog.csdn.net/guorui_java/article/details/118558095
[Linux]: https://blog.csdn.net/guorui_java/article/details/117430091
[Redis]: https://blog.csdn.net/guorui_java/article/details/116850879