vue指令
什么是指令呢?指令本质就是自定义属性,指令的格式都以v-开始
1. v-cloak指令:插值表达式中存在的问题:“闪动”,原理:先通过样式隐藏内容,然后在内存中替换值,替换好后在显示最终的结果。
用法
[v-cloak] { display: none; }
<div id="box" v-cloak>{{msg}}</div>
数据绑定指令
2. v-text指令:填充纯文本,相比插值表达式更简洁,不存在闪动问题
<div id="box" v-text="msg"></div>
<script>
var vm = new Vue({
el: '#box',
data: {
msg: 'hello vue'
}
});
</script>
3. v-html指令:填充HTML片段,存在安全问题,本网站内部的数据可以使用,来自第三方的数据不使用
<div id="box" v-html="msg1"></div>
<script>
var vm = new Vue({
el: '#box',
data: {
msg: 'hello vue',
msg1: '<h2>html</h2>'
}
});
</script>
4. v-pre指令:显示原始信息,跳过编译过程(分析编译过程)
<div id="box" v-pre>{{msg}}</div>
<script>
var vm = new Vue({
el: '#box',
data: {
msg: 'hello vue'
}
});
</script>
数据响应式:html5中(屏幕尺寸的变化导致样式的变化)
数据的响应式(数据的变化导致页面内容的变化)
数据绑定:将数据填充到标签中
5. v-once指令:只编译一次,显示内容之后不再具有响应式功能
<div id="box" v-once>{{msg}}</div>
<script>
var vm = new Vue({
el: '#box',
data: {
msg: 'hello vue'
}
});
</script>
双向数据绑定:数据变化对页面的影响,页面数据变化对数据的影响
MVVM设计思想:M(model) 模型 实际是data中的数据,V(view) 视图 模板, VM(View-Model)提供了控制功能
View --------->dom Listeners ----------->Model (视图到数据通过事件监听)
Model --------> Data Bindings ----------> View (数据到试图通过数据绑定)
6. v-model指令:页面内容变化会使数据也发生变化
<div id="box" v-model="msg">{{msg}}</div>
<script>
var vm = new Vue({
el: '#box',
data: {
msg: 'hello vue'
}
});
</script>
Vue如何处理事件:
7. v-on指令:v-on:事件名称(可将v-on替换为@)eg:v-on:click (@click)
<button v-on:click="num++">点击</button> <button @click="num++">点击</button>
事件函数的调用方式:
为优化性能v-on指令一般调用方法,方法需定义在Vue实例的methos中
<button v-on:click="handle">点击3</button> <button @click="handle()">点击4</button> </div> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle: function() { this.num++; } } }); </script>
事件函数的参数传递:普通参数与事件对象
如果事件直接绑定函数名,默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用,那么事件对象必须作为最后一个参数传递,并且事件的名称必须是$event
<button v-on:click="handle('123', $event)">点击</button>
<button v-on:click="handle1">点击1</button> <button @click="handle2(123,234,$event)">点击2</button> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle1: function(event) { console.log(event.target.innerHTML); this.num++; } , handle2:function(p,p1,event) { console.log(p,p1); console.log(event.target.innerHTML); this.num++; } } }); </script>
事件修饰符
(1).stop 阻止冒泡
<a v-on:click.stop="handle">跳转</a>
(2).prevent 阻止默认行为
<a v-on:click.prevent="handle">跳转</a>
按键修饰符
(1).enter 回车键
<input v-on:keyup.enter='handleSubmit'>
(2).delete 删除键
<input v-on:keyup.delete='handleSubmit'>
自定义按键修饰符
a: 自定义按键事件名
值:按键的keyCode值
Vue.config.keyCode.a = 65