文章目录
- [Vue 快速上手](#Vue 快速上手)
-
- [1、Vue.js 官网 & Vue.js 的获取](#1、Vue.js 官网 & Vue.js 的获取)
- [2、创建 Vue 实例,初始化渲染](#2、创建 Vue 实例,初始化渲染)
- 3、插值表达式
- [安装 Vue 开发者工具:装插件调试 Vue 应用](#安装 Vue 开发者工具:装插件调试 Vue 应用)
- [Vue 指令](#Vue 指令)
Vue 快速上手
1、Vue.js 官网 & Vue.js 的获取
Vue3 官网:Vue.js - 渐进式 JavaScript 框架 | Vue.js
Vue2 官网:Vue.js
本系列将以如下的 Vue.js 版本为大家进行实例的演示与讲解
javascript
<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
2、创建 Vue 实例,初始化渲染
创建 Vue 实例,初始化渲染的核心步骤:
- 准备容器 (Vue所管理的范围)
- 引包 (开发版本包 / 生产版本包) 官网
- 创建实例
- 添加配置项 => 完成渲染
创建一个 vue 实例:
javascript
const app = new Vue({
el: '#app',//el 指定挂载点,选择器指定控制的是哪个盒子
data: {//data 提供数据
message: '迪幻',
count: 2386
},
})
完整的代码:
javascript
<!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 id="app">
{{message}}
{{count}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '迪幻',
count: 2386
},
})
</script>
</html>
3、插值表达式
插值表达式是一种 Vue 的模板语法
效果图
1. 作用:
利用表达式进行插值,渲染到页面中
表达式:是可以被求值的代码,JS引擎会将其计算出一个结果
javascript
money + 100
money - 100
money * 10
money / 10
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()
2. 语法:
{{ 表达式 }}
javascript
<h3>{{title}}<h3>
<p>{{nickName.toUpperCase()}}</p>
<p>{{age >= 18 ? '成年':'未成年'}}</p>
<p>{{obj.name}}</p>
<p>{{fn()}}</p>
3. 注意点:
(1)使用的数据必须存在(data)
(2)支持的是表达式,而非语句,比如:if for...
(3)不能在标签属性中使用{{ }} 插值
安装 Vue 开发者工具:装插件调试 Vue 应用
(1)通过谷歌应用商店安装 (国外网站)
(2)极简插件: 下载 → 开发者模式 → 拖拽安装 → 插件详情允许访问文件
下载地址:https://chrome.zzzmh.cn/index
打开 Vue 运行的页面,调试工具中 Vue 栏,即可查看修改数据,进行调试。
Vue 指令
1、v-show 指令
- 作用: 控制元素显示隐藏
- 语法: v-show = "表达式" 表达式值 true 显示, false 隐藏
- 原理: 切换 display:none 控制显示隐藏
- 场景: 频繁切换显示隐藏的场景
2、v-if
- 作用: 控制元素显示隐藏(条件渲染)
- 语法: v-if = "表达式" 表达式值 true 显示, false 隐藏
- 原理: 基于条件判断,是否 创建 或 移除 元素节点
- 场景: 要么显示,要么隐藏,不频繁切换的场景
注意:v-show 和 v-if 最大的区别:
- v-show 只是控制元素的显示与隐藏,但是元素是一直存在的
- v-if 是只有在其表达式为真时才会创建相应的标签,而为假时则不会创建此标签
javascript
<!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 id="app">
<div v-show="flag">这是v-show控制的盒子</div>
<div v-if="flag">这是v-if控制的盒子</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
</html>
3、v-else & v-else-if
- 作用: 辅助 v-if 进行判断渲染
- 语法: v-else v-else-if = "表达式"
- 注意: 需要紧挨着 v-if 一起使用
例如:
javascript
<!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 id="app">
<p v-if="gender===1">男生</p>
<p v-else>女生</p>
<p v-if="score>90">grade-A</p>
<p v-else-if="score>80">grade-B</p>
<p v-else-if="score>70">grade-C</p>
<p v-else="score>60">grade-D</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 1,
score: 79
}
})
</script>
</html>
4、v-on
- 作用: 注册事件
- 语法: ① v-on:事件名 = "内联语句" ② v-on:事件名 = "methods中的函数名"
- 简写:@事件名 = 添加监听 + 提供处理逻辑
- 注意:methods函数内的 this 指向 Vue 实例
javascript
<!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 id="app">
<button @click="login">{{message}}</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '迪幻登录',
},
methods: {
login() {
alert(this.message)
}
}
})
</script>
</html>
v-on 调用传参
例子
javascript
<!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 id="app">
<h1>余额:</h1>{{money}}</h1>
<button @click="buy(price1)">{{title1}}</button>
<button @click="buy(price2)">{{title2}}</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100,
price1: 5,
price2: 10,
title1: '可乐5元',
title2: '蛋糕10元'
},
methods: {
buy(price) {
this.money -= price
}
},
})
</script>
</html>
5、v-bind
- 作用:动态的设置html的标签属性 → src url title ...
- 语法:v-bind:属性名="表达式"
- 注意:简写形式 :属性名="表达式"
v-bind 对于样式控制的增强 - 操作class
语法 :class = "对象/数组"
① 对象 → 键就是类名,值是布尔值。如果值为 true,有这个类,否则没有这个类
javascript
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
适用场景:一个类名,来回切换
② 数组 → 数组中所有的类,都会添加到盒子上,本质就是一个 class 列表
javascript
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
javas
:class="['pink', 'big']"
适用场景:批量添加或删除类
注意:如果没有 img 标签没有 v-bind 属性的话,src就会只会被认为是 url 这个字面量,而不是一个变量
实例
javascript
<!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>
</head>
<body>
<div id="app">
<!-- v-bind:src => :src -->
<img src="imgUrl" v-bind:title="msg" alt="">
<img :src="imgUrl" :title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
imgUrl: './imgs/10-02.png',
msg: 'hello 迪幻'
}
})
</script>
</body>
</html>
6、v-for
-
作用: 基于数据循环, 多次渲染整个元素
-
-
遍历数组语法: v-for = "(item, index) in 数组"
-
item 每一项, index 下标
-
省略 index: v-for = "item in 数组" → 数组、对象、数字...
-
v-for 中的 key
- 语法:key属性 = "唯一标识"
- 作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。
v-for 的默认行为会尝试 原地修改元素 (就地复用)
-
key作用: 给元素添加的唯一标识,便于Vue进行列表项的正确排序复用。
-
注意点:
-
- key 的值只能是 字符串 或 数字类型
- key 的值必须具有 唯一性
- 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应)
7、v-model
- 作用: 给 表单元素 使用, 双向数据绑定 ① 数据变化 → 视图自动更新 ② 视图变化 → 数据自动更新
- 语法: v-model = '变量'
javascript
<!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 id="app">
<input type="text" v-model="username">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: 'dihuan',
},
})
</script>
</html>
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
v-model 应用于其他表单元素
它会根据 控件类型 自动选取 正确的方法 来更新元素
本次分享就到这里,感谢大家的支持与观看,若有谬误请各位谅解与指出,我们下期再见