【Vue学习笔记】常用内部指令总结

最新推荐文章于 2024-03-13 07:30:00 发布
最新推荐文章于 2024-03-13 07:30:00 发布
阅读量192 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54468192/article/details/112619622
版权

Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: "你好，小白!"
            }
        });
    </script>
</body>
</html>
<!-- 1、导入开发版本的Vue.js -->
<!-- 2、创建Vue的实例对象，设置el属性和data属性 -->
<!-- 3、使用简洁的模板语法把数据渲染到页面上 -->

v-if

v-if用来判断是否加载某个DOM元素

v-show

调整CSS中display属性，DOM已经加载，只是CSS控制没有显示出来

区别：
v-if： 判断是否加载，在需要时加载
v-show：调整css dispaly属性

v-for

可以用来遍历数组中的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in items">{{index+1}}.{{item}}</li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                items: ['Python', 'Java', 'C++', 'Go', 'C']
            }
        });
    </script>
</body>
</html>

v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text指令</title>
</head>
<body>
    <div id="app">
        <h2 v-text="message"></h2>
        <h2>{{info}}</h2>
        <h2>{{info}}!</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: "这是内容！",
                info: "hello world"
            }
        });
    </script>
</body>
</html>

v-text和v-html的区别：
v-text是渲染纯文本，文本中的HTML标签不会被解析
为了输出真正的HTML，我们应该使用v-html 指令

v-on

v-on用来给一个标签绑定事件，v-on 还有一种简单的写法，就是用@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="按钮1" @click="doSomething">
        <button v-on:click="doSomething">按钮2</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: "内容"
            },
            methods: {
                doSomething: function() {
                    alert("这是一个弹窗！");
                }
            }
        });
    </script>
</body>
</html>

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>v-model指令</title>
</head>
<body>
    <div id="app">
        <input type="text" name="" id="" v-model="message" @keyup.enter="getMessage">
        <br>
        文本框中的内容为：{{message}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                message: "消息"
            },
            methods: {
                getMessage: function() {
                    alert(this.message);
                }
            }
        });
    </script>
</body>
</html>

v-bind

处理HTML中的标签属性，比如说，我们可以使用v-bind来实现img标签src属性的动态赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind指令</title>
    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="app">
        <img :src="imageURL" :title="imageTitle" @click="toggle" :class="{active: isActive}">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                imageURL: "https://cn.vuejs.org/images/logo.png",
                imageTitle: "logo",
                isActive: false
            },
            methods: {
                toggle: function() {
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
</body>
</html>

v-pre

跳过vue的编译，直接输出原始值

v-cloak

在vue渲染完指定的整个DOM后才进行显示，可以结合CSS来解决页面的闪烁问题

[v-cloak] {
  display: none;
}

<div id="app" v-cloak>
  {{ message }}
</div>

v-once

在第一次进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程

「已注销」
关注
专栏目录
Vue 内部指令整理
拾一_M的博客
07-19 719
Vue指令文本显示隐藏1. v-show2. v-if v-else循环3. v-for 在上篇文章《Vue入门 文本输出》中介绍的 v-text 和 v-html 是Vue指令中的其中两个，接下来继续学习Vue的其他指令。 文本显示隐藏 1. v-show <div id="app"> <div v-show="isShow">The example of "v-show"</div> <div v-if="isIf">The
vue 学习笔记
weixin_43971312的博客
05-22 2257
VUE 学习笔记 1 简介 1.1 简介 中文网 https://cn.vuejs.org/v2/guide/ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的
VUE常用的的内部指令
daxiangaifashi的博客
11-04 258
VUE常用的内部指令 1.v-if v-else 元素是否存在 <div v-if="show">展示</div> <div v-else>不展示</div> 2.v-show 元素是否展示 <div v-show="show">divdivdiv</div> 3.v-for 循环 <p v-for="(value,index) in arr">{{value}}----{{index
Vue（二）——常用内置指令
zg0601的博客
03-23 3220
Vue指令是带有v-前缀的特殊属性，它们作用于HTML元素，表示它们是Vue提供的特殊属性。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。 本文将介绍常用的Vue.js内置指令：v-if指令、v-show指令、v-else指令、v-for指令、v-bind指令、v-on指令、v-model指令、v-once指令。
vue基础学习笔记 --- vue常用内置指令总结
MImi_0612的博客
07-13 292
vue常用的内置指令
Vue常用指令
Assassinhao的博客
01-04 558
*指令：**带有v-前缀的特殊属性。**指令的作用：**当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
vue学习笔记（超详细）
jiey0407的博客
03-09 5629
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
Vue3 学习笔记
weixin_52253964的博客
10-29 925
Vue3 学习笔记
Vue.js学习笔记之常用模板语法详解
10-19
v-once指令可以放置在任何元素上，包括组件内部。 除了文本，Vue还支持HTML的动态渲染。使用v-html指令可以将字符串作为HTML插入到页面中。这对于一些需要动态加载HTML内容的场景非常有用，但也需要注意，使用v-...
Vue——内置指令
weixin_47412580的博客
08-27 1121
vue的内置指令的讲解
vue内置指令
weixin_63489869的博客
07-18 2008
通过内置指令就可以用简洁的代码实现复杂的功能。常用内置指令： 1、v-model：主要实现数据双向绑定，通常用在表单元素上input。 2、v-text：在DOM元素内部插入文本内容。 3、v-html：在DOM元素内部插入HTML标签内容。 (v-text与v-html不同的是，v-html的内容可以是HTML结构) 4、v-bind：可以实现属性单向数据绑定。 5、v-on：事件监听指令，直接与事件类型配合使用。 6、v-for：可以实现页面列表渲染，常用于循环数组。 7、v-if ..
vue的常用指令及详解
最新发布
Mxy18851251178的博客
03-13 536
Vue.js 是一个用于构建用户界面的渐进式框架，它提供了许多内置指令来帮助我们更高效地操作 DOM 和处理数据。
vue常用指令大全（含比较）
09-16 281
v-on <div id="app"> <div v-on:click.prevent='notmao()'><a href="/" v-on.prevent='notmo()'>禁止默认行为</a></div> v-on:click:点击事件。简写@click= v-on:keyup:键盘 v-on:keyup.enter:按下enter键，简写@keyup.enter= .后面的是事件的修饰符 .stop 阻止冒泡 .preve
10分钟，从0到1学会Vue内置指令与自定义指令（图文并茂版）
高大志leo的博客
01-17 4118
目录 前言 正文 Vue指令的含义 Vue指令的特点 Vue内置指令 v-text v-html v-show v-if v-else v-else-if v-for v-on v-bind v-model v-slot v-pre v-cloak v-once v-memo v-is Vue自定义指令 全局自定义指令 注册局部指令 钩子函数 钩子函数参数 前言 Vue指令无论是在面试中还是在工作中，都是高频知识点。因此，学会Vue指令非常有必要，本文
vue常用指令
热门推荐
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
vue指令
fake_8的博客
12-09 2691
vue指令
Vue中的常用的内置指令
H524268015wsw的博客
08-02 1662
v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在 v-for 的时候，建议设置 key 值，并且保证每个 key 值是独一无二的。
Vue框架学习与常用指令总结
总结来说，这堂课的核心知识点包括Vue框架的简介、基本使用方式（包括数据绑定和实例化）、以及常见指令的作用和用法。通过掌握这些，开发者可以快速上手并有效地在实际项目中应用Vue.js来构建高效、可维护的用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值