Vue-概念、指令、修饰符

一、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 换用 keyCode：keyup.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" >