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

文章目录

  • [Vue 快速上手](#Vue 快速上手)
    • [1、Vue.js 官网 & Vue.js 的获取](#1、Vue.js 官网 & Vue.js 的获取)
    • [2、创建 Vue 实例,初始化渲染](#2、创建 Vue 实例,初始化渲染)
    • 3、插值表达式
  • [安装 Vue 开发者工具:装插件调试 Vue 应用](#安装 Vue 开发者工具:装插件调试 Vue 应用)
  • [Vue 指令](#Vue 指令)
    • [1、v-show 指令](#1、v-show 指令)
    • 2、v-if
    • [3、v-else & v-else-if](#3、v-else & v-else-if)
    • 4、v-on
      • [v-on 调用传参](#v-on 调用传参)
    • 5、v-bind
      • [v-bind 对于样式控制的增强 - 操作class](#v-bind 对于样式控制的增强 - 操作class)
    • 6、v-for
      • [v-for 中的 key](#v-for 中的 key)
    • 7、v-model

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/[email protected]/dist/vue.js"></script>

2、创建 Vue 实例,初始化渲染

创建 Vue 实例,初始化渲染的核心步骤:

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

创建一个 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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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

  1. 作用: 基于数据循环, 多次渲染整个元素

    • 遍历数组语法: 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

  1. 作用: 给 表单元素 使用, 双向数据绑定 ① 数据变化 → 视图自动更新 ② 视图变化 → 数据自动更新
  2. 语法: 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/[email protected]/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: 'dihuan',
        },
    })
</script>

</html>

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

v-model 应用于其他表单元素

它会根据 控件类型 自动选取 正确的方法 来更新元素

本次分享就到这里,感谢大家的支持与观看,若有谬误请各位谅解与指出,我们下期再见

相关推荐
张张张31216 分钟前
4.2学习总结 Java:list系列集合
java·学习
SuperW31 分钟前
linux课程学习二——缓存
学习
庸俗今天不摸鱼33 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下40 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js