三分钟带你了解海量vue指令

最新推荐文章于 2024-05-06 18:26:11 发布
最新推荐文章于 2024-05-06 18:26:11 发布
阅读量72 收藏
点赞数
文章标签： javascript vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53001701/article/details/110519153
版权

VUE的指令

v-cloak

<!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>
    <!-- 对于MVVM 的理解 -->
    <!-- 解放DOM  -->
    <!-- 指令:就是VUEjs为我们提供方便操作的自定义属性 -->
    <!-- View -->
    <div id="app">
       <p v-cloak>{{msg+1+1+1+1+1}} </p>  
    </div>
    <!-- View end -->
    <script src="./js/vue.min.js"></script>
    <script>
        //创建一个vue环境，创建一个VM层
        new Vue({
            el:'#app',
            data:{//Model层
                msg:'hello vue'
            }
        })
    </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>Document</title>
</head>
<body>
    <!--指令，标签的自定义属性-->
    <div id="app">
        <!--{{userName}}-->
        <p v-text='userName'></p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                userName:'admin'
            }
        })
    </script>
</body>
</html>

v-html

<!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">
       <!--myDiv-->
       <div v-html="myDiv"></div>
   </div>
   <script src="./js/vue.min.js"></script>
   <script>
       new Vue({
           el:'#app',
           data:{
            myDiv:'<h1>Hi</h1>'
           }
       })
   </script>
</body>
</html>

v-pre

<!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-pre>{{msg}}</p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'不想被编译'
            }
        })
    </script>
</body>
</html>

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>
</head>
<body>
    <div id="app">
       
        <p v-once>{{msg}}</p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'最初的梦想：科学家'
            },
            mounted(){
                this.msg = '后来我成为了火箭程序编写工程师'
            }
        })
    </script>
</body>
</html>

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" value="" v-model="userName">
        <p>{{userName}}</p>
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                userName:'admin'
            }
        })
    </script>
</body>
</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>
    <!--解放Dom-->
    <div id="app">
        <input type="text" v-model="num"><br>
        <input type="button" value="+1" v-on:click='add'>
        <input type="button" value="-1" @click='sub'><!--v-on:click简写为@click-->
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function (){
                    this.num += 1
                    //this.num=this.num+1
                },
                sub(){
                    this.num -= 1
                }
            }
        })
    </script>
</body>
</html>

<!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>
    <!--介绍事件函数的，参数———事件对象-->
    <!--解放Dom-->
    <!--js原生-->
    <div id="app">
        <input type="text" v-model="num"><br>
        <input type="button" value="+1" v-on:click='add'>
        <input type="button" value="-1" @click='sub(1,2,$event)'><!--v-on:click简写为@click-->
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function (event){
                    console.log(event.target.value);
                    this.num += 1
                    //this.num=this.num+1
                },
                sub(a,b,event){
                    console.log(a);
                    console.log(b);
                    console.log(event);
                    this.num -= 1
                }
            }
        })
    </script>
</body>
</html>

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>
    <!--v-bind:用来绑定属性简写成：-->
    <div id="app">
        <!--<img v-bind:src="srcUrl">-->
        <img :src="srcUrl">
    </div>
    <script src="./js/vue.min.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                srcUrl:'./img/1.jpg'
            },//这个逗号必须要
            mounted(){
                //这个this必须要：它指当前的vm实例
                this.srcUrl='./img/2.jpg'
            }
        })
    </script>
</body>
</html>
宁做秃头不做菜鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue自定义指令写法与个人理解
01-19
如果你正在使用Vue(或者Angular), 你可能已经很熟悉其中的一些指令, 如: v-if, v-else等等. 我们将从了解一些基础开始, 但是如果你更愿意直接看例子, 请直接往下滚动. 这些例子也能很好的让你理解这些概念. 以下是...
狂神Redis学习记录 完整版
friggly的博客
07-15 897
edis（Remote Dictionary Server )，即远程字典服务，是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。本文详细介绍了redis常用的一些基础操作，可以更好地应用于学习提高和工作中，一些和redis相关的面试高频在文中也有体现！............
Redis之《狂神说》学习笔记
R的博客
12-07 1812
Redis之《狂神说》学习笔记
Vue 指令实现按钮级别权限管理功能
10-17
主要介绍了Vue 指令实现按钮级别权限管理功能，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
Vue指令的钩子函数使用方法
08-31
主要为大家详细介绍了Vue指令的钩子函数使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue自定义弹窗指令的实现代码
10-18
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
vue自定义指令实现方法详解
10-17
主要介绍了vue自定义指令实现方法,结合实例形式分析了vue.js自定义指令相关定义、注册、使用方法及操作注意事项,需要的朋友可以参考下
Babel 原理浅析
qq_39454432的博客
04-29 813
Babel 原理浅析
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 600
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 328
注释很详细，直接上代码……
bpmn-js推荐几款常用的插件
飞云先生
04-30 149
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
遍历JavaScript对象（字典）
weixin_45596561的博客
05-01 343
遍历JavaScript对象（字典）是编程中常见的需求。for...in循环提供了最直接的方式，但在某些情况下可能需要额外的检查。与forEach结合使用提供了另一种遍历方式，特别是在您使用现代JavaScript版本时。根据您的具体需求和偏好，可以选择最适合您的遍历方法。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 1265
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
pinia
u013195452的专栏
04-30 366
pinia: 2.0.11. npm install [email protected]采用去中心化的架构，每个模块拥有自己的状态、mutations和actions，而Vuex采用集中式的架构，将所有的状态存储在一个单一的全局状态树中，通过mutations和actions来修改和处理状态。 类型支持。Pinia从设计之初就对TypeScript提供了原生的支持，提供了更好的类型推导和类型检查的支持，而Vuex需要使用额外的插件来实现TypeScript支持。Pinia在性能上进行了一些优化，采用
表格隔行变色
weixin_54339833的博客
05-02 400
2.$(document).ready() 是 jQuery 中的一个函数，它确保在文档结构（DOM）加载完成后执行指定的代码。与原生 JavaScript 的 window.onload 不同，$(document).ready() 会在 HTML 文档结构被加载和解析完成后立即执行，而无需等待样式表、图片和子框架的完成加载。if (index % 2 === 0) { // 偶数行。if (i % 2 === 0) { // 偶数行。// 可以省略，因为默认背景色通常是白色。
vue3引入element-plus完整步骤
最新发布
zzx262625的博客
05-06 259
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
echarts+百度地图如何定义边界线
abc8002117034的博客
04-30 319
5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项，比如center是当前地图的中心点，zoom是缩放数值，roam是是否可以缩放，mapStyle是地图的样式。3.方法getCenterPoint是获取当前区域中心点的经纬度，我们将会在区域的中心点显示区域名称和具体数值。4.方法convertData返回的是地图上红色散点里面的数据，是对idata的数据格式做的一层转换。2.变量styleJson是地图的样式，可以去。
macOS asdf 工具版本管理器
Winsom1的博客
04-30 913
如果您只想在当前项目中指定特定的 Node.js 版本，而不影响全局环境，可以使用 asdf local 命令来设置项目的本地 Node.js 版本。3、如果开发者本地没有使用asdf，.tool-versions不影响项目任何内容，可当作提示使用，如果使用了asdf工具，本地没有当前所需node版本会提示安装，如果有会自动将当前文件作用域下的node切换为.tool-versions 指定的版本。要在特定的 Node.js 版本下运行项目，可以使用 asdf 管理器来管理 Node.js 版本。
vue指令语法
05-25
Vue的指令是一种特殊的HTML属性，它们带有v-前缀。指令的作用是，在模板中将表达式绑定到指定的DOM元素上，从而使DOM元素显示出相应的动态效果。以下是Vue常用的指令语法： 1. v-bind: 动态绑定HTML属性 ```html <img v-bind:src="imgSrc"> ``` 2. v-if: 根据条件渲染元素 ```html <div v-if="isShow">hello world</div> ``` 3. v-for: 遍历数组或对象，渲染多个元素 ```html <ul> <li v-for="item in itemList">{{ item }}</li> </ul> ``` 4. v-on: 绑定事件监听器 ```html <button v-on:click="handleClick">Click me</button> ``` 5. v-model: 双向数据绑定，将表单元素的值与Vue实例的数据进行绑定 ```html <input v-model="message"> ``` 6. v-text: 更新DOM元素的文本内容 ```html <p v-text="message"></p> ``` 7. v-html: 更新DOM元素的HTML内容 ```html <p v-html="htmlContent"></p> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值