Vue基础语法2 Vue基础语法2

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 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to：在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to：在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。