Vue中的指令

最新推荐文章于 2022-07-08 16:58:54 发布
最新推荐文章于 2022-07-08 16:58:54 发布
阅读量135 收藏
点赞数
分类专栏： Vue 文章标签： html vue javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjl_xupt/article/details/109757902
版权

v-text/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>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <div id="app">
        {{msg}} {{hello()}}<br/>
        <span v-html="msg"></span>
        <br/>
        <span v-text="msg"></span>

        <a href="">gogogo</a>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "<h1>Hello,Vue</h1>"
                link:"www.baidu.com"
            },
            methods: {
                hello(){
                    return "hello";
                }
            }
        })
    </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>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <div id="app">

        <a v-bind:href="link">gogogo</a>
        
        <!-- class.style {class名： 加上? } -->
        <span v-bind:class="{active:isActive,'text-danger':hasError}"
              v-bind:style="{color:color1,fontSize: size}"
        >你好</span>

    </div>

    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                link: "http://www.baidu.com",
                isActive: true,
                hasError: true,
                color1: 'red',
                size: "36px"
            },
            methods: {
                
            }
        })
    </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>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <div id="app">

        <!-- 表单项 -->
        精通的语言: <br/>
        <input type="checkbox" v-model="language" value="Java" /> Java <br/>
        <input type="checkbox" v-model="language" value="PHP" /> PHP <br/>
        <input type="checkbox" v-model="language" value="Python" /> Python <br/>

        选中了 {{language.join(",")}}
        

    </div>

    <script>
        var vue = new Vue({
            el: "#app",
            data: {
               language: []
            },
            methods: {
                
            }
        })
    </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>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <div id="app">

       <button @click="num++">点赞</button>
       <button @click="cancel">取消</button>

       <h1>有 {{num}}个赞</h1>
        
       <!-- 事件修饰符 -->
       <div style="border: 1px solid red;padding: 20px" @click="hello()">
            大DIV
            <div style="border: 1px solid blue;padding: 20px" @click.stop="hello()">
                大DIV <br/>
                <a href="http://www.baidu.com" @click.stop>去百度</a>   
            </div>
       </div>

       <!-- 按键修饰符 -->
       <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10" /> <br/>

       提示：

    </div>

    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                cancel(){
                    this.num--;
                },

                hello(){
                    alert("被点击了")
                }


            }
        })
    </script>
    
</body>
</html>

遍历循环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>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <div id="app">
       
        <ul>
            <!-- 
                1、显示user信息：v-for="item in items";
                2、获取数组下标：v-for="(item,index) in items";
                3、遍历对象：
                    v-for="value in object"
                    v-for="(value,key) in object"
                    v-for="(value,key,index) in object"
                4、遍历的时候都加:key来区分不同数据，提高vue渲染效率
             -->

             <li v-for="(item,index) in users" :key="index">
                 {{index}}: {{item.name}} ==> {{item.gender}} ==> {{item.age}} <br/>

                 对象信息：
                 <span v-for="(v,k,i) in item">{{k}} ==> {{v}} ==> {{i}}</span>
             </li>



        </ul>
        <ul>
            <li v-for="(num,index) in numbers" :key="index"></li>
        </ul>

    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                
                users: [
                    {
                        name: "iPhone",
                        gender: "女",
                        age: "12"
                    },{
                        name: "法外狂徒",
                        gender: "男",
                        age: "35"
                    },{
                        name: "刀锋战士",
                        gender: "艾瑞莉娅",
                        age: "25"
                    },{
                        name: "影流之主",
                        gender: "劫",
                        age: "28"
                    },{
                        name: "影流之隐",
                        gender: "凯隐",
                        age: "23"
                    }
                ],
                numbers: [1,2,3,4]
            },
            methods: {
                hello(){
                    return "hello";
                }
            }
        })
    </script>
    
</body>
</html>

判断指令v-if和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>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <div id="app">

        <!-- 
            v-if: 条件判断，得到结果为true时，所在元素会被渲染,否则元素会被删除
            v-show: 当得到见过为true时，所在元素会被显示
        -->

        <button @click="show = !show">点我呀</button>
        <!-- 使用v-if显示 -->
        <h1 v-if="show">if=看打我。。。</h1>
        <!-- 使用v-show显示 -->
        <h1 v-if="show">show=看我到</h1>
        
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                show: true
            },
            methods: {

            }
        })
    </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>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <div id="app">
        
        <!-- 计算和侦听属性 -->
        <ul>
            <li>西游记：价格： {{xyjPrice}} 数量 <input type="number" v-model="xyjNum" /></li>
            <li>水浒传：价格： {{shzPrice}} 数量 <input type="number" v-model="shzNum" /></li>
            <li>总价：{{totalPrice}}</li>
            <li>{{msg}}</li>
        </ul>

    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 99.00,
                xyjNum: 1,
                shzNum: 1,
                msg:""
            },
            methods: {
               
            },
            //计算属性
            computed:{
                totalPrice() {
                    return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum;
                }
            },
            //Vue的侦听器
            watch:{
                xyjNum(newVal,oldVal){
                    if (newVal >= 3){
                        this.msg = "库存超出限制";
                        this.xyjNum = 1;
                    }else {
                        this.msg = "";
                    }
                }
            }
        })
    </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>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <div id="app">

        <!-- 过滤器常用来处理文本格式化的操作，过滤器可以用在两个地方，双花括号插值和v-bind表达式 -->

        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}} ==> {{user.gender == 1 ? "男" : "女"}} ==> {{user.gender | genderFilter}} ==> {{user.gender | gfilter}}
            </li>
        </ul>

    </div>

    <script>

        //全局过滤器
        Vue.filter("gfilter", function (val) {
            if (val == 1) {
                return "男~~~"
            } else {
                return "女~~~"
            }
        })

        new Vue({
            el: "#app",
            data: {
                userList: [{
                        id: 1,
                        name: "jack",
                        gender: 1
                    },
                    {
                        id: 2,
                        name: "Peter",
                        gender: 0
                    }
                ]
            },
            methods: {

            },
            //局部过滤器
            filters: {
                genderFilter(val) {
                    if (val == 1) {
                        return "男"
                    } else {
                        return "女"
                    }
                }
            }
        })
    </script>

</body>

</html>
三笠·阿卡曼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue指令
qq_41716608的博客
02-15 219
Vue指令： 1. 指令是带有 v- 前缀的特殊属性 2.指令的用途： 它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为（特殊功能），我们可以将指令看作特殊的HTML属性（attribute）。 3. Vue.js 指令的书写规范 书写位置：任意 HTML 元素的开始标签内 注意：一个开始标签内可写入多个指令，多个...
Vue基础--基本语法
sout
02-20 381
一、介绍 1、Vue.js 是什么 2、初识Vue.js 二、基本语法 1、基本数据渲染和指令 2、双向数据绑定 3、事件 4、修饰符 5、条件渲染 6、列表渲染 7、计算属性 一、介绍 1、Vue.js 是什么 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既...
Vue的简单使用
weixin_46427348的博客
07-08 932
1.导入开发版本Vue.js 2.使用简洁的模板语法把数据渲染到页面上 {{ }}的作用是和下面的数据联系起来 3.创建Vue实例对象，设置el属性和data属性 el：挂载点 el的作用范围 ： 在其外部的时候无效 在其内部的时候有效 el：“#app” id 选择器 el: “.app” 类选择器 el “div” 标签选择器复杂数据的渲染 对象类型数据的渲染 数组类型数据的渲染 v-text ：设置标签的文本值 其中第一种写法会把整个标签中的值替换为message中的值
Vue基础语法(二)
南下在线的博客
08-22 275
1. 样式绑定 1.1 class绑定 使用方式：v-bind:class="expression" expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style="expression" expression的类型：字符串、数组、对象
Vue项目url中的＜%= BASE_URL %＞
空城三梦
11-29 3199
vue-cli 创建的一个项目中执行命令vue inspect > output.js将 vue-cli 中webpack 的配置信息导出到 output.js 文件，会有一段代码： new DefinePlugin( { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"' } } ), 在 webpack 中全局声明了 BASE_...
JSP中使用EL表达式
ch717828的专栏
09-18 5388
添加EL表达式         EL可以直接用在JSP的任何位置，除了少数例外情况。首先，EL表达式不能用在任何指令中，不要尝试这么做。在编译JSP时，指令（、和）将会被执行，但EL表达式是在稍后渲染JSP时执行，所以在其中添加EL表达式是无法正常工作的。另外，JSP声明（）、脚本（）或者表达式（<%= %>）中的EL表达式也是无效的。如果用在任何一种情况中，EL表达式都将被忽略，或者更坏的
vue自定义指令实现方法详解
10-17
在Vue中，自定义指令（Custom Directives）是一个强大的特性，它允许我们扩展Vue的内置指令，如v-on、v-bind等，来实现更复杂的DOM操作。下面我们将详细探讨Vue自定义指令的定义、注册和使用方法。 ### 一、定义...
vue内置指令详解
08-27
Vue 内置指令是 Vue 模板中最常用的功能之一，它们带有前缀 v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。下面将详细介绍 Vue 内置指令的使用方法和应用场景。 一、v-bind 指令 v-bind ...
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands). 它们通常以”v-“作为前缀, 以方便Vue知道你在使用一种特殊的标记, 从而确保语法的一致性. 如果你需要对HTML元素的低级别(low-level)访问来...
Vue自定义指令详解
08-29
在Vue.js中，自定义指令是一种强大的机制，允许开发者将数据的变化映射为DOM行为。下面，我们将详细介绍Vue自定义指令的相关知识点。 注册自定义指令 在Vue.js中，可以使用`directive`方法注册一个全局的自定义...
vue标签
qq_53725689的博客
01-15 886
vue
Vue---基本使用
一夜奈何梁山
08-30 476
1：基本使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 1:导入vue的包 --> <script src="js/vue.js"></script&g
Vue
阳神
08-24 504
Vue.js 课程介绍 什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发
vue的基本语法
sjgllllll的博客
06-04 109
二、基本语法 1、基本数据渲染和指令 创建 01-基本数据渲染和指令.html 你看到的 v-bind 特性被称为指令。指令带有前缀 v除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
vue的使用
dimandsun的博客
09-23 179
目录数据绑定事件监听条件判断：v-if与v-showfor循环遍历对象遍历集合 参考官方教程：https://cn.vuejs.org/v2/guide/ 数据绑定 {{ message }} v-bind:title="message" 缩写: :title="message" v-model="message" 事件监听 v-on:click="方法名" 缩写：@click="方法名" 条件判断：v-if与v-show 基本：v-if="布尔表达式" if：<h1 v-if="aweso
VUE(未写完)
常蓬的博客
09-07 312
文章目录一.如何学习VUE二.VUE的概念三.MVVM或MV*如何使用VUE 一.如何学习VUE 培养思路，增强逻辑感，模仿他人代码 1.记住要：多做、多查、多问、多看 多做 【多做练习 ，多做项目，多做案例】 多查 【度娘】 多问 【碰见没有思路的问题，一定要，】 多看 【多看看别人代码，多人人家的思路】 2.四词真言 WWWH what ? 是什么？ why ? 为什么要学 when ? 什么时候用它 here ? 在哪用？ 二.VUE的概念 它是一个渐进式J
Vue全家桶学习-03 脚手架
qq_36662832的博客
05-04 2115
准备工作 首先是要去官网下载安装node.js，之后就可以使用npm命令了 1.如出现下载缓慢请配置 npm 淘宝镜像： npm config set registry https://registry.npm.taobao.org 2.Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置， 请执行：vue inspect > output.js 1.安装Vue 脚手架 第一步（仅第一次执行）：全局安装@vue/cli。 npm in
vue模板语法
weixin_45092983的博客
08-01 143
今天我们讲的关于vue的模板语法 案例 1.插值 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>...
在vue中 自定义指令
最新发布
08-16
在Vue中，自定义指令是一种能够扩展已有的HTML元素或者Vue组件的功能的方式。你可以使用自定义指令来直接操作DOM、添加事件监听器、应用动画效果等。 要创建一个自定义指令，你可以使用Vue实例的`directive`方法。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值