Vue.js - Vue 的安装 以及 常用的 Vue 指令 【0基础向 Vue 基础学习】
文章目录
- Vue 快速上手
- 1、Vue.js 官网 & Vue.js 的获取
- 2、创建 Vue 实例，初始化渲染
- 3、插值表达式
- 安装 Vue 开发者工具：装插件调试 Vue 应用
- Vue 指令
- 1、v-show 指令
- 2、v-if
- 3、v-else & v-else-if
- 4、v-on
- v-on 调用传参
- 5、v-bind
- v-bind 对于样式控制的增强 - 操作class
- 6、v-for
- v-for 中的 key
- 7、v-model
Vue 快速上手
1、Vue.js 官网 & Vue.js 的获取
Vue3 官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js
Vue2 官网：Vue.js
本系列将以如下的 Vue.js 版本为大家进行实例的演示与讲解
<!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
2、创建 Vue 实例，初始化渲染
创建 Vue 实例，初始化渲染的核心步骤：
- 准备容器 (Vue所管理的范围)
- 引包 (开发版本包 / 生产版本包) 官网
- 创建实例
- 添加配置项 => 完成渲染
创建一个 vue 实例：
const app = new Vue({el: '#app',//el 指定挂载点，选择器指定控制的是哪个盒子data: {//data 提供数据message: '迪幻',count: 2386},})
完整的代码：
<!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引擎会将其计算出一个结果
money + 100
money - 100
money * 10
money / 10
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()
2. 语法：
{{ 表达式 }}
<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 是只有在其表达式为真时才会创建相应的标签，而为假时则不会创建此标签
<!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 一起使用
例如：
<!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 实例
<!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 调用传参
例子
<!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，有这个类，否则没有这个类
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
适用场景：一个类名，来回切换
② 数组 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>
:class="['pink', 'big']"
适用场景：批量添加或删除类
注意：如果没有 img 标签没有 v-bind 属性的话，src就会只会被认为是 url 这个字面量，而不是一个变量
实例
<!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 = ‘变量’
<!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 应用于其他表单元素
它会根据 控件类型 自动选取 正确的方法 来更新元素
本次分享就到这里，感谢大家的支持与观看，若有谬误请各位谅解与指出，我们下期再见