Vue.js - Vue 的安装以及常用的 Vue 指令【0基础向 Vue 基础学习】

迪幻

已于 2024-05-25 12:16:16 修改

阅读量1.3k

点赞数 38

分类专栏： Vue.js 快速入门前端文章标签： vue.js 学习前端

于 2024-05-25 11:56:43 首次发布

本文链接：https://blog.csdn.net/qq_38965505/article/details/139194463

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

Vue.js 快速入门

3 篇文章 0 订阅

订阅专栏

文章目录

Vue 快速上手
安装 Vue 开发者工具：装插件调试 Vue 应用
Vue 指令

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进行列表项的正确排序复用。
注意点：
1. key 的值只能是字符串或数字类型
2. key 的值必须具有唯一性
3. 推荐使用 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>