Vue的相关指令

最新推荐文章于 2022-04-24 11:20:17 发布
最新推荐文章于 2022-04-24 11:20:17 发布
阅读量93 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56686568/article/details/116138461
版权

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="box">
        <h1>v-model指令主要是用于表单上数据的双向绑定</h1>
        <h2>
            v-model可以完成双向绑定模型和视图 模型变了--->视图就会自动发生改变 
            视图变了--->模型也会自动发生改变
            </h1>
            <input type="text" v-model="text">
            <h1>{{text}}</h1>
            <h1>{{text}}</h1>
            <h1>{{text}}</h1>
            <h1>{{text}}</h1>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {
            text: "你好么么哒",
        }
    })
</script>

双向绑定原理：

1.数据劫持:当我们访问或设置对象的属性的时候，都会触发**Object.defineProperty()**函数来拦截（劫持），然后在返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应。

发布者-订阅者模式:其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

v-show

<!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="box">
        <h1>v-show指令</h1>
        <!-- v-show指令
      作用：控制切换一个元素的显示和隐藏
      语法：v-show = 表达式
      根据表达式结果的真假，确定是否显示当前元素
      true表示显示该元素，false(默认)表示隐藏该元素
      元素一直存在只是被动态设置了display:none -->


        <h1 v-show="bool">我是测试显示和隐藏的</h1>
        <hr>
        <h1>小练习，我有一个复选框，勾选的时候下面的内容显示，取消勾选下面的内容隐藏</h1>
        <input type="checkbox" v-model="ck">{{ck?'勾选了':"取消了"}}
        <h1 v-show="ck">小练习占位的</h1>

    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {
            bool: true,
            ck: true //(0和-0都为false)
        }
    })
</script>

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="box">
        <h1>v-on指令</h1>
        <!-- 作用：为HTML元素绑定事件监听
        语法：v-on：事件名称="函数名称()"
        简写语法：@事件名称="函数名称()"
        注：函数定义在 methods 配置项中 -->

        <button v-on:click="fun1()">点我弹出弹出框哦</button>
        <button @click="fun2()">我是简写的</button>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {

        },
        //函数要写在与 el data同级的位置使用methods来设置
        methods: {
            fun1() {
                alert("我是第一个按钮")
            },
            fun2() {
                alert("我是第2个按钮")
            }
        }
    })
</script>

v-for

<!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="box">
        <h1>v-for指令</h1>
        <!-- 作用：遍历 data 中的数据，并在页面进行数据展示 
        语法：v-for = "(item, index) in arr" item 表示每次遍历得到的元素 
        index 表示item的索引(下标)，可选参数 -->
        <ul>
            <li v-for="(v,i) in arr">
                {{v}}------{{i}}
            </li>
        </ul>
        <hr>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr v-for="(v,i) in obj">
                <td>{{v.name}}</td>
                <td>{{v.age}}</td>
            </tr>
        </table>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {
            arr: ["EZ", "MF", "NOC", "VN"],
            obj: [{
                name: "xixi1",
                age: 30
            }, {
                name: "xiaoming",
                age: 20
            }, {
                name: "bingbing",
                age: 10
            }, {
                name: "xiaowang",
                age: 15
            }, {
                name: "xiaohong",
                age: 25
            }, {
                name: "xiaohua",
                age: 30
            }, ]
        }
    })
</script>

v-bind

<!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="box">
        <h1>v-bind指令</h1>
        <!-- 作用: 绑定 HTML 元素的属性 
            给html标签的属性插入变量
        语法: v-bind:属性名 = "表达式" 
        简写: 属性名="表达式" 
        绑定一个属性：
        <img v-bind:src="myUrl" /> 
        绑定多个属性(不能使用简写)：
        <img v-bind="{src:myUrl, title: msg}" /> -->

        <a v-bind:href="ahref">{{atext}}</a>
        <a :href="ahref">66666{{atext}}</a>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {
            ahref: "http://www.baidu.com",
            atext: "点我去百度"
        }
    })
</script>

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="box">
        <h1>v-if指令</h1>
        <!-- 作用：判断是否加载固定的内容
        语法：v-if = "表达式"
        根据表达式结果的真假，确定是否显示当前元素
        true表示加载该元素，false表示不加载该元素
        元素的显示和隐藏是对Dom元素进行添加和删除 -->
        <input type="checkbox" v-model="bool">

        <!-- v-show与v-if区别：
        v-if有更高的切换消耗（安全性高）
        v-show有更高的初始化的渲染消耗（对安全性无要求选择） -->
        <p v-show="bool">我是用v-show的例子</p>
        <p v-if="bool">我是用v-if的例子</p>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {
            bool: true
        }
    })
</script>

v-else

<!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="box">
        <h1>v-else指令</h1>
        <!-- 坑1：v-else必须配合v-if使用
      坑2：v-if与v-else之间不能有多余的内容 -->
        <p v-if="bool">请登录</p>
        <!-- <h1>你好么么哒</h1> -->
        <p v-else>欢迎您</p>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {
            bool: false
        }
    })
</script>

v-else-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="box">
        <h1>v-else-if指令</h1>
        <!-- 作用：当有一项成立是执行 -->
        <select v-model="text">
            <!-- 下拉框的option里面的value作用就是：把选中的value发给后台
            <input type="text"name="给后台发送数据的名字" value="给后台发送的值"> -->
            <option value="吃饭饭">吃饭饭</option>
            <option value="喝水水">喝水水</option>
            <option value="睡觉觉">睡觉觉</option>
            <option value="打豆豆">打豆豆</option>
        </select>

        <h1 v-if="text=='吃饭饭'">您选择了吃饭饭</h1>
        <h1 v-else-if="text=='喝水水'">您选择了喝水水</h1>
        <h1 v-else-if="text=='睡觉觉'">您选择了睡觉觉</h1>
        <h1 v-else-if="text=='打豆豆'">您选择了打豆豆</h1>
        <h1 v-else>您啥都没选择</h1 tml>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {
            text: ""
        }
    })
</script>

v-text

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 解决屏幕闪动 */
        
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="box" v-cloak>
        <h1>v-text指令向网页中插入文本内容</h1>
        <!-- 作用：操作网页元素中的纯文本内容，{{}}是它的另一种写法 -->

        <!--2、 v-text与{{}}区别：
        v-text与{{}}的等价，{{}}叫做模板插值，v-text叫指令，有一点区别就是在渲染的数据比较多的时候，可能会把大括号显示出来，俗称屏幕闪动 -->
        <!--2、 解决屏幕闪动的方式：
        （1）使用v-text渲染数据（不建议使用这个方法）
        （2）使用{{}}语法渲染数据，但是同时使用v-cloak指令（用来保持在元素上直到关联实例结束时候进行编译），v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以了 -->

        <h1 v-text="text"></h1>
        <h1>{{text}}</h1>

    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {
            text: "么么哒"
        }
    })
</script>

v-heml与v-once

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 解决屏幕闪动 */
        
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="box" v-cloak>
        <!-- <h1>v-html指令</h1>
        作用：双大括号会将数据解释为纯文本，而非HTML，为了输出真正的HTML则需要使用v-html指令
        语法：<p v-html="text"></p>
        在工作的时候数据都是由后台返回前台 -->

        {{html}}
        <h1 v-html="html"></h1>

        <hr>

        <h1>v-once指令 一次性插值</h1>
        <!-- 作用：当数据改变是，插值处的内容不会更新（会影响到该节点上的所有属性） 
        语法：<p v-once>{{text}}</p> -->

        <input type="text" v-model="text">
        <h1>{{text}}</h1>
        <h1 v-once>{{text}}</h1>
        <h1>{{text}}</h1>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#box",
        data: {
            html: "<h1>超级无敌大帅锅</h1>",
            text: "我是默认值哦"
        }
    })
</script>
刘先森家の泡泡糖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue自定义指令实现方法详解
10-17
在Vue中，自定义指令（Custom Directives）是一个强大的特性，它允许我们扩展Vue的内置指令，如v-on、v-bind等，来实现更复杂的DOM操作。下面我们将详细探讨Vue自定义指令的定义、注册和使用方法。 ### 一、定义...
10分钟，从0到1学会Vue内置指令与自定义指令（图文并茂版）
高大志leo的博客
01-17 3531
目录 前言 正文 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常用指令
qq_42839746的博客
04-24 4225
Vue常用指令是带有v-前缀的特殊属性，例如v-for、v-if、v-show、v-bind。作用是当表达式的值改变时 ，将其产生的连带影响 ，响应式的作用于DOM。
vue常用指令
热门推荐
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
vue 的指令
青蛙king的博客
10-27 1万+
一、vue 的指令 指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。 vue的14个指令： v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍） 1、v-text v-text 指令，会把该元素下面的所有内.
vue内置指令详解
08-27
Vue 内置指令详解 Vue 内置指令是 Vue 模板中最常用的功能之一，它们带有前缀 v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。下面将详细介绍 Vue 内置指令的使用方法和应用场景。 一、v-...
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
Vue自定义指令详解
08-29
下面，我们将详细介绍Vue自定义指令的相关知识点。 注册自定义指令 在Vue.js中，可以使用`directive`方法注册一个全局的自定义指令。该方法接受两个参数：指令ID和定义对象。例如： ``` Vue.directive('my-...
DOM 事件修饰符
可达鸭的博客
09-03 455
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> &.
vue的相关指令
zc96173的博客
12-03 202
1.v-text指令 语法: <标签名 v-text=“表达式”></标签名> 作用: 通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容) 注意事项: 如果值是html的值,会作为普通的文本使用。 标签中的属性值必须是data中的一个属性. 2.v-for指令 语法: <标签 v-for=“元素 in 数据源”></...
VUE的常用指令
懒虫翻身的博客
06-08 604
VUE的常用指令 Vue中的数据绑定三种方式： 1）插值，也就是{{name}}的形式，以文本的形式和实例data中对应的属性进行绑定 2）v-bind： 3）v-model： 【1】v-model 双向绑定数据 1）主要是用在表单元素中，它实现了双向绑定。 2）v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定 3）如向input输入数据，改变input值同时也改变视图data的值 <!DOCTYPEhtm..
vue常用的指令
最好的一天
12-04 5649
1.v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的。 2.v-html指令：绑定一些包含html代码的数据在视图上，例如&lt;strong&gt;Daisy&lt;/strong&gt;,这个字符包含了&lt;strong&gt;标签，要想&lt;strong&gt;不被当做普通的字符串渲染出来，发挥&lt;strong&gt;应有的效果，我们就得使用v-html...
vue
weixin_42863189的博客
08-02 274
Vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。...
vue的指令
weixin_30377461的博客
06-29 725
我之前学了学angular 发现angular和vue的指令有点类似 先说一下 new Vue({ el: "#box", // element（元素） 当前作用域 data(){ return { //用return返回对象 msg: "122" ...
Arcmap天地图历史影像插件全国版-免费！免费！
07-22
2024版“天地图”首次开放多时相影像专题，公众可查看32个省级天地图节点近半个世纪的历史影像；本arcmap插件集成了全国天地图历史影像接口，累计上千期。 免费使用。不收费！！不收费！！不收费！！
毕业设计javajsp网上服装商城管理系统ssh-qkrp源码含文档工具包
07-22
毕业设计javajsp网上服装商城管理系统ssh-qkrp源码含文档工具包 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 通过网上交易这个平台，我们足不出户就可以了解商品的信息和价格，不仅方便了用户也为用户节约了时间，系统的主要功能就是：商品类别管理、商品信息管理、订单管理、会员管理、系统公告管理等。分为管理员用户、会员用户这二种用户平台。 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程（在说明文档中）
mysql安装配置教程
07-22
MySQL的安装和配置过程可能因操作系统和版本而异，但以下是一些通用的步骤，适用于大多数情况： ### Windows系统安装MySQL： 1. **下载MySQL Installer**： - 访问[MySQL官方网站](https://dev.mysql.com/downloads/installer/)下载MySQL Installer。 2. **启动MySQL Installer**： - 运行下载的安装程序。 3. **选择安装类型**： - 选择“Developer Default”安装类型，它包括MySQL Server和常用的开发工具。 4. **配置MySQL Server**： - 在“Server Instance Configuration”中，输入root用户的密码，并配置MySQL的安装路径。 5. **详细配置**： - 根据需要配置MySQL Server的详细设置，如字符集、默认存储引擎等。 6. **安装**： - 检查配置，然后点击“Execute”开始安装。 7. **安装完成**： -
文化娱乐-微博情感分析-含实验报告-约150行（分词、朴素贝叶斯模型）.rar
最新发布
07-22
数据可视化实例的python实现，可供学习了解
vue 自定义指令
05-25
Vue 自定义指令是 Vue 中一种非常有用的扩展能力，它允许你在标准的模板语法中使用自定义行为，而不需要编写新的组件或者混入。 Vue 提供了全局的 `Vue.directive()` 方法来注册自定义指令。该方法接受两个参数，第...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值