当前位置： 首页 > article >正文

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

article 2024/12/23 14:32:10

一、Vue简介 

Vue是一套用于构建用户界面的渐进式框架。

所谓渐进式就是循序渐进，不一定非得把Vue中的所有API都学完才能开发Vue，可以学一点开发一点。

Vue2官网地址：https://v2.cn.vuejs.org/

Vue3官网地址：https://cn.vuejs.org/

二、安装与创建第一个Vue实例

注意：在写代码之前要安装node.js和VS Code编辑器，这里省略。

创建Vue实例，初始化渲染的核心步骤：
1.准备容器
2.引包(官网)- 开发版本/生产版本  

开发版本：学习时使用开发版本，报错更详细；也可以直接下载vue.js文件

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

生产版本：

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

3.创建Vue实例 new Vue()
4.指定配置项 el  data => 渲染数据
   el      指定挂载点，选择器指定控制的是哪个盒子
   data  提供数据 

创建第一个Vue实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box"></div>
    <div class="box2"></div>

    <div id="app">
      <!-- 这里将来会编写一些用于渲染的代码逻辑 -->
      <h1>{{msg}}</h1>

      <a href="###">{{count}}</a>
    </div>

    <script src="/day01/vue/vue.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
    <script>
      const app = new Vue({
        // 通过el配置选择器，指定Vue管理的是哪个盒子
        el: "#app",
        // 通过data提供数据
        data: {
          msg: "Hello World",
          count: 6666,
        },
      });
    </script>
  </body>
</html>

三、插值表达式

1.插值表达式概述

        插值表达式是一种Vue的模板语法，我们可以用插值表达式渲染出Vue提供的数据。

上面代码的<h1>{{msg}}</h1>就是插值表达式

2.语法

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

3.错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

4.代码示例

<body>
  <div id="app">
    <p>{{nickname}}</p>
    <p>{{nickname.toUpperCase()}}</p>
    <p>{{nickname + '你好'}}</p>
    <p>{{age >= 18 ? '成年':'未成年'}}</p>
    <p>{{friend.name}}</p>
    <p>{{friend.desc}}</p>
    <p :title="friend.desc">我是李四</p>
  </div>
  <script src="/day01/vue/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app", //绑定id是app的元素(又称：容器)
      // 通过data提供数据
      data: {
        nickname: "Hello World",
        age: 18,
        friend: {
          name: "张三",
          desc: "热爱学习vue",
        },
      },
    });
  </script>
</body>

四、响应式

响应式简单理解就是数据变，视图对应变。

① 访问数据： "实例.属性名"

② 修改数据： "实例.属性名"= "值"

<body>
  <div id="app">{{msg}} {{count}}</div>
  <!-- <script src="/day01/vue/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        // 响应式数据
        msg: "你好",
        count: 100,
      },
    });
  </script>
</body>

五、Vue开发者工具安装——Vue.js Devtools

(一)Edge浏览器中安装

在扩展中直接搜素vue，Vue.js.devtools就是，点击获取安装

勾选上红框的内容 

使用VS Code打开浏览器时F12就会有Vue标志了

(二)Google浏览器安装

参考文章：Vue的开发者调试工具（devtools5.3.4）安装

安装之后可以F12后看到多一个Vue的调试面板

六、Vue指令

(一)v-show与v-if

        条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：  

1.v-show

  • 作用： 控制元素显示隐藏
  • 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏
  • 原理： 切换 display:none 控制显示隐藏
  • 场景：频繁切换显示隐藏的场景

2.v-if 

  • 作用： 控制元素显示隐藏（条件渲染）

  • 语法： v-if= "表达式" 表达式值 true显示， false 隐藏

  • 原理： 基于条件判断，是否创建 或 移除元素节点

  • 场景： 要么显示，要么隐藏，不频繁切换的场景 

<div id="app">
    <div v-show="flag" class="box">我是v-show控制的盒子</div>
    <div v-if="flag" class="box">我是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: {
        flag: false
      }
    })
</script>

(二)v-on与v-bind

1.v-on与v-bind语法

- <button v-on:事件名="内联语句">按钮</button>
- <button v-on:事件名="处理函数">按钮</button>
- <button v-on:事件名="处理函数(实参)">按钮</button>
- `v-on:` 简写为 **@**
- v-bind：动态设置html的标签属性 比如：src、url、title
- v-bind: 可以简写成 =>   :标签属性

注意：

  • 事件处理函数应该写到一个跟data同级的配置项（methods）中

  • methods中的函数内部的this都指向Vue实例

代码示例： 

  <body>
    <div id="app">
      <p v-if="gender == 1">性别：男</p>
      <p v-else>性别：女</p>

      <button @click="count--">-</button>
      <span>{{count}}</span>
      <button @click="count++">+</button>
      <hr />

      <button @click="fn">切换显示隐藏</button>
      <h1 v-show="isShow">hello world</h1>

      <!-- v-on调用传参 -->
      <hr />
      <div class="box">
        <h3>自动售货机</h3>
        <button @click="buy(5)">可乐5元</button>
        <button @click="buy(10)">咖啡10元</button>
        <button @click="buy(8)">牛奶8元</button>
      </div>
      <p>银行卡余额：{{money}}元</p>

      <!-- v-bind:src   =>   :src -->
      <hr />
      <img :src="imgUrl" :title="msg" />
    </div>
  </body>
  <script src="/day01/vue/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        gender: 2,
        count: 100,
        isShow: true,
        money: 100,
        imgUrl: "imgs/11-02.gif",
        msg: "hello",
      },
      methods: {
        fn() {
          console.log("执行了fn");
          //   app.isShow= !app.isShow;
          this.isShow = !this.isShow;
        },
        buy(price) {
          this.money -= price;
        },
      },
    });
  </script>

2.v-bind对样式控制的增强-操作class

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。

2.1语法
<div> :class = "对象/数组">这是一个div</div>
2.2对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用场景：一个类名，来回切换

2.3数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景：批量添加或删除类

  <body>
    <div id="app">
      <ul>
        <li
          v-for="(item, index) in list"
          :key="item.id"
          @click="activeIndex = index"
        >
          <a :class="{active:index === activeIndex}" href="#">{{item.name}}</a>
        </li>
      </ul>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <!-- <script src="./vue/vue.js"></script> -->
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        activeIndex: 0, // 记录高亮，给出默认的索引位置
        list: [
          { id: 1, name: "京东秒杀" },
          { id: 2, name: "每日特价" },
          { id: 3, name: "品类秒杀" },
        ],
      },
    });
  </script>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    display: flex;
    border-bottom: 2px solid #e01222;
    padding: 0 10px;
  }
  li {
    width: 100px;
    height: 50px;
    line-height: 50px;
    list-style: none;
    text-align: center;
  }
  li a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #333333;
  }
  li a.active {
    background-color: #e01222;
    color: #fff;
  }
</style>

 

思路：

1.基于数据，动态渲染tab（v-for）

2.准备一个下标 记录高亮的是哪一个 tab

3.基于下标动态切换class的类名

3.v-bind对有样式控制的增强-操作style

语法：

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

 

(三)v-for

v-for 用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令需要使用(item, index) in arr形式的特殊语法，也可以遍历对象和数字，其中：

  • item 是数组中的每一项

  • index 是每一项的索引，不需要可以省略

  • arr 是被遍历的数组

<body>
    <div id="app">
      <ul>
        <li v-for="(item, index) in list" :key="index">{{item}}</li>
      </ul>
      <hr />
      <ul>
        <li v-for="(book, index) in booksList" :key="book.id">
          <span>{{book.name}}</span>
          <span>{{book.author}}</span>
          <!-- 注册点击事件-> 通过id进行删除数组中的对应项 尽量不使用index删除，因为id更稳定 -->
          <button @click="deleteBook(book.id)">删除</button>
        </li>
      </ul>      
    </div>
  </body>

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

  <script>
    const app = new Vue({
      el: "#app",
      data: {
        list: ["张三", "李四", "王五", "jack"],
        booksList: [
          { id: 1, name: "《红楼梦》", author: "曹雪芹" },
          { id: 2, name: "《西游记》", author: "吴承恩" },
          { id: 3, name: "《水浒传》", author: "施耐庵" },
          { id: 4, name: "《三国演义》", author: "罗贯中" },
        ],
      },
      methods: {
        deleteBook(id) {
          console.log(id);
          this.booksList = this.booksList.filter((item) => item.id !== id);
        },        
      },
    });
  </script>

v-for中的key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

注意：

  1. key 的值只能是字符串 或 数字类型

  2. key 的值必须具有唯一性

  3. 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

(四)v-model

  <body>
    <div id="app">      
      账户：<input type="text" v-model="username" /><br />
      密码：<input type="password" v-model="password" /><br />
      <button @click="login">登录</button>
      <button @click="reset">重置</button>
    </div>
  </body>

  <!-- <script src="vue/vue.js"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/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 = "";
          console.log(this.username, this.password);
        },
      },
    });
  </script>

v-model在其他表单元素的使用  

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框  input:text   ——> value
文本域  textarea     ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

<body>
    <div id="app">
      <h3>xx学习网</h3>
      姓名：
      <input type="text" v-model="username" />
      <br /><br />
      是否单身：
      <input type="checkbox" v-model="isSingle" />
      <br /><br />
      <!-- 
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      -->
      性别:
      <input v-model="gender" type="radio" name="gender" :value="1" />男
      <input v-model="gender" type="radio" name="gender" :value="2" />女
      <br /><br />
      <!-- 
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      -->
      所在城市:
      <select v-model="cityId" >
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">成都</option>
        <option value="4">南京</option>
      </select>    {{cityId}}
      <br /><br />
      自我描述：
      <textarea v-model="desc"></textarea>
      <button>立即注册</button>
    </div>
    <script src="./vue/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          username: "789",
          isSingle: true,
          gender: 1,
          cityId: '3',
          desc: "",
        },
        methods: {
          fun() {
            console.log(this.cityId);
          },
        },
      });
    </script>
  </body>

 

(五)综合案例——记事本

<body>
    <!-- 主体区域 -->
    <section id="app">
      <!-- 输入框 -->
      <header class="header">
        <h1>记事本</h1>
        <input placeholder="请输入任务" class="new-todo" v-model="todoName" />
        <button class="add" @click="addTodo">添加任务</button>
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(item, index) in list" :key="index">
            <div class="view">
              <span class="index">{{index+1}}</span>
              <label>{{item.name}}</label>
              <button class="destroy" @click="del(item.id)"></button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer" v-show="this.list.length > 0">
        <!-- 统计 -->
        <span class="todo-count">合 计:<strong> {{list.length}} </strong></span>
        <!-- 清空 -->
        <button class="clear-completed" @click="resetToDo">清空任务</button>
      </footer>
    </section>
  </body>
  <!-- 底部 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        todoName: "",
        list: [
          { id: 1, name: "跑步十公里" },
          { id: 2, name: "跑步五公里" },
          { id: 3, name: "跑步三公里" },
        ],
        isShow: true,
      },
      methods: {
        del(id) {
          this.list = this.list.filter((item) => item.id !== id);
        },
        addTodo() {
          if (this.todoName.trim() !== "") {
            this.list.push({
              id: +new Date(),
              name: this.todoName,
            });

            // 添加完成后要清空输入框
            this.todoName = "";
          } else {
            return;
          }
          console.log(this.list);
        },
        resetToDo() {
          this.list = [];
        },
      },
    });
  </script>

七、指令修饰符

所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

1.按键修饰符

@keyup.enter —>当点击enter键的时候才触发

<input type="text" v-model.trim="username" @keyup.enter="writeSomething"/>
<input type="text" v-model.trim.number="age" @keyup.enter="writeSomething"/>
<header class="header">
  <h1>记事本</h1>
  <input
    @keyup.enter="addTodo"
    placeholder="请输入任务"
    class="new-todo"
    v-model="todoName"
  />
  <button class="add" @click="addTodo">添加任务</button>
</header>

此时，点击添加按钮和回车，都能触发addTodo函数

小tips：通过函数的形参，可以拿到事件绑定的对象

  <body>
    <div id="app">
      <button @click="handleClick">点击我</button>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {},
      methods: {
        handleClick(event) {
          console.log(event); // 这里可以访问到事件对象
          console.log(event.target);
          console.log(event.type);
          console.log(event.pageX);
          // 可以访问 event.target, event.type, event.pageX 等属性
        },
      },
    });
  </script>

2.v-model修饰符

  • v-model.trim —>去除两端空格

  • v-model.number —>转数字

姓名:<input type="text" v-model.trim="username" @keyup.enter="writeSomething"/>
年龄<input type="text" v-model.trim.number="age" @keyup.enter="writeSomething"/>

3.事件修饰符

  • @事件名.stop —> 阻止冒泡

  • @事件名.prevent —>阻止默认行为

  • @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为 


http://www.kler.cn/a/448011.html

相关文章：

  • 人工智能ACA（四）--机器学习基础
  • 【Leetcode 热题 100】124. 二叉树中的最大路径和
  • MySQL -- 库的相关操作
  • ROS1入门教程3：自定义消息
  • Docker_常用命令详解
  • 京准电钟：电厂自控NTP时间同步服务器技术方案
  • 《Django 5 By Example》阅读笔记：p614-p644
  • 机器学习基础算法 (一)-线性回归
  • 【项目介绍】基于机器学习的低空小、微无人机识别技术
  • spring mvc | servlet ：serviceImpl无法自动装配 UserMapper
  • 创建项目以及本地仓库和远程仓库并上传项目
  • 《探索QT 5.14.1：功能、特性与应用全解析》
  • Mysql-SQL执行流程解析
  • react中实现导出excel文件
  • 【CSS in Depth 2 精译_088】第五部分：添加动效概述 + 第 15 章：CSS 过渡特效概述 + 15.1：状态间的由此及彼
  • 默契之舞 之 生产者消费者模式（RabbitMQ）
  • [react 3种方法] 获取ant组件ref用ts如何定义?
  • CSS系列（25）-- 滚动优化详解
  • [DASCTF 2024最后一战｜寒夜破晓，冬至终章] 数论的气氛
  • rk3568之mpp开发笔记怎么实现mpp编码摄像头实时码流？
  • 换工作，如何退出微软账户？？？（删除注册表数据）
  • powerhsell 初认识
  • 252-8路SATAII 6U VPX高速存储模块
  • 一个类就创建Json反序列化所需的属性
  • golang，gowork工具
  • UI自动化概念+Web自动化测试框架