vue 速查手册

目录

一、vue指令

1、v-html   

2、v-bind(可缩写为冒号 :)

3、v-show

4、v-if

5、v-on(可缩写为@)

6、v-for 

二、表单

1、v-mode 修饰符

2、文本框

3、复选框

4、单选框 

5、下拉框

三、vue 组件

1、全局组件

2、局部组件

3、prop

4、自定义事件

---

一、vue指令

1、v-html   

输出转化后的html代码，如message为vue中的data变量，如果为html他会转化 

<div v-html="message">{
  {message}}</div>

2、v-bind(可缩写为冒号 :)

绑定一个属性，属性的对应为vue中的变量，可用它来切换标签的类，以及id、title等，下例为使title属性对应为变量message

<div v-bind:title="message">DOM元素属性绑定</div>

当变量use为True时，类就为class1，为False则忽略

<div v-bind:class="{'class1': use}">

3、v-show

当ok为true时显示此标签，为false时不显示

<h1 v-show="ok">Hello!</h1>

4、v-if

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素，可用v-else-if，v-else 继续拼接判断 

<p v-if="seen">如果seen为真我就出现，否则我就消失</p>


    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>

5、v-on(可缩写为@)

监听Dom，下例：监听点击时间，运行函数 doSomething

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

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、.ctrl、

.alt、.shift、.meta、

v-model 

数据双向绑定实时修改，可用在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定。如下例绑定变量"message"

<input v-model="message">

6、v-for 

可以为一个、两个或 三个参数

<div id="app">
  <ul>
	   <li >一个参数</li>
    <li v-for="value in object">
  {
  { value }}