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