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/vue@2.7.16/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/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

  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/vue@2.7.16/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: 'dihuan',
        },
    })
</script>

</html>

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

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

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

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

相关推荐
王俊山IT8 分钟前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习
小政爱学习!12 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。18 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼24 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093327 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
Mephisto.java1 小时前
【大数据学习 | kafka高级部分】kafka中的选举机制
大数据·学习·kafka
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax