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

【VUE】第一期——初使用、基本语法

news 来源：原创 2025/6/19 3:17:10

目录

0 前言

1 准备工作

1.1 创建vue实例

1.2 vue开发者工具

2 插值表达式

2.1 基本用法

3 常用指令

3.1 内容渲染指令

3.1.1 v-text

3.1.2 v-html

3.2 条件渲染指令

3.2.1 v-show

3.2.2 v-if

3.2.3 v-else 和 v-else-if

3.3 事件绑定指令

3.3.1 内联语句

3.3.2 事件处理函数

3.3.3 给事件处理函数传参

3.4 属性绑定指令

3.5 列表渲染指令

3.5.1 key

3.6 双向绑定指令（v-model）

4 指令修饰符

4.1 按键修饰符

4.2 v-model修饰符

4.3 事件修饰符

5 属性绑定指令操控样式

5.1 :class

5.1.1 对象

5.1.2 数组

5.2 :style

6 computed 计算属性

6.1 完整写法

6.2 computed计算属性 VS methods方法

6.2.1 computed计算属性

6.2.2 methonds方法

6.2.3 计算属性的优势

6.2.4 总结

7 watch监视器

7.1 简单写法

7.2 完整写法

0 前言

黑马程序员视频地址：前端最新Vue2+Vue3基础入门到实战项目全套教程

本章从vue2学起，vue3内容将在后期专门用一章来讲述

本篇只记录大纲及要点，具体请看黑马程序员视频及其提供的md笔记

vue2官网：Vue.js

vue3官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

1 准备工作

1.1 创建vue实例

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

<body>

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


<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>


<script>
  // 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数
  const app = new Vue({
    // 通过 el 配置选择器，指定 Vue 管理的是哪个盒子
    el: '#app',
    // 通过 data 提供数据
    data: {
      msg: 'Hello World！',
      count: 666
    }
  })

</script>

  
</body>

1.2 vue开发者工具

安装网站：极简插件官网_Chrome插件下载_Chrome浏览器应用商店

注意查看插件是否支持vue2

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

2 插值表达式

2.1 基本用法

{{表达式}}

表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

示例：

<h3>{{title}}<h3>

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

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

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

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

2.2 注意事项

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

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

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

3 常用指令

vue 中的指令按照不同的用途可以分为如下 6 大类：

  • 内容渲染指令（v-html、v-text）

  • 条件渲染指令（v-show、v-if、v-else、v-else-if）

  • 事件绑定指令（v-on）

  • 属性绑定指令 （v-bind）

  • 列表渲染指令（v-for）

  • 双向绑定指令（v-model）

3.1 内容渲染指令

3.1.1 v-text

  • 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中

  • 类似 innerText，使用该语法，会覆盖 p 标签原有内容

3.1.2 v-html

  • 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中

  • 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容

  • 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

3.2 条件渲染指令

3.2.1 v-show

  1. 作用： 控制元素显示隐藏

  2. 语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏

  3. 原理： 切换 display:none 控制显示隐藏

  4. 场景：频繁切换显示隐藏的场景

3.2.2 v-if

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

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

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

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

3.2.3 v-else 和 v-else-if

  1. 作用：辅助v-if进行判断渲染

  2. 语法：v-else v-else-if="表达式"

  3. 需要紧接着v-if使用

3.3 事件绑定指令

  • <button v-on:事件名="内联语句">按钮</button>

  • <button v-on:事件名="处理函数">按钮</button>

  • <button v-on:事件名="处理函数(实参)">按钮</button>

  • v-on: 简写为 @

3.3.1 内联语句

<div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>

3.3.2 事件处理函数

注意：

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

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

3.3.3 给事件处理函数传参

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

<body>
  <div id="app">
    <!-- 绑定事件处理函数，不加小括号 -->
    <button @click="handleClick">点击我</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleClick(e) {
          // e 就是事件对象
          console.log('事件对象:', e);
          console.log('点击的元素:', e.target);
        }
      }
    });
  </script>
</body>

 如果传递了参数，则需额外传一个实参 $event 表示事件对象

<body>
  <div id="app">
    <!-- 传递额外参数，同时使用 $event 表示事件对象 -->
    <button @click="handleClickWithParams('额外参数', $event)">点击我</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      methods: {
        handleClickWithParams(param, e) {
          // param 是传递的额外参数
          console.log('传递的额外参数:', param);
          // e 是事件对象
          console.log('事件对象:', e);
          console.log('点击的元素:', e.target);
        }
      }
    });
  </script>
</body>

注意：如果在内联事件处理中只传递一个参数而不使用 $event 来显式传递事件对象，那么在 methods 中定义的方法里第二个形参将无法接收到事件对象

3.4 属性绑定指令

  1. 作用：动态设置html的标签属性 比如：src、url、title

  2. 语法：v-bind:属性名=“表达式”

  3. v-bind:可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

- <img v-bind:src="url" />
- <img :src="url" />   （v-bind可以省略）

3.5 列表渲染指令

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

  • item 是数组中的每一项

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

  • arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始

//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

3.5.1 key

语法： key="唯一值"

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

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

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

注意：

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

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

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

3.6 双向绑定指令（v-model）

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容

语法：v-model="变量

如：

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

<body>

  <div id="app">
    <h3>小黑学习网</h3>

    姓名：
      <input type="text" v-model="username"> 
      <br><br>

    是否单身：
      <input type="checkbox" v-model="isSingle"> 
      <br><br>

    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <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 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select v-model="cityId">
        <option value="101">北京</option>
        <option value="102">上海</option>
        <option value="103">成都</option>
        <option value="104">南京</option>
      </select>
      <br><br>

    自我描述：
      <textarea v-model="desc"></textarea> 

    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        isSingle: false,
        gender: "2",
        cityId: '102',
        desc: ""
      }
    })
  </script>
</body>

4 指令修饰符

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

4.1 按键修饰符

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

除了enter，其他的也可以 

4.2 v-model修饰符

  • v-model.trim —>去除首位空格

  • v-model.number —>转数字

4.3 事件修饰符

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

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

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

注意：不一定严格按照上述分类使用，如果能有相应效果，也可以自由搭配使用

5 属性绑定指令操控样式

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

5.1 :class

语法： 

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

5.1.1 对象

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

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

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

示例：


  <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>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        activeIndex: 2, // 记录高亮
        list: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      }
    })
  </script>
</body>

5.1.2 数组

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

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

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

5.2 :style

语法： 

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

示例：操作进度条

<body>
  <div id="app">
    <!-- 外层盒子底色 （黑色） -->
    <div class="progress">
      <!-- 内层盒子 - 进度（蓝色） -->
      <div class="inner" :style="{ width: percent + '%' }">
        <span>{{ percent }}%</span>
      </div>
    </div>
    <button @click="percent = 25">设置25%</button>
    <button @click="percent = 50">设置50%</button>
    <button @click="percent = 75">设置75%</button>
    <button @click="percent = 100">设置100%</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        percent: 30
      }
    })
  </script>
</body>

6 computed 计算属性

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算

语法：

  1. 声明在 computed 配置项中，一个计算属性对应一个函数

  2. 使用起来和普通属性一样使用 {{ 计算属性名}}

注意：

  1. computed配置项和data配置项是同级的

  2. computed中的计算属性虽然是函数的写法，但他依然是个属性

  3. computed中的计算属性不能和data中的属性同名

  4. 使用computed中的计算属性和使用data中的属性是一样的用法

  5. computed中计算属性内部的this依然指向的是Vue实例

示例：

<body>

  <div id="app">
    <h3>小黑的礼物清单</h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <!-- 目标：统计求和，求得礼物总数 -->
    <p>礼物总数：{{ totalCount }} 个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 1 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        totalCount () {
          // 基于现有的数据，编写求值逻辑
          // 计算属性函数内部，可以直接通过 this 访问到 app 实例
          // console.log(this.list)

          // 需求：对 this.list 数组里面的 num 进行求和 → reduce
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>
</body>

6.1 完整写法

 

6.2 computed计算属性 VS methods方法

6.2.1 computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

1.写在computed配置项中

2.作为属性，直接使用

  • js中使用计算属性： this.计算属性

  • 模板中使用计算属性：{{计算属性}}

6.2.2 methonds方法

作用：给Vue实例提供一个方法，调用以处理业务逻辑

语法：

1.写在methods配置项中

2.作为方法调用

  • js中调用：this.方法名()

  • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

6.2.3 计算属性的优势

  1. 缓存特性（提升性能）

    计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

    依赖项变化了，会自动重新计算 → 并再次缓存

  2. methods没有缓存特性

6.2.4 总结

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函

7 watch监视器

监视数据变化，执行一些业务逻辑或异步操作

watch同样声明在跟data同级的配置项中

7.1 简单写法

data: { 
  words: '苹果',
  obj: {
    words: '苹果'
  }
},

watch: {
  // 该方法会在数据变化时，触发执行
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

示例：

  <body>
    <div id="app">
      <!-- 条件选择框 -->
      <div class="query">
        <span>翻译成的语言：</span>
        <select>
          <option value="italy">意大利</option>
          <option value="english">英语</option>
          <option value="german">德语</option>
        </select>
      </div>

      <!-- 翻译框 -->
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="obj.words"></textarea>
          <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
          <div class="transbox">mela</div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
      
      const app = new Vue({
        el: '#app',
        data: {
          // words: ''
          obj: {
            words: ''
          }
        },
        // 具体讲解：(1) watch语法 (2) 具体业务实现
        watch: {
          // 该方法会在数据变化时调用执行
          // newValue新值, oldValue老值（一般不用）
          // words (newValue) {
          //   console.log('变化了', newValue)
          // }

          'obj.words' (newValue) {
            console.log('变化了', newValue)
          }
        }
      })
    </script>
  </body>

7.2 完整写法

添加额外配置：

  1. deep:true 对复杂类型进行深度监听

  2. immdiate:true 初始化，立刻执行一次

data: {
  obj: {
    words: '苹果',
    lang: 'italy'
  },
},

watch: {// watch 完整写法
  对象: {
    deep: true, // 深度监视
    immdiate:true,//立即执行handler函数
    handler (newValue) {
      console.log(newValue)
    }
  }
}

示例：

  <body>
    <div id="app">
      <!-- 条件选择框 -->
      <div class="query">
        <span>翻译成的语言：</span>
        <select v-model="obj.lang">
          <option value="italy">意大利</option>
          <option value="english">英语</option>
          <option value="german">德语</option>
        </select>
      </div>

      <!-- 翻译框 -->
      <div class="box">
        <div class="input-wrap">
          <textarea v-model="obj.words"></textarea>
          <span><i>⌨️</i>文档翻译</span>
        </div>
        <div class="output-wrap">
          <div class="transbox">{{ result }}</div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 需求：输入内容，修改语言，都实时翻译

      // 接口地址：https://applet-base-api-t.itheima.net/api/translate
      // 请求方式：get
      // 请求参数：
      // （1）words：需要被翻译的文本（必传）
      // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
      // -----------------------------------------------
   
      const app = new Vue({
        el: '#app',
        data: {
          obj: {
            words: '小黑',
            lang: 'italy'
          },
          result: '', // 翻译结果
        },
        watch: {
          obj: {
            deep: true, // 深度监视
            immediate: true, // 立刻执行，一进入页面handler就立刻执行一次
            handler (newValue) {
              clearTimeout(this.timer)
              this.timer = setTimeout(async () => {
                const res = await axios({
                  url: 'https://applet-base-api-t.itheima.net/api/translate',
                  params: newValue
                })
                this.result = res.data.data
                console.log(res.data.data)
              }, 300)
            }
          }
        }
      })
    </script>
  </body>

相关文章：

  • 【已解决】docker安装、换源及使用 docker: Get https://registry-1.docker.io/v2/: net/http: request canceled
  • 以太网通讯
  • Spring（四）容器-先注册后注入
  • 君正SOC芯片 T31X智能视频应用处理器 高集成度 超低功耗 提供软硬件资料+样品测试
  • mapbox高阶，结合threejs（threebox）添加三维球体
  • 鸿蒙Next网络请求~上传文件pdf
  • 机器学习-随机森林解析
  • 尚硅谷爬虫note15
  • Linux(Centos 7.6)命令详解：vi
  • 整除分块 2025牛客寒假算法基础集训营3G
  • bfs求解迷宫问题
  • 无人机投屏技术解码过程详解！
  • docker引擎常用目录文件详解
  • 【系统架构设计师】以数据为中心的体系结构风格
  • Better-SQLite3 参数绑定详解
  • 二叉树的遍历
  • 【人工智能】Open WebUI+ollama+deepSeek-r1 本地部署大模型与知识库
  • 【Git】基本指令
  • 【全球化2.0 | ZStack发布Zaku容器云海外版 加速亚太生态布局
  • python项目中连接数据库详细版
  • 手机网站缩放/水平优化
  • 抖音seo培训/seo的优化方案
  • 免费下载建设银行官方网站/市场推广seo职位描述
  • b2c网站开发公司/制作网页多少钱
  • 什么网站做免单衣服/百度公司招聘官网
  • 抖音小程序怎么开通/dz论坛如何seo