【vue】vue最基础的几种指令和对应的示范

已于 2022-12-02 15:59:02 修改
阅读量501 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2022-12-02 15:58:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cherry_boat/article/details/127927506
版权

本帖子的知识点来源🔜黑马程序员vue前端基础教程-4个小时带你快速入门vue的一部分知识点

文章目录

1.如何导入vue？

script标签里导入，就这么简单，不用安装node.js哈

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

2.[v-text]—如何通过vue给元素赋值（字符串类型或者数组类型）

花括号写法、v-text写法，都显示在代码里了


<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <div class="app">
        
        <h2 v-text="message+',不变的字符串内容（可有可无）'"></h2>
        <h2>{{school.name+',不变的字符串内容（可有可无）'}}</h2>
        
        <ul>
            <li v-text="campus[0]"></li>
            <li>{{campus[1]}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: ".app",
            data: {
                message: "a",
                school: {name: "b",mobile: "123"},
                campus: ["北京校区", "上海校区"]
            }
        })
    </script>
</body>

效果：
在这里插入图片描述
对应的关系：
在这里插入图片描述

3.[v-html]—如何设置元素为超链接


<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div class="app">
        <h2 v-html="content"></h2>
    </div>
    
    <script>
        var app = new Vue({
            el: ".app",
            data: {
                content:"<a href='http://www.baidu.com'>前往百度</a>",
            }
        })
    </script>
</body>

显示效果：
在这里插入图片描述

4.[v-on]—怎么给元素设置触发事件

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div class="app">
        <input type="button" value="单击AA" v-on:click="doIt">
        <input type="button" value="单击（简写）" @click="doIt">

        <h2 @dblclick="changeWord">{{content}}</h2>
    </div>

    <script>
        var app = new Vue({
            el: ".app",
            data: {
                content: "双击本字符可以追加文字哦",
            },
            methods: {
                doIt: function () {
                    alert("AAA");
                },
                changeWord: function () {
                    this.content += "牛逼！";
                }
            }
        })
    </script>
</body>

显示效果：
1.刷新页面后：
在这里插入图片描述
2.点击两个按钮的效果：
在这里插入图片描述
3.双击文字2次后的效果：
在这里插入图片描述

5.[v-on]—如何实现触发事件后带上参数请求方法

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <input type="text" @keyup.enter="sumbitName('hello')" />
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                sumbitName: function (word) {
                    alert("say " + word)
                }
            }
        })
    </script>
</body>

显示效果：只要在输入框中按一下回车键，就可以触发请求方法，参数为hello
在这里插入图片描述

6.[v-text \ v-on]—如何实现计个数器？

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{ num }}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 0,
            },
            methods: {
                sub: function () {
                    if (this.num == 0) {
                        alert("数字不能小于0")
                    } else {
                        this.num--;
                    }
                },
                add: function () {
                    if (this.num == 10) {
                        alert("数字不能大于0")
                    } else {
                        this.num++;
                    }
                }
            }
        })
    </script>
</body>

显示效果：点击加号数字自增，点击减号数字自减
在这里插入图片描述

7.[v-show \ v-if ]—如何改变元素的显示/隐藏状态？

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<div id="app">
       <img v-show="isShow" sizes="small" src="图片地址">
        <!-- 可以把v-show改成v-if，页面效果一致-->
       <!-- v-show改变的是display的值，v-if是直接生成或删除对应标签-->
       <input type="button" value="点击" @click="chang">
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: true,
            },
            methods: {
                chang: function () {
                this.isShow=!this.isShow;
                }
            }
        })
    </script>
</body>

显示效果：
点击按钮后就会隐藏或显示图片
在这里插入图片描述

8.[v-show \ v-if ]—如何根据条件自动改变元素的显示/隐藏状态？

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
       <img v-show="money>30" sizes="small" src="图片地址">
       <!-- 可以把v-show改成v-if，页面效果一致-->
       <!-- v-show改变的是display的值，v-if是直接生成或删除对应标签-->
       <input type="button" value="点击" @click="chang">
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                money: 10,
            },
            methods: {
                chang: function () {
                this.money+=10
                }
            }
        })
    </script>
</body>

显示效果：
点击两次按钮图片就会出来

9.[v-bind]—如何给标签设置src、title属性值？

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <img :src="imgSrc" :title="'图片为'+imgTitle">
        <!-- 可以把:src改成v-bind:src/:title改成v-bind:title -->
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "图片地址",
                imgTitle: "京东标志"
            }
        })
    </script>
</body>

显示效果：
第二张图鼠标悬停后会显示图片说明文字(即title的值)
在这里插入图片描述

10.[v-bind]—如何根据条件来设置标签的class属性值？

<head>
    <meta charset="utf-8">
    <title>文档标题</title>
    <style>
        .mypic {
            border: 5px solid blue;
        }
    </style>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <img :src="imgSrc" :class="hasClass?'mypic':''">
        <!-- 三元表达式可以改成"{mypic:hasClass}"-->
        <!-- :class改成v-bind:class -->
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "图片地址",
                hasClass: true//这里如果变成false则无法显示蓝色边框
            }
        })
    </script>
</body>

显示效果：
在这里插入图片描述
![在这里插入图片描述](https://img-blog.csdnimg.cn/ab3e8f1397f64c35bcf863fbcd780e54.png

11.[v-on / v-show]—如何制作图片切换浏览？

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <img v-show="index!=0" @click="prev" src="左按钮图片地址">
        <img :src="imgArr[index]">
        <img v-show="index != imgArr.length-1" @click="next" src="右按钮图片地址">
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgArr: [
                    "图片地址1",
                    "图片地址2",
                    "图片地址3"
                ],
                index: 1,
            },
            methods: {
                prev: function () {
                    this.index--;
                },
                next: function () {
                    this.index++;
                }
            }
        })
    </script>
</body>

显示效果：左右点按钮就可以切换图片
在这里插入图片描述

12.[v-for]—如何遍历出数组和对象的值？

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文档标题</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <ul>
            <li v-for="(it,index) in arr">
                {{index}}-->{{ it }}
            </li>
        </ul>
        <ul>
            <li v-for="item in obj">
                {{ item.job }}
            </li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["mary", "tim", "james"],
                obj: [{ job: "会计" }, { job: "律师" }, { job: "教师" }]
            }
        })
    </script>
</body>
</html>

显示效果：
在这里插入图片描述

13.[v-model]—如何获取或改变输入框的值？

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        注册名：<input type="text" v-model="signUpName" @keyup.enter="sumbitName()" />
        <input type="button" value="一键随机生成" @click="createName">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                signUpName: ""
            },
            methods: {
                sumbitName: function () {
                    alert(this.signUpName + '注册成功')
                    this.signUpName = '';
                },
                createName: function () {
                    //这部分是生成随机字符串
                    var numlist = ['a', 'b', 'c', 'd', 'e', 'f'];
                    var newName = [];

                        for (let i = 0; i < 6; i++) {
                            var Range = numlist.length - 1;
                            var Rand = Math.random();
                            var num = 0 + Math.round(Rand * Range);
                            newName.unshift(numlist[num])
                        }
                        
                        //赋值
                    this.signUpName = newName.toString().replaceAll(',', '');
                }
            }
        })
    </script>
</body>

显示效果：
1.输入十万猫毛，按下回车键，就会获取输入框内容，弹出注册成功提醒，点击确认后清空输入框
在这里插入图片描述
2.每次按下按钮，会生成随机字符串，并显示在输入框中
在这里插入图片描述

十万猫毛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue的基础语法（实现元素赋值，循环，判断，以及事件响应）
qq_45554909的博客
12-21 2890
1、v-bind 用 v-bind 来绑定元素特性! <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--引入vue.js--> <script src
Vue的基本赋值和双向数据绑定
qq_44424498的博客
10-22 769
Vue.js一个前端框架，渐进式的，侵入性高，你一旦用了它就只能按照它的方式写(从头到尾)。 Mvvm模式 mvvm通过数据双向绑定让数据自动地双向同步 m：model数据模板 v：view视图 vm：模板视图，是m和v的桥梁 mvvm的核心是数据，我们要操作的是数据，不用操作DOM(页面的元素) Vue的基本赋值 <!DOCTYPE html> <html&g...
Vue数据项
weixin_50808965的博客
04-10 959
续上一篇文献“Vue模板项和数据项“，继续表述我对Vue选项对象的理解，数据项一共就2项：data、props，但我需要的是短而细致，现在让我们来看看data和props在Vue实例中是如何运作的。 data选项，它的值类型可以为：数值、字符串、对象、BOOL值，一般情况下，Vue的值类型都为对象，因为其他的数据类型Vue不会代理，(代理)也就是说不会对视图层的变量进行数据绑定，只有值类型为对象才能绑定： 这里我直接将字符串赋值给Vue实例v的属性data，接下来看看视图层是怎么显示的 上图说明Vue实
vue基本语法01赋值、表达式、指令、修饰符、简写、过滤、监听
qq_45555170的博客
10-08 1302
vue基本语法01赋值、表达式、指令、修饰符、简写、过滤、监听一、vue赋值的三种方式二、表达式三、指令四、修饰符五、监听 一、vue赋值的三种方式 1、{{属性名}} <h2>{{data}}</h2> 2、v-html:能输出源码信息 <input v-model="name"/> 3、v-text：只能输出文本信息 <div v-text="sa" style="color: blue;"></div> 二、表达式 vue支持所有的js
vue中取值和赋值操作
清宵尚温的博客
04-16 1万+
1. vue中取值的方法 假设form中有个6个时段信息 time0,time2,time3…time5 如何遍历取出这6个时段的值? 使用obj[key]的方式取值 key可以是字符串，也可以是表达式 示例： this.form['time'+i] 2. vue中赋值操作 假设给上述的几个时段赋值，如何操作呢？ 使用this.$set(obj,key,value)进行赋值 示例: 给data中...
详解Vue中的基本语法和常用指令
10-16
Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。这篇文章主要介绍了vue 的基本语法和常用指令,需要的朋友可以参考下
vue跳转页面的几种方法(推荐)
10-15
主要介绍了vue不同方法跳转页面，本文给大家分享多种方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue自定义指令和动态路由实现权限控制
10-14
主要介绍了vue自定义指令和动态路由实现权限控制的方法，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
Vue常用的几个指令附完整案例
10-17
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧
Vue的赋值，指令，过滤，计算属性，监控属性
qq_44424498的博客
10-23 659
Vue的赋值 vue有4种赋值方式 1.文本的方式 2.HTML的方式 3.属性的方式 4.表达式 <!--在样式中加 <style> .class1{ font-size: 12px; color: darkgreen } </style> --> <body> <div id=...
前端vue elementui 字符串判断以及赋值
piaoxu_yun的博客
03-23 1715
如果是除数字外的字符串判断需要加上单引号'' 正确 错误
v-model --双向数据绑定
qq_45802159的博客
01-03 3104
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Vue之数组赋值
ljljlj1993的博客
10-23 7180
Vue不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 当第一种情况需求时，可以使用this.$set(this.arr,index,newVal) Vue不能检测对象属性的添加和删除： 可以使用this.$set(this.person...
初试Vue之元素、属性赋值
热门推荐
SoulArbiter的博客
10-23 1万+
我们在vue中数据赋值时，会很自然而然的想到用“Mustache” 双大括号插值法来赋值 在一个小案例中，比如给一个img标签附上链接  会很自然的想到 运行时会很自然的发现文件资源请求失败，究其因很简单，因为src是属性而不是值，故不可直接src={{ img.path }} 当然，Vue的 v-bind 已经为我们考虑完备了  官方文档对于v-bind的说明：动态地绑定一个或多个特
vue给textarea赋值可以使用v-model。
qq_40889256的博客
08-20 6921
vue给textarea赋值可以使用v-model。示例如下: html: <div id="app"> <textarea v-model="str"></textarea> </div> js: var vm = new Vue( { el:'#app', data:{ str:'这是测试内容' } }) 结果: ...
Vue之变量赋值
weixin_42693164的博客
10-14 1万+
前些天写Vue项目遇见一个很有意思问题：将一个数据（类型是对象）赋值给一个变量，当我去改变这个变量的时候，给它赋值的数据也跟着变化了，当我去改变数据时，变量也跟着变了，这让我想起了js中的浅复制和深复制，为验证，将对象（引用类型）改成字符窜（基本数据类型），果然，这个问题就不见了。 在js中有两种数据类型 （1） 基本数据类型：number、string、boolean、null、undefine...
vue子组件赋值props_vue 父子传值props赋值失效问题
weixin_39707536的博客
11-25 3747
前天我的同事问了我一个问题，说她遇到一个父子组件之间的props赋值失效的问题，奇怪的是同一个页面另外一个地方也调用了同一个子组件并且props使用赋值正常，而且她和我说其他props能正常赋值，还就只有一个props：noOptionsText这个属性赋值失效。附上图：props赋值正常的代码块（模板字符串中调用）：props赋值失效的代码块（template中调用）：一开始我也是愣住了，在子组...
Vue将从服务器读取的数据赋值给元素
qwq2867309085qwq的博客
09-29 329
【代码】Vue将从服务器读取的数据赋值给元素。
vue 给变量值赋值文本
macangyewangs的博客
06-09 1545
<td v-text="bianjie"></td> bianjie：'' if(this.Mysel.quDuanBaseEntity.bianjie == 0){ this.bianjie = '是' }else if(this.Mysel.quDuanBaseEntity.bianjie == 1){ this.bianjie = '否' }
vue2和vue3的自定义指令
最新发布
03-09
在Vue.js中，自定义指令是一种扩展Vue.js功能的方式，可以用于在DOM元素上添加特定的行为。 在Vue.js 2中，自定义指令通过`Vue.directive`方法来定义。自定义指令可以用于操作DOM元素、监听事件、修改样式等。例如...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值