Vue框架体系

指令

• v-once

一次性插值，当数据内容改变时，插入的数据不会改变。

    <span v-once>这个将不会改变: {{ msg }}span>

• v-html

内容转为html代码

<p>Using mustaches: {{ rawHtml }}p>
<p>Using v-html directive: <span v-html="rawHtml">span>p>

• v-show

根据条件切换显示状态

    <h1 v-show="ok">Hello!h1>
    //v-show 不支持 <template> 元素，也不支持 v-else

• v-if

• v-else

• v-else-if

条件选择，如果为真，插入，否则，移除

<p v-if="seen">现在你看到我了p>
<h1 v-if="awesome">Vue is awesome!h1>
<h1 v-else>Oh no h1>
<div v-if="type === 'A'">
  A
div>
<div v-else-if="type === 'B'">
  B
div>
<div v-else-if="type === 'C'">
  C
div>

• v-for

根据数组列表渲染，详见另一博文：

• v-on

监听DOM事件，详见另一博文：

    <a v-on:click="doSomething">...a>

• v-bind

绑定属性事件，详见另一博文：https://blog.csdn.net/weixin_42078760/article/details/88093172

• v-model

绑定表单元素，详见另一博文：https://blog.csdn.net/weixin_42078760/article/details/88093627

属性

• el

绑定的元素

• data

数据内容

• computed

计算属性

• created

模型创建后执行

• watch

监听属性

• methods

预设方法

修饰符

事件修饰符

• .stop

中止事件

• .prevent

阻止事件

• .capture

捕捉事件

• .self

指定元素对象本身

• .once

只能触发一次

• .passive

阻止默认行为

键盘修饰符

• .enter

enter键

• .page-up

PageUp

• .page-down

PageDown

• .tab

tab键

• .delete

delete和backspace键

• .esc

Esc键

• .space

空格键

• .up

向上

• .down

向下

• .left

向左

• .right

向右

• .ctrl

Control键

• .alt

Alt键

• .shift

Shift键

• .meta

设置meta

• .exact

允许你控制由精确的系统修饰符组合触发的事件

鼠标修饰符

• .left

左键

• .right

右键

• .middle

中间滚轮

表单修饰符

• .lazy

惰性更新

• .number

input输入自动转number

• .trim

input自动去空格

其他关键点

• 模版

详见另一博文：

• 自定义组件

详见另一博文：

• 动态参数表达式

详见另一博文：

• 数组更新与过滤

详见另一博文：

• v-if与v-show

详见另一博文：

• v-if与v-for优先级

详见另一博文：

• v-for与key

详见另一博文：

• 过渡动画

详见另一博文：