Vue基础指令整理

最新推荐文章于 2024-04-04 18:18:48 发布
最新推荐文章于 2024-04-04 18:18:48 发布
阅读量723 收藏 37
点赞数 2
分类专栏： 笔记 文章标签： vue javascript js html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43311978/article/details/106773161
版权

Vue是一套用于构建用户界面的渐进式框架，Vue 被设计为可以自底向上逐层应用，不仅易于上手，还便于与第三方库或既有项目整合，下面是Vue的一些基本指令和用法

目录


基本用法 

<div id="app">
    {{ message }}
    <br>
    {{ name }}
    <br>
    {{ name[0]}} {{ name[1] }}
    <br>
    {{school}}
    <br>
    {{ school.name + ":" + school.phone }}
    <br>
    {{ (num1 + num2) * 2 }}
</div>

创建Vue实例对象，设置el（挂载点）属性和data属性

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!",
            name:["北京","上海","广州","深圳"],
            school:{
                name:"清华",
                phone:"12345678998"
            },
            num1:5,
            num2:6
        }
    })
</script>

效果
在这里插入图片描述
Vue实例作用范围是el命中的元素及其内部的后代元素，建议使用id选择器，不能挂载html和body标签
Vue中用到的数据定义在data中，data中可以写复杂类型的数据，渲染时遵守js的基本语法

v-text

设置标签的文本值，默认写法会替换全部内容，使用 {{ }} 可以替换指定内容，内部支持写表达式

<div id="app">
    <h1 v-text="message + '!'">深圳</h1>
    <h1>{{ message + "!" }}深圳</h1>
    <h1></h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue"
        }
    })
</script>

在这里插入图片描述

v-html

设置元素的innerHtml，设置普通文本时与v-text没区别，但当内容中有html结构会被解析为标签，v-text无论什么内容都只会解析为文本

<div id="app">
        <h2 v-text="message"></h2>
        <h2 v-html="message"></h2>
        <p v-text="info"></p>
        <p v-html="info"></p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue",
            info:"<a href='#'>网站</a>"
        }
    })
</script>

在这里插入图片描述

v-on

v-on:事件名，为元素绑定事件，事件名不需要写on，可以简写成@，绑定的方法定义在methods属性中，可以传入自定义参数定义方法时需要自定义形参来接收传入的实参，事件后面跟上 . 修饰符 可以对时间进行限制，如下面的@keyup.enter，只有按下回车才触发，方法内部可以通过this访问定义在data中的数据

<div id="app">
        <input value="test1" type="button" v-on:click="doit">
        <input value="test2" type="button" v-on:mouseenter="doit">
        <input value="test3" type="button" v-on:dblclick="doit">
        <input value="test4" type="button" @click="doit">
        <h1 @click="change">{{message}}</h1>
        <input type="text" v-model="inputData" @keyup.enter="showInput">
        <input type="button" value="show" @click="show('Hello,Vue!')">
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue",
            inputData:""
        },
        methods:{
            doit:function () {
                alert("tttt");
            },
            change:function () {
                this.message += "!";//点一下加一个"!"
            },
            showInput:function () {
                alert(this.inputData);
            },
            show:function (data) {
                alert(data);
            }
        }
    })
</script>

在这里插入图片描述

v-show

根据true或false切换元素的显示状态，原理是修改元素的display，实现显示与隐藏，指令后的内容最终会被解析成布尔值，true:显示，false:隐藏

<div id="app">
        <input type="button" value="切换显示状态" @click="change">
        <input type="button" value="加年龄" @click="add">
        <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" v-show="true">
        <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" v-show="isShow">
        <img src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" v-show="age > 18">
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            age:16,
            isShow:false
        },
        methods:{
            change:function () {
                this.isShow = !this.isShow;
            },
            add:function () {
                this.age++;
            }
        }
    });
</script>

v-if

与v-show作用相似，根据表达式的真假切换元素的显示状态，true显示，false隐藏，但v-if本质是操作dom元素来切换显示状态，因此频繁切换时，使用v-show，只不频繁或者只切换一次时使用v-if

<div id="app">
        <p v-if="true">我是p标签1</p>
        <p v-if="age > 18">我是p标签2</p>
        <p v-if="isShow">我是p标签3</p>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!",
            age:16,
            isShow:true
        },
    });
</script>

在这里插入图片描述

v-bind

设置元素的属性（比如src，title，class），完整写法是v-bind:属性名，简写可以省略v-bind，只保留 :属性名，建议使用对象方式，比三元表达式易懂，也可以绑定一个返回对象的计算属性

<div id="app">
        <img :src="imgSrc" :title="imageTitle+'!!!'">
        <img :src="imgSrc" :class="isActive?'active':''">
        <img :src="imgSrc" :title="imageTitle" :class="classObject">
        <div :class="classObj"></div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            imageTitle:"百度",
            isActive:false,
            error:null,
            classObject:{
                active:true
            }
        },
        computed:{
            classObj:function () {
                return {
                    active: this.isActive && !this.error,
                    'text-danger': this.error && this.error.type === 'fatal'
                }
            }
        }
    });
</script>

v-for

作用是根据数据生成列表结构，v-for经常和数组结合使用，语法是(item,index) in 数组，item和index可以结合其他指令一起使用，数组长度的更新会同步到页面上，是响应式的

<div id="app">
        <input type="button" value="增加" @click="add">
        <input type="button" value="减少" @click="remove">
        <ul>
            <li v-for="(item,index) in arr" :title="item">
                {{index + 1}}{{item}}
            </li>
            <li v-for="(item,index) in objArr">
                {{item}}
                <br>
                {{index+1}}{{item.name}}
                <div v-for="it in item.friends">
                    {{it}}
                </div>
            </li>
        </ul>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arr:["北京","上海","广州"],
            objArr:[
                {name:"Tom",friends:["Jack","rose","peter"]},
                {name:"Jerry",friends:["Michael","Tom","Bob"]}
            ]
        },
        methods:{
            add:function () {
                this.arr.push("深圳");
            },
            remove:function () {
                this.arr.shift();//去掉的是最数组前面的数据
            }
        }
    });
</script>

在这里插入图片描述

v-model

便捷地设置和获取表单元素的值（双向数据绑定），绑定的数据会和表单元素相关联，改变任何一个另外一个也会同步更新

<div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        },
    });
</script>

在这里插入图片描述

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

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

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello,Vue!"
        }
    });
</script>

在这里插入图片描述

v-once

只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过，这可以用于优化更新性能。

以上为Vue的一些主要指令，还有其他的一些如v-slot，v-else-if等可以参考官方的api文档https://cn.vuejs.org/v2/api/

Captain.Y.
关注
  • 2
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue基础知识笔记（一）—— 指令
weixin_51341611的博客
03-01 539
vue基础知识笔记 —— 指令详解，持续更新中。
Vue面试题及Vue知识点整理
12-10
（都是一些基础的vue面试题，大神不用浪费时间往下看） 一、对于MVVM的理解？ MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件，它负责...
【操作类】v-for遍历数组用index实现升降序
Weiqian_的博客
07-19 423
v-for遍历数组用index实现升降序
Vue循环遍历
qq_41555595的博客
08-07 2722
Vue循环遍历 1.v-on介绍 作用 循环遍历 预期 Array | Object | number | string | Iterable (2.6 新增) 用法 alias in expression ## 2.v-for 遍历数组 <div id="app"> <ul> <li v-for="name in names">{{name}}</li>
Vue基本指令（超详细介绍），快来收藏
2401_84098033的博客
04-04 866
外链图片转存中…(img-5tIZlJdb-1712225883871)][外链图片转存中…(img-cntG7UUB-1712225883872)]
Python 修改图片分辨率任意数保存图片
hypon的博客
06-30 3062
访问百度查看了百度图片地址https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png 查看分辨率为540*258 随便修改为750*500 直接上代码 import urllib.request from PIL import Image # 爬取百度图片 imgdata = urllib.request.urlopen('https://www.baidu.com/img/PCtm_d9c8750bed0b3c
Vue的基本指令
oxh499780424的博客
10-30 452
vue的特性就是对数据进行操作，减少对Dom的操作，在data中定义的属性会是全局的，只要你改变了属性也会实时改变，不需要你再像js那样，改变之后重新调用方法显示。v-bind: 将值绑定到标签的自定义属性上，形式为 v-bind:title=“mytitle”，可以简写为 :属性名。v-text(): v-text是用于操作纯文本，它会替代显示对应的数据对象上的值，可以简写为{{}}, 即插值表达式。v-for: 循环遍历。v-if:值如果为true的情况下，显示标签，如果为false会移除标签。
vue面试题整理vuejs基础知识整理.pdf
12-14
Vue基础知识点总结 Vue是一款流行的前端框架，以下是关于Vue基础知识点的总结： 1. Vue的基本原理： 当创建一个Vue实例时，Vue会遍历data中的属性，使用Object.defineProperty（Vue 3.0使用Proxy）将它们转换为...
VUE常用方法整理.pdf
03-28
第5节 状态管理中⼼—vuex的基础⽤法（官方文档，非常好用） 28  State 28  Mutations 28  Actions 28  vuex⾥包含的基本参数 28  还有别的mapState这些很好用 29 import { mapState, mapMutations } from...
【Vue基础知识点速查手册 - 面试指南】从指令到计算属性,让Vue不再难懂
08-22
内容概要: - 涵盖了Vue的基础知识点,如指令、方法、计算属性等 - 列出了常用的指令语法,如v-...这是一份针对Vue基础知识点的速查手册,可以帮助初学者快速回顾和掌握Vue的基础语法,也可供开发者面试前进行知识点整理。
vue基础知识及思维导图，安装脚手架详细过程
最新发布
06-03
Vue基础知识与思维导图：探索Vue的精髓 Vue.js是一个构建用户界面的渐进式框架，对于前端初学者和开发者来说，掌握其基础知识是至关重要的。Vue的基础知识涵盖了模板语法、指令、组件、路由、状态管理等核心概念。...
在vue的v-for中使用索引index值
01-06
在vue的v-for中使用索引index值
百度OCR图片识别文本
changebubu的专栏
12-11 555
1、登录百度云，注册OCR帐号：https://console.bce.baidu.com/ai/?_=1607675504636&fromai=1#/ai/ocr/app/list 创建任意应用后，出现如下内容，保存appid,apikey,secret key,这三个内容是后面要用到的参数，保存哦 2、获取token,浏览器中输入下面的内容，client_id值为API Key值，client_secret值为Secret Key值 ，要替换哦！！ https://aip.baidub
vue常用指令
热门推荐
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
１、vue v-for循环中不要使用　index作为:key值
帅帅的廉颇的博客
02-28 1万+
开始学着做vue项目，一路不免有许多坑需要填，谨以此纪录我的排坑历程，以兹纪念。 １、v-for　循环中不要使用　index作为:key值，有可能导致第一次执行循环体初始化失败。 错误示例： 父组件： &amp;amp;lt;component v-for=&amp;quot;(grade, index) in gradeList&amp;quot; v-bind:grade=&amp;quot;grade&amp;quot; :key=&amp;qu
vue v-for index下标中文网挖的坑
u011120573的博客
04-18 7909
https://cn.vuejs.org/v2/guide/list.html#基本用法 官网把index参数写反了 ul id="example-2"> li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} li>ul> 应该是 li v-fo
vue 给循环遍历的数据 加 序号排列展示
maoxiaohei_的博客
10-18 1052
<template> <view> <view v-for="(item,index) in meterEventList"> <view>{{index+1>9?index+1:"0"+(index+1)}}</view> <view>{{item.event_time}}</view> </view> </view> </template>
vue1.0中$index一直报错的解决办法
weixin_30551947的博客
12-31 271
原文链接：https://www.cnblogs.com/liqiong-web/p/8144925.html 看学习视频，因为年份比较早了，其实vue早已迭代到vue2.0了，遇到一些问题： v-for遍历数组，获取索引 注意：在2.0版是1~10中，$index已废除，索引 (item,index)。 如下为vue1.0的写法，$index浏览器会报错 1 <ul v-...
VueJs(2)---VueJs开发环境的搭建和讲解index.html如何被渲染
a8892117的博客
04-15 937
VueJs开发环境的搭建和讲解初始框架 有关如何搭建vue.js框架我这看了一篇文章，自己也根据它进行搭建环境。 文章地址：vue.js2.0实战(1):搭建开发环境及构建项目 接下来对初始的框架进行讲解，只讲index.html是如何被渲染出来的。 一、启动项目 第一步：cmd进入项目文件里，运行npm run d...
vue 自定义指令
05-25
Vue 自定义指令是 Vue 中一种非常有用的扩展能力，它允许你在标准的模板语法中使用自定义行为，而不需要编写新的组件或者混入。 Vue 提供了全局的 `Vue.directive()` 方法来注册自定义指令。该方法接受两个参数，第...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值