文档章节

Vue-概念、指令、修饰符

o
 osc_ogi0qclx
发布于 2019/08/27 14:29
字数 1095
阅读 13
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

一、Vue概念

  (一)什么是Vue:渐进式JavaScript框架

  (二)Vue特点:数据进行驱动

  (三)两大核心:虚拟DOM,双向绑定

  (四)版本:

    1、开发版本:包含完整的警告和调试模式

    2、生产版本:删除了警告,33.30KB min+gzip

二、Vue指令

  (一)指令:对HTML标签属性的一种扩展,以v-开头

    1、v-text  

      该指令可以渲染文本   在标签属性位置上写上   v-text ="属性名"   

      和插值表达式区别是   插值表达式 卸载innerHTML位置    v-text 写在标签属性位置

    2、v-html

      用来渲染带标签的文本,网站上动态渲染任意的html危险 ,容易受到xss攻击,只在可信内容上使用   v-html  提交的内容不可使用

    3、v-bind

      动态绑定属性   

      例如  <img v-bind:src="url">   url可以在data中获取其中   v-bind可以省略

    4、v-for

      用来渲染数组和对象

      1)渲染数组

        在标签属性的位置上写上   v-for ="(item,index) in arr"   :key="index"    //key必须加上 值为一个该数组不重复的项

      2)渲染对象

        在标签属性位置上写上   v-for="(value,key,index)  in obj"    :key="index"

    5、v-model 

      双向数据绑定model和view中的值进行同步变化

    6、v-on

      用来监听dom事件

      方法   v-on:事件类型   ="执行函数"   执行函数中可以添加参数可以传递$event对象

     7、v-if

      通过控制dom来控制元素的显示隐藏   

      涉及到异步数据渲染的时候就要使用v-if   

    8、v-show

      通过控制样式 display:none来控制元素的显示和隐藏

      涉及到大量dom操作的时候需要使用v-show

    9、v-cloak

      给闪烁的元素加上v-cloak指令

  (二)修饰符

    1、事件修饰符

      Vue.js 为 v-on 提供了 事件修饰符,通过由点(.)表示的指令后缀来调用修饰符。

      .stop

      .prevent

      .capture

      .self

复制代码
<div id="app2">
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用时间捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
</div>
复制代码

 

    2、按键修饰符

      在监听键盘事件时,我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

       记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

       全部的按键别名:

        enter

        tab

        delete (捕获 “删除” 和 “退格” 键)

        esc

        space

        up

        down

        left

        right

        可以通过全局 config.keyCodes 对象自定义按键修饰符别名:

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

         

    3、系统修饰键

      可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

      .ctrl

      .alt

      .shift

      .meta

      注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上,meta 对应实心宝石键 (◆)。在其他特定键盘上,尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品,比如 Knight 键盘、space-cadet 键盘,meta 被标记为“META”。在 Symbolics 键盘上,meta 被标记为“META”或者“Meta”。

      例如:

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

      注意:请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为,请为 ctrl 换用 keyCodekeyup.17。

 

    4、修饰符

      lazy:在改变后才触发(也就是说只有光标离开input输入框的时候值才会改变)

<input v-model.lazy="msg" >

      number:将输出字符串转为Number类型·(虽然type类型定义了是number类型,但是如果输入字符串,输出的是string)

<input v-model.number="age" type="number">

      trim:自动过滤用户输入的首尾空格

<input v-model.lazy.trim="msg" >
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
静态博客网站生成器--Hexo

Hexo 是一个基于nodejs 的静态博客网站生成器,作者是来自台湾的 Tommy Chen 特点: 不可思议的快速 ─ 只要一眨眼静态文件即生成完成 支持 Markdown 仅需一道指令即可部署到 GitHub Pages 和...

匿名
2013/04/05
2.9W
4
浏览器中的scheme解释器--SchemeScript

一个用javascript实现的scheme解释器,可以运行在浏览器中或node.js中。 刚刚看到编译原理与实践第二章,一时兴起,想写个以前就想写的scheme的解释器。昨天晚上开始写,到刚才为止,接近一天...

zoowii
2012/11/01
1.2K
0
AngularJS 的UI增强指令集--AngularUI

Angular UI 顾名思义,AngularJS 的UI增强指令集,提供了IE、jQuery 兼容,以及一些常用 UI 组件。 包含的模块有: UI-Utils UI-Modules UI-Alias UI-Bootstrap NG-Grid UI-Router IDE Plug...

匿名
2012/12/24
4.2W
0
新概念PHP包管理器--PHP Composer

几乎每种语言都有包管理器。Java有Maven,Python有easy_install和pip,Ruby有gem,Nodejs有npm。说到PHP当然也有PEAR,但我一直认为PEAR是设计最烂的一个包管理器:依赖处理不到位、配置复杂...

匿名
2013/05/15
5.9K
0
疯狂Spring Cloud连载(29)微服务跟踪概述

本文节选自《疯狂Spring Cloud微服务架构实战》 京东购买地址:https://item.jd.com/12256011.html 当当网购买地址:http://product.dangdang.com/25201393.html Spring Cloud教学视频:htt...

杨大仙的程序空间
2018/01/09
542
0

没有更多内容

加载失败,请刷新页面

加载更多

SwaggerUI看烦了,IGeekFan.AspNetCore.Knife4jUI 帮你换个新皮肤

背景 好像是上周四,看到微信群有人说java有轮子swagger-bootstrap-ui,而c#,就是找不到。 于是我一看,就说大话:“这个只是一套UI,他这个有开源地址么” 被@at说:你试试... 当天晚上就把...

张善友
今天
0
0
字符串驻留是个什么鬼!

先看下面这段代码 >>> a = 'apple' >>> b = 'apple' >>> a is b True 返回结果看起来没毛病 再来看这段: >>> a = 'apple!' >>> b = 'apple!' >>> a is b False 这个结果是不是有点诡异 前后......

谭庆波
昨天
0
0
golang包的日常(2)——log包

普通使用 log包定义了Logger类型,该类型提供了一些格式化输出的方法。 log包中预定义了一个标准logger对象std,使我们可以直接调用函数来打印日志,默认是标准错误输出(Stderr),打印到终...

osc_dg21zk4i
11分钟前
0
0
近10年全国高校双青人才排名TOP50,苏州大学表现抢眼

转眼又到了每年的杰青和优青项目评选的日子,作为高校人才水平的重要评判标准,每年高校的自然科学基金项目数都是一个非常重要的指标。当然,由于杰青每年只有200个名额,而国内有3000多所高...

科研菌
昨天
0
0
意派Epub360丨从制作到推广,H5页面如何刷屏?

不是所有H5最终都可以引爆朋友圈,也不是所有未能刷屏的H5都不够优秀。如何找到爆点、如何制作实现、如何传播转化……每一个要点都可能是影响刷屏的关键。即使是再资深的营销专家,也很难在H...

牙牙乐牙牙乐
11分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部