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

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

news 2025/3/10 5:30:35

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

作用：控制元素显示隐藏

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

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

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

3.2.2 v-if

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

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

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

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

3.2.3 v-else 和 v-else-if

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

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

需要紧接着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 属性绑定指令

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

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

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>

注意：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 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 计算属性

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

语法：

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

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

注意：

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

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

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

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

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 进行求和 → reducelet 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 计算属性的优势

缓存特性（提升性能）

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

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

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 完整写法

添加额外配置：

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

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.dataconsole.log(res.data.data)}, 300)}}}})</script></body>

查看全文

http://www.mrgr.cn/news/93596.html