Vue-指令
2019-12-11 本文已影响0人
1CC4
以
v-开头
一、文本操作指令
二、条件渲染指令
三、列表渲染指令
四、关键指令
1、v-bind
响应地更新 HTML 属性，支持一个单一 JavaScript 表达式 （v-for 除外）
1.1、直接写法v-bind
<body>
<div id="app">
<!-- v-bind: 是 Vue中，提供的用于绑定属性的指令 -->
<input type="button" value="按钮" v-bind:title="mytitle">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
mytitle: '自定义的title'
},
});
</script>
</body>
1.2、简化写法:
<input type="button" value="按钮" :title="mytitle">
1.2、拼接绑定内容:title="btnTitle + '内容'"
<input type="button" value="按钮" :title="mytitle + '123'">
2、v-on用法/修饰符
事件绑定机制
在methods对象中定义方法
2.1、直接使用指令v-on
<div id="app">
<input type="button" value="按钮" v-on:click="show">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
show: function () {
alert('Hello Vue')
}
}
});
</script>
2.2、简化写法@
<input type="button" value="按钮" @:click="show">
修饰符
修饰符是由点
.开头的指令后缀来表示的
1、.stop
阻止单击事件继续传播
<a v-on:click.stop="doThis"></a>
2、.prevent
提交事件不再重载页面(不加载新页面)
<form v-on:submit.prevent="onSubmit"></form>
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
3、.capture
即内部元素触发的事件先在此处理，然后才交由内部元素进行处理（元素重叠，默认事件由内向外执行,capture改变事件执行顺序，由外向内执行）
<div class="box1" v-on:click.capture="doBox1">box1
<div class="box2" v-on:click="doBox2">box2</div>
</div>
4、.self
只当在 event.target 是当前元素自身时触发处理函数（只执行自己）
<div v-on:click.self="doThat">...</div>
3、v-model用法/修饰符
用于表单类元素上双向绑定数据，例如在输入框上使用时，输入的内容会实时映射到绑定的数据上。
用法：
<div id="app">
<input type="text" name="msg" placeholder="请输入内容" v-model="message">
<p>输入的内容是{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data:{
message:''
},
})
</script>
作用于文本、多行文本、单选框等
修饰符：
每次 input 事件触发后将输入框的值与数据进行同步
1、.lazy
添加 lazy 修饰符，从而转变为使用 change 事件进行同步(失去焦点)
<div id="app">
<input type="text" name="msg" placeholder="请输入内容" v-model.lazy="message">
<p>输入的内容是{{message}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data:{
message:''
},
})
</script>
2、
.number
默认情况下v-model的值是
string,添加.number修饰符后输入值转为数值类型
<input type="text" name="msg" placeholder="请输入内容" v-model="message">
<p>输入的内容是{{message+1}}</p>
<input type="text" name="msg" placeholder="请输入内容" v-model.number="message">
<p>输入的内容是{{message+1}}</p>
3、
.trim
自动过滤用户输入的首尾空白字符
