Vue基础语法2
修饰符
修饰符是由点开头的指令后置来表示
事件修饰符
在时间处理程序中用event.prentDefault()
或 event.stopPropagation
是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理DOM事件细节。
为了解决这个问题,Vue.js为v-on
提供了事件修饰符。
-
.stop
阻止事件冒泡 -
.prevent
阻止默认行为 -
.capture
修改事件的执行顺序为捕获模式 -
.self
限制事件只能被事件源触发, 不能被冒泡触发 -
.once
只执行一次
<button type="button" @click.stop="click">按钮</button>
<!-- 阻止事件冒泡 -->
<a href="www.baidu.com" @click.prevent.stop="click">百度</a>
<!-- 阻止a标签跳转并且阻止事件冒泡 -->
按键修饰符
在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
.enter
.space
.esc
.tab
-
.delete
(捕获“删除”和“退格”键) .up
.down
.left
.right
<input type="text" @keydown.enter="down">
<!-- 当键盘按下enter键 -->
表单修饰符
-
trim
去除字符串首尾空格 -
lazy
延迟数据同步 -
number
将表单数据转换为数值型
<input type="text" v-model.trim="uname" />
<!-- 去除首尾空格 -->
侦听器和计算属性
侦听器
侦听器可以监视数据的更新,并进行一些业务处理能力。侦听器无需手动,只要定义了并且数据发生变化就会自动执行
const myVue = new Vue({
el: '#app',
data: {
uname: ''
},
watch: {
uname(newValue, oldValue) {
console.log(newValue, '改变之前的数据');
console.log(eldValue, '改变之后的数据');
}
},
})
计算属性
计算属性就是一种特殊的方法,和methods
方法类似。不同的是,计算属性内部提供的缓存机制
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
过滤器
过滤器,可用于一些常见的文本格式化。过滤器可以用在连个地方:双花括号和v-bind
表达式。
过滤器分为全局过滤器和局部过滤器,定义在vue实例内部的过滤器为局部过滤器,直接以vue.filter
定义的过滤器为全局过滤器
<div id="app">
<!-- 格式化时间 -->
<p>{{date | fnName}}</p>
<input type="text" v-bind:value="date | fnName">
</div>
const vm = new Vue({
el: '#app',
data: {
date: new Date().getTime()
},
//私有过滤器
filters: {
fnName(time, divider = '/') {
const date = new Date(time);
const y = date.getFullYear(); // 获取年份
const m = date.getMonth() + 1; // 获取月份
const d = date.getDate(); // 获取日期
const h = date.getHours(); // 获取小时
const mm = date.getMinutes(); // 获取分钟
const s = date.getSeconds(); // 获取秒数
return `${y}${divider}${m}${divider}${d} ${h}:${mm}:${s}`;
}
}
})
//全局过滤器
Vue.filter('fnName', function(time, divider = '/') {
const date = new Date(time);
const y = date.getFullYear(); // 获取年份
const m = date.getMonth() + 1; // 获取月份
const d = date.getDate(); // 获取日期
const h = date.getHours(); // 获取小时
const mm = date.getMinutes(); // 获取分钟
const s = date.getSeconds(); // 获取秒数
return `${y}${divider}${m}${divider}${d} ${h}:${mm}:${s}`;
})
过渡动画
Vue导航切换过渡动画很常见,页面上使用了过渡动画,用户体验更加友好,过渡动画主要是配合CSS样式来实现动画效果的。
主要使用场景如下:
- 条件渲染(使用
v-if
) - 条件展示(使用
v-show
) - 动态组件
- 组件根节点
这里是一个典型的例子:
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
过渡类名
在进入/离开的过渡中,会有 6 个 class 切换。
-
v-enter
:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 -
v-enter-active
:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 -
v-enter-to
:在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。 -
v-leave
:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。 -
v-leave-active
:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。 -
imagev-leave-to
:在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
网友评论