vue学习

1、vue的指令

功能	指令	script
鼠标悬停出信息（message）	<span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
if条件	<p v-if="true">现在你看到我了</p>
else条件	<div v-else> </div>
v-else-if条件	<div v-else-if="type === 'B'"> </div>
展示元素	<h1 v-show="ok">Hello!</h1>	data: {ok: true }
循环	<li v-for="todo in todos">{{ todo.text }}</li>	data: { todos: [{ text: ‘学习 JavaScript’},{ text: ‘学习 Vue’ },{ text: ‘整个牛项目’ } ]}
监听	<button v-on:click="reverseMessage">反转消息</button>	methods：{reverseMessage: function (){}}
表单输入	<input v-model="message">
链接	<a v-bind:href="url">菜鸟教程</a>>
class 属性绑定	<div v-bind:class="{ active: isActive,... }"></div> active:css,可以多个css,true时后面覆盖前面；isActive：true或false,也可以直接写对象

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-on 指令，它用于监听 DOM 事件
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
computed vs methods 效果上两个都是一样的,可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

事件修饰符

<!-- 阻止单击事件冒泡 -->
<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>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

v-on 在监听键盘事件时添加按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<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 v-model.number="age" type="number">
 .lazy     在 change 事件中同步
 .number   自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）
 .trim     自动过滤用户输入的首尾空格

2、Prop

Prop 验证

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

type 可以是下面原生构造器：
String
Number
Boolean
Array
Object
Date
Function
Symbol