侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

Vue学习之常用指令实例详解

前端  /  管理员 发布于 3年前   254

本文实例讲述了Vue常用指令。分享给大家供大家参考,具体如下:

1、创建一个vue实例

vue的一个特点就是数据驱动界面,一旦对js中的数据进行修改,界面中用到数据的地方也会立马做出更改。为了对界面进行操纵,需要先获取到界面的标签元素,并实例化一个vue实例。

例如在HTML创建一个div:

{{msg}}

在js中将其实例化为vue对象:

  let app=new Vue({    el:'#app',//标签的类名、id,用于获取元素    //以键值对的形式存放用到的数据成员    data:{      msg:'显示的内容'    },    //包含要用到的函数方法    methods:{    }  });

这样js中msg的内容就会在p标签内显示出来。

2、vue常用指令

1、 v-model:将组件与变量进行双向绑定,当组件数据修改时,变量会随之改变。它后面可加修饰符,例如.lazy,只有在标签中的值发生改变时才同步到变量,.trim过滤用户输入中的空格。

2、v-once:不允许修改数据,例如HTML中有如下三个标签:

  

{{msg}}

{{msg}}

在input框内输入内容后,会传到msg变量中,第二个p标签内显示的信息会随着msg发生变化,而第一个带有v-once的p标签则只会显示msg的初始值,不会随之变化。

3、v-if="表达式",根据表达式的结果来判断,是true则渲染元素,false则将元素注释掉

4、v-show与v-if类似,true就渲染,但是false并不是注释掉,而是通过display:none;来将元素隐藏,如果需要来回切换,使用v-show更好。例如:  

显示内容

注释内容

v-show隐藏

令show:true,hide:false,结果如下:

5、v-else、v-else-if与v-if连在一起使用构成逻辑判断,根据返回值决定是否显示,不可以单独或者分开使用,例如:

请输入分值:

优秀

良好

中等

不及格

测试结果为:

6、v-for用于遍历元素,使用格式为v-for="(值,键) in 遍历内容",其遍历的内容可以是数组、对象、字符串,例如在js的data中有一个person对象,person:{name:'tony',age:15,sex:'男'},将其内容在页面遍历输出: 

{{key+':'+value}}

生成结果如下:

7、v-text:向标签内注入数据,并且覆盖标签内的其他内容

8、v-html:向标签内覆盖注入HTML内容作为其子元素。例如:

标签内原来内容

结果插入一个子div并将覆盖原内容:

9、v-bind:给标签绑定属性、类、样式等,可以缩写为冒号,例如:    

......

由于vue的界面元素都是由数据驱动的,js代码从服务器获得的属性、样式等数据需要通过绑定加到HTML界面元素上,通过绑定可以更为灵活地选择要添加属性的元素。Vue并不是直接操纵元素的class,而是通过绑定一个数据到class上,然后通过数据驱动class的有无,从而改变页面的显示,这充分显示了vue数据驱动的特点。

例如给上面person对象中key为'name'的那一行信息绑定一个active类使其高亮显示:

{{key+':'+value}}

结果:

也可以使用如下方法来绑定一个类名,页面会根据变量isActive与hasError的true或false来确定是否绑定active与text-danger类,甚至可以将active设为计算属性,运算后返回true/false。

注意:绑定的属性可以用驼峰命名法或使用短横线来连接,但使用短横线要用引号引起来

10、v-on:给标签绑定函数,可以缩写为@,例如绑定一个点击函数

{{msg}}

在Vue的methods中实现changeContent函数:

  let app=new Vue({    el:'#app',    data:{      msg:'第一次输入信息',    },    methods:{      changeContent(){        this.msg="修改后的输入信息";      }    }  });

原页面与点击后:

Vue.js 为 v-on 提供了事件修饰符。修饰符是由.开头的指令后缀来表示的,用于对事件进行约束。例如:

  
...
...

除了点击事件外,还有按键事件,例如按下键盘码为13的按钮时触发:

为了方便使用vue将一些常用按键重命名,可以使用事件修饰符来使用,包括:.enter、.delete、.tab、.space、.esc、.up、.down、.right、.left等,也可以自定义:

Vue.config.keyCodes.f1 = 112;

希望本文所述对大家vue.js程序设计有所帮助。

您可能感兴趣的文章:

  • 详解Vue中的基本语法和常用指令
  • 详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
  • Vue常用指令详解分析
  • vue.js语法及常用指令
  • Vue.js常用指令之循环使用v-for指令教程
  • Vue.js常用指令的使用小结
  • Vue常用指令V-model用法
  • Vue.js第一天学习笔记(数据的双向绑定、常用指令)
  • 又一款MVVM组件 Vue基础语法和常用指令(1)
  • Vue.js常用指令汇总(v-if、v-for等)


  • 上一条:
    检查电脑是否被安装木马的命令实例图解第1/2页
    下一条:
    Vue学习之组件用法实例详解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在js中使用URL类用来解析处理URL的示例代码(0个评论)
    • js中动画事件:requestAnimationFrame、transitionend、animation...(0个评论)
    • 在js中mouseover和 mouseenter的区别浅析(0个评论)
    • uniapp调用手机实现打电话录音功能示例代码(0个评论)
    • 在uniapp开发微信小程序中图片大小显示不正常解决方法(0个评论)
    • 近期文章
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 在go语言中用filepath.Match()函数以通配符模式匹配字符串示例(0个评论)
    • Laravel Response Classes 响应类使用优化浅析(0个评论)
    • mysql中sql_mode的各模式浅析(0个评论)
    • 百度文心一言今天发布,个人第一批内测体验记录,不好别打我(0个评论)
    • 嘿加密世界让我们谈谈在共识中将中本聪主流化(0个评论)
    • 在go语言中寻找两个切片或数组中的相同元素/共同点/交集并集示例代码(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客