二五(Vue2-01)、创建实例、插值表达式、响应式、Vue指令(v-show v-if v-on v-bind v-for v-model)

Vue2+Vue3基础入门到实战项目(一)—— 课程学习笔记 2023新版Vue2+Vue3基础入门到实战项目。Vue快速上手! 阅读详情

1. Vue 概念及创建实例

<body>

  <!-- 
  创建Vue实例,初始化渲染
  1. 准备容器 (Vue所管理的范围)
  2. 引包 (开发版本包 / 生产版本包) 官网
  3. 创建实例
  4. 添加配置项 => 完成渲染
-->

  <div id="app">
    <h1>{{msg}}</h1>
    <a href="#">{{num}}</a>
  </div>

  <!-- 
    Vue是一个用于构建用户界面的渐进式框架
      构建用户界面 -- 基于数据动态渲染出用户看到的页面
      渐进式 -- 循序渐进
      框架 -- 一套完整的项目解决方案,提升开发效率
  -->
  <!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

  <script>
    // 创建Vue实例 new Vue()
    const app = new Vue({
      // el 指定挂载点,选择器指定控制的是哪个盒子
      el: '#app',
      // data 提供数据
      data: {
        msg: 'hello world',
        num: 100
      }
    })

  </script>

</body>

2. 插值表达式

<body>

  <!-- 
  插值表达式:Vue的一种模板语法
  作用:利用表达式进行插值,将数据渲染页面中
  语法:{{ 表达式 }}
  表达式:是可以被求值的代码,JS引擎会将其计算出一个结果

  注意点:
    1. 使用的数据要存在
    2. 支持的是表达式,不是语句  if  for
    3. 不能在标签属性中使用 {{ }}
-->

  <div id="app">
    <!-- 插值表达式 -- 正确使用 -->
    <h3>{{ msg }}</h3>
    <p>{{ num }}</p>
    <p>{{ `num值为${num}` }}</p>
    <p>{{ num + 1 }}</p>
    <p>{{ num > 10 ? '大于10' : '小于等于10' }}</p>
    <p>{{ obj.name }}</p>
    <p>{{ arr[2] }}</p>

    <!-- 错误使用 -->
    <!-- 1. 数据不存在 -->
    <!-- <p>{{ price }}</p> -->
    <!-- 2. 插入语句 -->
    <!-- <p>{{ if(num>10) {console.log('num大于10')} }}</p> -->
    <!-- 3. 在标签属性中使用 -->
    <!-- <p title="{{ num }}"></p> -->
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        msg: 'Hello World',
        num: 20,
        obj: {
          name: 'Tom',
          age: 18
        },
        arr: [1, 5, 7, 2, 45, 89]
      }
    })

  </script>

</body>

3. 响应式特性

<body>

  <!-- 
    数据的响应式处理 → 响应式:数据变化,视图自动更新
    聚焦于数据 → 数据驱动视图
    使用 Vue 开发,关注业务的核心逻辑,根据业务修改数据即可
  -->

  <div id="app">
    <h3>在一个插值表达式中引用多个 data 属性</h3>
    <p>+拼接 {{name + ' ' + age}}</p>
    <p>模板字符串 {{ `${name} ${age}` }}</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        name: 'Tom',
        age: 18,
      }
    })

  </script>

</body>

4. Vue 指令

4.1 v-html v-text

<body>
  <!-- 
    Vue 指令
      指令就是带有 v- 前缀 的特殊 属性,不同属性 对应 不同的功能
      学习不同指令 → 解决不同业务场景需求

    动态解析标签:
      v-html = "表达式 " → 动态设置元素 innerHTML
  -->
  <!-- v-html 相当于 innerHTML,识别标签 -->
  <!-- v-text 相当于 innerText,不识别标签,把标签当成普通字符串 -->
  <div id="app">
    <div v-html="str"></div>
    <div v-html="str1">html超链接</div>
    <div v-text="str1">text超链接</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        str: 'Hello',
        str1: '<a href="#">超链接</a>'
      }
    })
  </script>

</body>

4.2 v-show v-if

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      line-height: 100px;
      margin: 10px;
      border: 3px solid #000;
      text-align: center;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #ccc;
    }
  </style>
</head>

<body>
  <!-- 
    v-show 底层原理:切换 css 的 display: none 来控制显示隐藏
      场景:频繁切换显示隐藏的场景

    v-if 底层原理:根据 判断条件 控制元素的 创建 和 移除(条件渲染)
      场景:要么显示,要么隐藏,不频繁切换的场景
  -->

  <div id="app">
    <div class="box" v-show="blF">我是v-show控制的盒子</div>
    <div class="box" v-if="blF">我是v-if控制的盒子</div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        blT: true,
        blF: false
      }
    })
  </script>

</body>

</html>

4.3 v-else v-else-if

<body>
  <!-- 
    v-else v-else-if
    作用:辅助 v-if 进行判断渲染
    注意:需要紧挨着 v-if 一起使用
  -->

  <div id="app">
    <p v-if="gender === 0">性别:♂ 男</p>
    <p v-else>性别:♀ 女</p>
    <hr>
    <p v-if="score >= 90">成绩评定A: 奖励电脑一台</p>
    <p v-else-if="score >= 70">成绩评定B: 奖励周末郊游</p>
    <p v-else-if="score >= 60">成绩评定C: 奖励零食礼包</p>
    <p v-else>成绩评定D: 惩罚一周不能玩手机</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        gender: 0,
        score: 99
      }
    })
  </script>

</body>

4.4 v-on

4.4.1 内联语句

4.4.2 无参函数

<!-- 
  v-on
  1. 作用:注册事件 = 添加监听 + 提供处理逻辑
  2. 语法:
    v-on:事件名 = "内联语句"
    v-on:事件名 = "methods中的函数名"
  3. 简写:@事件名 = "内联语句"
  4. 注意:methods函数内的 this 指向 Vue 实例
-->

<body>
  <div id="app">
    <!-- 1. 内联语句 -->
    <!-- <button v-on:click="num--" v-show="num>1">-</button>
    <span>{{ num }}</span>
    <button @click="num++">+</button> -->

    <!-- 2. 无参函数 -->
    <!-- 需要传参必须写(), 无参函数()有无不影响界面效果 -->
    <button v-on:click="reduce()" v-show="num>1">-</button>
    <span>{{ num }}</span>
    <button @click="add">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <!-- <script src="lib/vue.js"></script> -->
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        num: 5
      },
      // 封装函数的配置项
      methods: {
        add() { this.num++ },
        reduce() { this.num-- }
      }
    })
  </script>
</body>

4.4.3 案例 - 点击切换隐藏

<body>
  <div id="app">
    <button @click="fn">切换显示隐藏</button>
    <h1 v-show="flag">黑马程序员</h1>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        flag: true
      },
      methods: {
        fn() { this.flag = !this.flag }
      }
    })
  </script>

</body>

4.4.4 有参函数 案例 - 小黑自动售货机

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      border: 3px solid #000000;
      border-radius: 10px;
      padding: 20px;
      margin: 20px;
      width: 200px;
    }

    h3 {
      margin: 10px 0 20px 0;
    }

    p {
      margin: 20px;
    }
  </style>
</head>

<body>

  <div id="app">
    <div class="box">
      <h3>小黑自动售货机</h3>
      <!-- v-bind:disabled="balance>0?false:true" -->
      <button @click="fn(5)" v-bind:disabled="flag">可乐5元</button>
      <button @click="fn(10)" v-bind:disabled="flag">咖啡10元</button>
      <button @click="fn(8)" v-bind:disabled="flag">牛奶8元</button>
    </div>
    <p>银行卡余额:{{balance}}元</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        balance: 100,
        // data 对象的属性初始化时不能直接引用其他属性,因为它们还没有被定义。
        // flag: this.balance > 0 ? false : true
      },
      // 计算属性
      computed: {
        flag() {
          return this.balance <= 0;
        }
      },
      methods: {
        fn(price) {
          // this.balance = this.balance - price
          // this.balance -= price
          if (this.balance >= price) {
            this.balance -= price;
          } else {
            alert('余额不足');
          }
        }
      }
    })
  </script>
</body>

</html>

4.5 v-bind

<body>
  <div id="app">
    <!-- 
      v-bind:src   =>  可简写为 :src
      作用:动态的设置html的标签属性
    -->
    <img v-bind:alt="msg">
    <img :src="url">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: '图片',
        url: 'imgs/10-01.png'
      }
    })
  </script>
</body>

案例图片切换 - 波仔学习之旅

<body>
  <div id="app">
    <!-- <button @click="reduce">上一页</button> -->
    <button @click="index--" v-show="index>0">上一页</button>
    <div>
      <!-- <img src="imgs/11-00.gif" alt=""> -->
      <img alt="#" :src="imgs[index]">
    </div>
    <!-- <button @click="add">下一页</button> -->
    <button @click="index++" v-show="index<imgs.length-1">下一页</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgs: [
          'imgs/11-00.gif',
          'imgs/11-01.gif',
          'imgs/11-02.gif',
          'imgs/11-03.gif',
          'imgs/11-04.png',
          'imgs/11-05.png'
        ],
        index: 0,
      },
      /* methods: {
        add() {
          this.index++
        },
        reduce() {
          this.index--
        }
      } */
    })
  </script>
</body>

4.6 v-for

<!-- 
  v-for
  1. 作用:基于数据循环,多次渲染整个元素 → 数组(重要)、对象、数字...
  2. 遍历数组语法:
    v-for = "(item, index) in 数组" 
    ➢ item 每一项, index 下标
    ➢ 省略 index: v-for = "item in 数组"
-->

<body>
  <div id="app">
    <!-- <h3>小黑水果店</h3> -->
    <!-- 数组 -->
    <ul>
      <li v-for="(item,index) in list">
        {{item}} -- {{index}}
      </li>
      <li v-for="(item) in list">
        {{item}}
      </li>
    </ul>

    <!-- 字符串 -->
    <ul>
      <li v-for="(item) in str">
        {{item}}
      </li>
    </ul>

    <!-- 对象 -->
    <p v-for="(value,key,index) in obj">
      {{value}} -- {{key}} -- {{index}}
    </p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: ['Tom', 'Jerry', 'Rose'],
        str: 'Hi',
        obj: {
          name: 'Taylor',
          age: 19,
        }
      }
    })
  </script>
</body>

案例图书管理 - 小黑的书架

<!-- 图书管理案例 - 小黑的书架 -->

<body>
  <div id="app">
    <h3 style="margin-left: 30px;">小黑的书架</h3>
    <ul>
      <!-- <li>
        <span>《红楼梦》</span>
        <span>曹雪芹</span>
        <button>删除</button>
      </li> -->
      <li v-for="(item) in booksList">
        <span>{{item.name}}</span>
        <span>{{item.author}}</span>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      },
      methods: {
        del(id) {
          // console.log(id)
          // 用 filter 根据 id 从数组中删除对应项
          this.booksList = this.booksList.filter((item) => {
            return item.id !== id
          })
        }
      }
    })
  </script>
</body>

v-for 中的 key

<!-- 
  v-for 中的 key
  语法:key属性 = "唯一标识"
  作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
  注意点:
    1. key 的值只能是 字符串 或 数字类型
    2. key 的值必须具有 唯一性
    3. 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应)

  不加 key
    v-for 的默认行为会尝试 原地修改元素 (就地复用)
-->

<body>
  <div id="app">
    <h3 style="margin-left: 30px;">小黑的书架</h3>
    <ul>
      <!-- <li v-for="(item) in booksList"> -->
      <li v-for="(item) in booksList" :key="item.id">
        <span>{{item.name}}</span>
        <span>{{item.author}}</span>
        <button @click="del(item.id)">删除</button>
      </li>
    </ul>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        booksList: [
          { id: 1, name: '《红楼梦》', author: '曹雪芹' },
          { id: 2, name: '《西游记》', author: '吴承恩' },
          { id: 3, name: '《水浒传》', author: '施耐庵' },
          { id: 4, name: '《三国演义》', author: '罗贯中' }
        ]
      },
      methods: {
        del(id) {
          this.booksList = this.booksList.filter((item) => {
            return item.id !== id
          })
        }
      }
    })
  </script>
</body>

4.7 v-model

<body>
  <div id="app">
    <!-- 
      v-model 可以让数据和视图,形成双向数据绑定
      (1) 数据变化,视图自动更新
      (2) 视图变化,数据自动更新
      可以快速[获取]或[设置]表单元素的内容

      语法: v-model = '变量'
     -->
    账户:<input type="text" v-model="userName"> <br><br>
    密码:<input type="password" v-model="passWord"> <br><br>
    <button @click="login">登录</button>
    <button @click="reset">重置</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        userName: '',
        passWord: ''
      },
      methods: {
        login() {
          console.log(this.userName, this.passWord)
        },
        reset() {
          this.userName = ''
          this.passWord = ''
        }
      }
    })
  </script>
</body>

5. 综合案例 - 小黑记事本

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/index.css" />
  <title>记事本</title>
</head>

<body>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>
      <input placeholder="请输入任务" class="new-todo" v-model="todo" />
      <button class="add" @click="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <!-- 1. 列表渲染 -->
        <li class="todo" v-for="(item,index) in list" :key="item.id">
          <div class="view">
            <span class="index">{{index+1}}.</span> <label>{{item.txt}}</label>
            <button class="destroy" @click="del(item.id)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer">
      <!-- 统计 -->
      <!-- <span class="todo-count">合 计:<strong> 1 </strong></span> -->
      <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
      <!-- 清空 -->
      <button class="clear-completed" @click="reset" v-show="list.length>0">
        清空任务
      </button>
    </footer>
  </section>

  <!-- 底部 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        todo: '',
        list: [
          { id: 1, txt: '敲代码' },
          { id: 2, txt: '删代码' },
          { id: 3, txt: '改代码' }
        ]
      },
      methods: {
        // 2. 添加功能
        add() {
          /* if (this.todo.trim().length > 0) {
            this.list.unshift({
              id: +new Date(),
              txt: this.todo
            })
            // console.log(this.list[0].id)
            this.todo = ''
          } */
          if (this.todo.trim() === '') {
            alert('请输入任务内容')
            return
          }
          this.list.unshift({
            id: +new Date(),
            txt: this.todo
          })
          this.todo = ''
        },
        // 3. 删除功能
        del(id) {
          this.list = this.list.filter(item => item.id !== id)
        },
        // 4. 清空
        reset() {
          this.list = []
        }
      }
    })
  </script>
</body>
<!-- 
  功能总结:
  1. 列表渲染: v-for key 的设置 {{ }} 插值表达式
  2. 删除功能: v-on 调用传参 filter 过滤 覆盖修改原数组
  3. 添加功能: v-model 绑定 unshift 修改原数组添加
  4. 底部统计 和 清空
      数组.length累计长度
      覆盖数组清空列表
      v-show 控制隐藏
-->

</html>

6. 作业

6.1 哔哩哔哩首页

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bilibili-干杯~~~</title>
  <!-- 引入favicon图标 -->
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 引入css文件 -->
  <link rel="stylesheet" href="./css/index.css">
  <!-- 引入字体图标文件 -->
  <link rel="stylesheet" href="./fonts/iconfont.css">
</head>

<body>
  <div id="app">
    <!-- 头部模块 -->
    <header class="suspension">
      <div class="m-navbar">
        <!-- logo -->
        <a href="#" class="logo">
          <i class="iconfont Navbar_logo"></i>
        </a>
        <!-- 右侧 -->
        <div class="right">
          <a href="#" class="search">
            <i class="iconfont ic_search_tab"></i>
          </a>
          <a href="#" class="face">
            <img src="./images/login.png" alt="">
          </a>
          <div class="app-btn">
            <img src="./images/download.png" alt="">
          </div>
        </div>
      </div>
      <div class="channel-menu">
        <div class="tabs">
          <!-- 很宽的盒子 -->
          <div class="tabs-list">
            <a href="#">首页</a>
            <a href="#">动画</a>
            <a href="#">番剧</a>
            <a href="#">果蔬</a>
            <a href="#">音乐</a>
            <a href="#">舞蹈</a>
            <a href="#">鬼畜</a>
            <a href="#">吹鬼</a>
            <!-- 红色线 -->
            <div class="line"></div>
          </div>
        </div>
        <!-- 下拉箭头 -->
        <div class="after">
          <i class="iconfont general_pulldown_s" @click="isShow"></i>
        </div>
      </div>
    </header>
    <!-- 频道下拉模块 -->
    <div class="tabs-dropdown" v-show="flag">
      <div class="tabs-wrap">
        <span v-for="(item) in channelList">{{item}}</span>
        <!-- <span>动画</span>
        <span>番剧</span>
        <span>国创</span>
        <span>音乐</span>
        <span>舞蹈</span>
        <span>游戏</span>
        <span>科技</span>
        <span>运动</span>
        <span>汽车</span>
        <span>生活</span>
        <span>美食</span>
        <span>动物圈</span> -->
        <!-- ''''''' -->
      </div>
      <div class="close-wrap">
        <span @click="isShow">收起︿</span>
      </div>
    </div>
    <!-- 主体部分 -->
    <div class="m-home">
      <div class="video-list">
        <!-- 视频卡片模板 -->
        <a href="#" class="video-item" v-for="(item,index) in videoList" :key="index">
          <div class="card">
            <img :src=item.img>
            <!-- 播放量 -->
            <div class="count">
              <span>
                <i class="iconfont icon_shipin_bofangshu"></i>
                {{item.views}}
                <!-- item.views -->
              </span>
              <span>
                <i class="iconfont icon_shipin_danmushu"></i>
                {{item.commonet}}
              </span>
            </div>
          </div>
          <p class="title ellipsis-2">
            <!-- 黑马程序员前端React入门到实战视频教程,从react18+hooks核心基础到企业级项目开发实战(B站评论、极客园项目等)及大厂面试全通关 -->
            {{item.title}}
          </p>
        </a>
      </div>
    </div>
    <!-- 底部模块 -->
    <footer class="app">
      <div class="btn-app">
        <i class="iconfont Navbar_logo"></i>
        打开App,看你感兴趣的视频
      </div>
    </footer>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <!-- <script src="./js/index.js"></script> -->
  <script>
    // TODO:阅读代码,根据提供的数据,实现目标效果
    // DATA字段说明
    /**
     *  channelList 频道列表
     *  videoList 视频列表
     *  title 视频标题
     *  views 播放量
     *  commonet 评论量
     *  img 封面图片
     */

    /* 
      具体需求如下:
        频道列表展开收起:点击下拉箭头,显示频道列表,点击收起,隐藏频道列表
        频道渲染:根据提供数据,循环渲染出每个频道
        播放列表渲染:根据提供数据,循环渲染出每个视频的信息
    */
    const app = new Vue({
      el: "#app",
      data: {
        channelList: [
          "首页",
          "动画",
          "番剧",
          "国创",
          "音乐",
          "舞蹈",
          "游戏",
          "科技",
          "运动",
          "汽车",
          "生活",
          "美食",
          "知识",
          "动物圈",
          "鬼畜",
          "时尚娱乐影视",
          "纪录片",
          "电影",
          "电视剧",
          "直播",
          "相簿",
          "课堂",
        ],
        videoList: [
          {
            title:
              "黑马程序员前端React入门到实战视频教程,从react18+hooks核心基础到企业级项目开发实战(B站评论、极客园项目等)及大厂面试全通关",
            views: "110.6W",
            commonet: "2.3万",
            img: "https://i0.hdslb.com/bfs/archive/4ba435e67fa208ce7a5343c0fc2cd454d8cc50fc.jpg@480w_270h_1c",
          },
          {
            title:
              "黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程",
            views: "238.4W",
            commonet: "8.9万",
            img: "https://i1.hdslb.com/bfs/archive/7cbcf700e3950f40dab97b5e57c8581733fdad22.jpg@480w_270h_1c",
          },
          {
            title:
              "Java八股文面试题视频教程,Java面试八股文宝典(含阿里、腾迅大厂java面试真题,java数据结构,java并发,jvm等最新java面试真题)",
            views: "87.5W",
            commonet: "1.4万",
            img: "https://i1.hdslb.com/bfs/archive/3c0dbdf9863a9e21d8ea5c50892b01db1268a268.jpg@480w_270h_1c",
          },
          {
            title:
              "黑马程序员2023新版JavaWeb开发教程,实现javaweb企业开发全流程(涵盖Spring+MyBatis+SpringMVC+SpringBoot等)",
            views: "231.6W",
            commonet: "8.2万",
            img: "https://i1.hdslb.com/bfs/archive/81c2b09fea6a978a169eeb3fde028066751e06e5.jpg@480w_270h_1c",
          },
          {
            title:
              "黑马程序员Node.js全套入门教程,nodejs新教程含es6模块化+npm+express+webpack+promise等_Nodejs实战案例详解",
            views: "209.6W",
            commonet: "5.5万",
            img: "https://i2.hdslb.com/bfs/archive/a35e28d321c55c783526b2382431409935ddfb9f.jpg@480w_270h_1c",
          },
          {
            title:
              "2023新版数据结构与算法Java视频教程(上篇),java高级程序员必学的数据结构与算法",
            views: "54.6W",
            commonet: "1万",
            img: "https://i1.hdslb.com/bfs/archive/8dae32b310561144385867468a39b3f7cab1ba24.jpg@480w_270h_1c",
          },
          {
            title: "黑马程序员人工智能教程_10小时学会图像处理OpenCV入门教程",
            views: "71W",
            commonet: "1.8万",
            img: "https://i0.hdslb.com/bfs/archive/c6f5409bb52de12370b0cd73d98d0f1dd2019f9e.jpg@480w_270h_1c",
          },
          {
            title:
              "黑马程序员全套Python教程_Python基础入门视频教程,零基础小白自学Python入门教程",
            views: "157W",
            commonet: "4.8万",
            img: "https://i0.hdslb.com/bfs/archive/213b14bfbdbf54248a3f5fa742cb9f9c8f684274.png@480w_270h_1c",
          },
        ],
        flag: true,
      },
      methods: {
        isShow() {
          this.flag = !this.flag;
        },
      },
    });
  </script>
</body>

</html>

6.2 Boss 直聘技能选择 - 二次开发

<!DOCTYPE html>
<html>

<head>
    <title>Boss直聘技能选择</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="app">
        <h2>
            <span class="logo-head"></span>
        </h2>
        <div class="skill-tip">
            <h3>拥有技能</h3>
            <p>请选择技能标签,被选中的标签将突出展示给BOSS</p>
        </div>
        <div class="skill-wrap">
            <div class="title">自定义标签</div>
            <div class="add-wrap">
                <input type="text" class="tip" placeholder="请输入关键词" v-model="newSkill" />
                <button class="add-btn" @click="add">添加</button>
            </div>
        </div>
        <ul class="skill-wrap select">
            <div class="title">已选</div>
            <!-- <li>html5 <span>x</span></li> -->
            <li v-for="(item,index) in sT()" :key="index" @click="item.select = !item.select">{{item.skillName}}
                <span>x</span>
            </li>
        </ul>
        <ul class="skill-wrap">
            <div class="title">可选</div>
            <!-- <li>css3</li> -->
            <li v-for="(item,index) in sF()" :key="index" @click="item.select = !item.select">{{item.skillName}}</li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- <script src="./js/index.js"></script> -->
    <script>
        // TODO:阅读代码,根据提供的数据,实现目标效果
        // DATA字段说明
        /**
         *  skillList 技能列表
         *  skillName 技能名称
         *  select 已选择
        */

        /* 
        具体需求如下:
            渲染数据:将提供的数据绑定到页面对应的位置
            已选标签:数据中select字段为true的数据对应显示已选列表中,点击标签时更改为可选
            可选标签:数据中select字段为false的数据对应显示可选列表中,点击标签时更改为已选
            添加自定义标签:
            输入框内容为空时,点击添加,不处理
            当输入框内容不为空时,点击添加,在已选列表中新增标签
            新增标签后,清空输入框内容
            新增的自定义标签可以点击切换可选和已选的状态
        */
        const app = new Vue({
            el: '#app',
            data: {
                skillList: [
                    {
                        skillName: "html5",
                        select: true,
                    },
                    {
                        skillName: "css3",
                        select: true,
                    },
                    {
                        skillName: "javascript",
                        select: true,
                    },
                    {
                        skillName: "webapi",
                        select: true,
                    },
                    {
                        skillName: "ajax",
                        select: true,
                    },
                    {
                        skillName: "git",
                        select: true,
                    },
                    {
                        skillName: "echarts",
                        select: true,
                    },
                    {
                        skillName: "node",
                        select: true,
                    },
                    {
                        skillName: "vue",
                        select: true,
                    },
                    {
                        skillName: "微信小程序",
                        select: false,
                    },
                    {
                        skillName: "uni-app",
                        select: false,
                    },
                    {
                        skillName: "react",
                        select: false,
                    },
                ],
                newSkill: "",
            },
            methods: {
                sT() {
                    // return this.skillList.filter((item) => item.select === true);
                    return this.skillList.filter((item) => item.select);
                },
                sF() {
                    // return this.skillList.filter((item) => item.select === false);
                    return this.skillList.filter((item) => !item.select);
                },
                add() {
                    if (this.newSkill.trim() === "") {
                        alert("请输入有效标签");
                        return;
                    }
                    this.skillList.push({
                        skillName: this.newSkill,
                        select: true,
                    });
                    this.newSkill = "";
                },
            },
        });
    </script>
</body>

</html>

6.3 12306 订单详情 - 变形题

<!DOCTYPE html>
<html>

<head>
    <title>12306订单详情</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div id="app" :style="showStyle">
        <h1>订单详情</h1>
        <div class="container">
            <!-- 车次信息 -->
            <div class="ticket-info">
                <div class="start">
                    <div class="time">{{orderInfo.startTime}}</div>
                    <div class="origin">{{orderInfo.origin}}<span>&gt;</span></div>
                </div>
                <div class="train-info">
                    <div class="train-number">{{orderInfo.trainNumber}}<span>&gt;</span></div>
                    <div class="station-type">{{orderInfo.stationType === 1?'始发站':'经停站'}}</div>
                    <div class="train-duration">历时{{orderInfo.duration}}</div>
                </div>
                <div class="end">
                    <div class="time">{{orderInfo.endTime}}</div>
                    <div class="destination">{{orderInfo.destination}}<span>&gt;</span></div>
                </div>
            </div>
            <!-- 发车时间 -->
            <div class="train-date">
                <span class="start-date">发车时间:{{orderInfo.trainDate}}</span>
                <span class="expiration-date">车票当日当次有效</span>
            </div>
            <!-- 改签退票 -->
            <div class="btn-wrap">
                <button :disabled="!orderInfo.rebook" @click="showMsg('改签成功')">改签</button>
                <span>|</span>
                <button :disabled="!orderInfo.cancellation" @click="showMsg('退票成功')">退票</button>
            </div>
            <!-- 乘车人列表 -->
            <div class="passenger-list">
                <!-- <div class="passenger-info">
                    <h3 class="passenger">
                        <div class="passenger-name">
                            张三 <span class="passenger-type">成人票</span>
                        </div>
                        <div class="seat-info"><span class="seat-type">过道</span>二等座 04车 11B号</div>
                    </h3>
                    <div class="seat-price">
                        <div class="passenger-passport">
                            中国居民身份证
                        </div>
                        <div class="price">¥263</div>
                    </div>
                    <div class="status">
                        <div class="ticket-status">
                            已出站
                        </div>
                        <div class="illustrate">退改说明</div>
                    </div>
                </div> -->
                <div class="passenger-info" v-for="(passenger) in orderInfo.passengers" :key="passenger.pid">
                    <h3 class="passenger">
                        <div class="passenger-name">
                            {{passenger.pname}} <span class="passenger-type">{{passenger.isAdult ? '成人票':'儿童票'}}</span>
                        </div>
                        <div class="seat-info">
                            <!-- <span class="seat-type">{{seatType(passenger.seatType)}}</span> -->
                            <span class="seat-type" v-if="passenger.seatType!==2">
                                {{passenger.seatType===1?'靠窗':'过道'}}</span>
                            {{passenger.seat}}
                        </div>
                    </h3>
                    <div class="seat-price">
                        <div class="passenger-passport">中国居民身份证</div>
                        <div class="price">¥{{passenger.price}}</div>
                    </div>
                    <div class="status">
                        <div class="ticket-status">已出站</div>
                        <div class="illustrate">退改说明</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tip">
            🔔 订单信息查询有效期限为30日
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <!-- <script src="./js/index.js"></script> -->
    <script>
        // TODO:阅读代码,根据提供的订单信息数据,通过学习的Vue指令将页面渲染成目标效果
        // DATA:数据字段说明
        /**
         *  startTime: 发车时间
         *  endTime: 到站时间
         *  origin: 发车站
         *  destination:目的地
         *  trainNumber:车次
         *  trainDate:发车日期
         *  stationType:车站类型(1为始发站,2为经停站)
         *  duration:历时
         *  rebook:能否改签
         *  cancellation:能否退票
         *  passengers:乘车人列表
         *  pid:乘车人ID
         *  pname:乘车人姓名
         *  isAdult:是否成年
         *  seat:座位
         *  price:票价
         *  seatType:作为类型(1是靠窗,2是中间,3是过道)
        */
        const app = new Vue({
            el: "#app",
            data: {
                // 防止渲染闪烁
                showStyle: "display:block;",
                orderInfo: {
                    startTime: "14:11",
                    endTime: "17:40",
                    origin: "西安北",
                    destination: "成都东",
                    trainNumber: "D1937",
                    trainDate: "2023.09.30 星期六",
                    stationType: 2,
                    duration: "3时29分",
                    // rebook:能否改签 能改签t 按钮不禁用f
                    rebook: false,
                    cancellation: true,
                    passengers: [
                        {
                            pid: "0001",
                            pname: "王大锤",
                            isAdult: true,
                            seat: "二等座 04车 11A号",
                            price: 263,
                            seatType: 1,
                        },
                        {
                            pid: "0002",
                            pname: "李二狗",
                            isAdult: false,
                            seat: "二等座 04车 11B号",
                            price: 263,
                            seatType: 2,
                        },
                        {
                            pid: "0003",
                            pname: "张三疯",
                            isAdult: true,
                            seat: "二等座 04车 11C号",
                            price: 263,
                            seatType: 3,
                        },
                    ],
                },
            },
            methods: {
                /* seatType(num) {
                    switch (num) {
                        case 1:
                            return "靠窗";
                        // case 2:
                        //   return "中间";
                        case 3:
                            return "过道";
                    }
                }, */
                /* reOrCan(msg) {
                    // console.log(11);
                    if (msg === "改签") {
                        alert(`${msg}成功`);
                    } else if (msg === "退票") {
                        alert(`${msg}成功`);
                    }
                }, */
                showMsg(msg) {
                    alert(msg)
                }
            },
        });
    </script>
</body>

</html>

Vue_01学习:详细语法以及代码示例 + 小练习 + 综合案例 (第一期) Vue_01学习:详细语法以及代码示例 + 小练习 + 综合案例 (第一期) 阅读详情

相关推荐

PCIe扫盲(三)

需要特别注意的是,PCIe的Spec中明确规定只有Root有权限发起配置请求(Originate Configuration Requests),也就是说PCIe系统里面的其他设备是不允许去配置其他设备的配置空间的,即peer-to-peer的配置请求是不允许的。当配置请求进行BDF路由的时候,正是依靠这些信息来确定要找的设备的。前面的文章还介绍过,Root和Switch的每一个端口中都包含一个P2P桥,并且知道桥的配置空间头(Configuration Space Header)是Type1型的。

Liuqz2009的专栏 2403

Vue2学习(一)——Vue简介、Vue指令与指令修饰符

Vue2学习(一)——Vue简介、Vue指令与指令修饰符

雷神乐乐的博客 3367

Abaqus 单元与全局刚度矩阵导出实战指南:从INP修改到结果解析

本文提供了Abaqus中导出单元刚度矩阵和全局刚度矩阵的完整实战指南。通过详细步骤讲解INP文件修改、关键指令插入及结果文件解析,帮助工程师、研究人员和二次开发者深入理解有限元软件内核,实现理论验证、二次开发与深度问题调试。

k8s6orchestrator的博客 898

前端最新Vue2+Vue3基础入门到实战,前端vue Day01 <个人笔记>

概念:Vue (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架Vue.js基于数据渲染出用户可以看到的界面所谓渐进式就是循序渐进,不一定非得把Vue中的所有API都学完才能开发Vue,可以学一点开发一点所谓框架:就是一套完整的解决方案举个栗子如果把一个完整的项目比喻为一个装修好的房子,那么框架就是一个毛坯房。我们只需要在“毛坯房”的基础上,增加功能代码即可。提到框架,不得不提一下库。库,类似工具箱,是一堆方法的集合,比如 axios、lodash、echarts等。

2301_81920327的博客 1492

避坑指南:群晖DSM 7.X挂载NTFS硬盘,为什么你的SATA口不行?从原理到实战一次讲清

本文深入解析群晖DSM 7.X系统挂载NTFS硬盘的底层原理与实战排查方法,揭示SATA接口权限配置的关键参数(如esataportcfg和internalportcfg),并提供安全修改端口配置的详细步骤。针对不同型号群晖NAS的配置差异,给出替代方案与常见故障排查技巧,帮助用户解决NTFS硬盘挂载问题。

weixin_26757925的博客 256

MySQL安装配置教程(超级详细)

一、 下载MySQL Mysql官网下载地址:MySQL :: Download MySQL Installer (Archived Versions) 1. 选择要安装的版本,本篇文章选择的是5.7.31版本,点击Download下载 正在上传…重新上传取消 二、 安装MySQL 1. 选择设置类型双击运行mysql-installer-community-5.7.31.0.msi 这里选择是自定义安装,所以直接选择“Custom”,点击“Next” “Developer Default”是

m0_67322837的博客 5万+

Vue(一):Vue 入门与 Vue 指令

构建用户界面:基于数据去渲染用户看到的界面 2. 渐进式:不需要学习**全部**的语法就能完成一些功能,学习是循序渐进的 3. 框架:一套**完整**的项目解决方案,可以大大的提升开发效率

kkq的博客 1314

深入理解光流法外推雷达回波

背景介绍 鉴于本人实在太过疲惫和劳累,一些简单的便于理解的废话就不在记录,耗费两天时间研究了一下光流法,本帖用于记录学习过程中源码的难点细节。 使用光流预测的核心有两个利用多张连续回波图像(变分)或者相邻两张回波图(交叉相关,LK等)计算出光流场(速度矢量场),之后利用半拉格朗日方法进行外推。 半拉格朗日方法 三时间步半拉格朗日方法,其核心公式如下 但这个有点难理解,但看一维的图就很好理解 它的核心就是迭代求Am(位移矢量),如果理解困难的话,其实质上就是通过未来迭代(猜)出当前时刻的Am找到过去的假设

weixin_44695861的博客 6035

01-引入vuejs、v-指令、计算属性computed和观察者watch、表单、v-show、v-if

vuejs2 官方文档 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 sublime text3 安装vue插件 ...

code_li的博客 1243

在Simulink中实现一个基于SiC MOSFET的高效率电机驱动系统

本文介绍了在Simulink中构建基于SiC MOSFET的高效率电机驱动系统的详细流程。系统由直流电源模块、SiC MOSFET逆变器模块、PMSM电机模型、控制策略模块(包括矢量控制和PWM生成)以及反馈测量模块组成。文章逐步指导了从模型创建到参数设置的完整过程,包括各模块的具体实现方法。通过仿真可以评估系统在不同负载条件下的响应速度、效率、功率密度等性能指标。该建模方法为电机驱动系统的设计和优化提供了有效工具,同时建议根据实际硬件规格和工程需求进行参数调整和定制化开发。

xiaoheshang_123的博客 249

C#工业通信完整项目实战:从协议解析到数据库存储,打造工业级全链路数据闭环(完整可复用源码)

工业自动化的核心诉求是「数据闭环」:从工业设备采集真实生产数据 → 解析校验获得有效数据 → 持久化存储到数据库形成生产台账 → 数据分析/报表展示/异常预警,形成采集→解析→处理→存储→应用的全链路数据流转,这也是工业上位机开发的终极落地形态,区别于单纯的「数据采集」demo。本次实战是一套工业级完整投产级项目,基于C# WinForm + .NET Framework 4.8(工业标配)✅双通信链路完美适配:同时封装TCP网口 + 串口(RS232/485)

这里只有干货:从 Modbus 通信到 MES 对接,从 YOLO 训练到工控机部署,带你搞定工业软件开发全流程。 1038

Vue快速上手day01

vue2快速上手第一天

Accrue_的博客 771

Python爬虫教程:抓取社交媒体内容(以Facebook和Instagram为例)

为什么抓取社交媒体内容?品牌分析与监测:通过抓取品牌、产品或服务相关的社交媒体数据,可以获得公众对其的评价,识别市场趋势,制定营销策略。情感分析:分析用户在社交平台上的情感倾向,如对某事件、产品、服务的正面或负面情绪。舆情监控:通过抓取大量社交媒体内容,监测公众对热点事件的反应,发现潜在的社会问题。用户行为分析社交媒体的数据类型:帖子和内容:包括用户发布的文本、图片、视频等。用户互动用户信息:包括用户名、粉丝数、关注数等社交信息。社交媒体的反爬虫机制:API限制。

2201_76125261的博客 1340

Vue-创建实例/vue常见指令

Vue快速上手 差值表达式 {{ }} 响应式 v-html: v-show / v-if v-else v-else-if v-on v-bind v-for v-for中的key v-model

2301_76866366的博客 331

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

vue点击按钮切换显示不同内容_邂逅Vue

01什么是Vue.jsVue (读音 /vjuː/,类似于view) 是一套用于构建用户界面的渐进式框架。看到这里,你就会问了,什么是渐进式?渐进式就是你可以将Vue作为一个项目中的部分组件改用Vue实现,不需要引入其他复杂的功能,带来丰富的交互体验。也可以在一个项目中,更多的的业务逻辑都使用Vue,这样Vue整个核心库以及其生态系统可以逐步的引用。02引入Vue的方法本篇文章因为是主要...

weixin_42496673的博客 1万+

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

Vue基础指令01

本文介绍了Vue.js的基础知识,包括Vue实例创建、数据插值和常用指令。

chuilchui的博客 231

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Vue-01day

Vue基础学习

2403_87072953的博客 576

VueJS 学习笔记 day - 01

以下笔记中的部分代码以及文字说明来自黑马程序员视频 只用作个人学习使用 有错误的地方请私信指出 如有侵权请联系删除 VueJS 学习笔记 day - 01 第一个Vue程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&gt...

xuzhi7162的博客 315

day01

文章目录创建Vue实例插值表达式响应式数据常见标签v-htmlv-show v-ifv-if v-else-if v-elsev-onv-bindv-forv-model综合案例 创建Vue实例 <!-- 创建Vue实例,初始化渲染 1. 准备容器 2. 引包(官网) — 开发版本/生产版本 3. 创建Vue实例 new Vue() 4. 指定配置项,渲染数据 1. el:指定挂载点 2. data提供数据 -->

m0_53721382的博客 1032

Vue _ 教程版 02 指令

​目录 目标 一、模板语法 1.1、插值表达式 1.2、指令 1-2-1. v-text 指令 1-2-2. v-html 指令 二、常用指令 2.1、v-show 指令 2.2、v-if 指令 2.3、v-for指令 2.4、v-on指令 4.5、v-bind指令 2.6、v-model指令 2.7、v-pre 指令 2.8、v-cloak指令 2.9、v-once指令 样式绑定 1、class 样式处理 2、绑定 style 三、自定义指令 图例

Mr.小灰狼_随笔 862

Vue 快速入门

Vue 快速入门

分享我的点点滴滴,在成长路上与你同行! 1804

vue2+vue3基础

vue初识第一天

weixin_55269913的博客 277

Vue笔记

/ (1) 当fullName计算属性,被获取求值时,执行get(有缓存,优先读缓存)注:1.当有两个或多个单选框,只能选一个的时候,给单选框都加上统一的name属性。// 具体讲解:(1) watch语法 (2) 具体业务实现。// 具体讲解:(1) watch语法 (2) 具体业务实现。1.作用:基于数据循环,多次渲染整个元素 --->数组、对象、数字...// (2) 当fullName计算属性,被修改赋值时,执行set。2.语法:v-else v-else-if=“ 表达式 ”

2401_87902107的博客 687

vue常用指令

vue常用指令总结 一.vue指令 官网解释 指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。 1.v-once 能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定: 2.v-show 和v-if一样 区别是if是注释掉 v-show是给一个display:none的属性 让它不显示

龚珂心的博客 324

vue-day01

本文系统梳理了Vue的核心知识点,包括:1. Vue实例创建与响应式原理;2. 模板语法(插值表达式、v-text/v-html);3. 指令系统(v-show/v-if、v-for、v-bind、v-on);4. 表单双向绑定v-model;5. 实战案例(图片切换、图书管理、记事本)。重点讲解了Vue的响应式机制、指令使用场景差异、列表渲染key的重要性,以及如何通过v-model实现表单交互。文章还提供了学习路径建议和常见误区提示,帮助开发者构建完整的Vue知识体系。

mrjieke6的博客 630

Vue基础知识(day 01)

创建Vue实例核心分四步:1.准备容器,2.引包,3.创建Vue实例 new Vue() 4.指定配置项→渲染数据:(1)el指定挂载点,(2)data提供数据插值表达式:Vue的一种模板语法作用:利用 表达式 进行插值渲染语法:{{ 表达式 }}注意点:1.使用的数据要存在,2.支持的是表达式,但不支持语句:例如if 3.不能再标签属性中使用Vue的和新特性:响应式特性:1.数据变化了试图自动更新data中的数据会被添加到实例上1.访问数据 实例.属性名。

weixin_72274118的博客 700
上一篇: 二四(Node3)、Webpack打包、开发服务器dev、开发模式 生产模式、解析别名路径
下一篇: 二六(vue2-02)、指令修饰符、v-bind增强、v-model补充、computed、watch、水果购物车
bpmf_fff
博客等级 码龄6年 219粉丝 49原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值