美文网首页
Vue基础语法2

Vue基础语法2

作者: consolelog | 来源:发表于2021-01-21 16:17 被阅读0次

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 被删除),在过渡/动画完成之后移除。

    image

相关文章

  • vue基础语法

    vue常用基础语法: 一、模板语法 1.vue使用基于html的模板语法,智能计算出最少需呀重复渲染的组件;2.数...

  • Vue部分基础知识点总结

    Vue基础知识点: 1.Vue:过滤html标签 ----{{{数据名}}}. 2.Vue:单次插值语法: ...

  • Vue基础语法2

    Vue基础语法2 修饰符 修饰符是由点开头的指令后置来表示 事件修饰符 在时间处理程序中用event.prentD...

  • Python 高端课程培训,CMDB自动化运维培训!

    1、入门小基础(8个课时): 1、沙盒环境,py环境安装使用 2、vue 基础语法与组件学习 3、vue + el...

  • (24)打鸡儿教你Vue.js

    学习Vue基础语法Vue中的组件Vue-cli的使用 1、使用Vue2.0版本实现响应式编程2、理解Vue编程理念...

  • vue3学习

    一、基础语法 1、双向数据绑定 vue2 vue3 2、ref, reactive ref:一般用在定义基本类型和...

  • Vue的基础语法

    简单介绍一下Vue的基础语法:1.引入vue: 2.Vue存放的点 3.js中定义相关作用域new Vue({el...

  • 【Vue3 从入门到实战 进阶式掌握完整知识体系】002-Vue

    二、Vue语法基础 1、Vue中的应用和组件的基本部分 代码 运行结果 2、理解Vue的生命周期函数* 生命周期图...

  • Vue.js学习笔记

    项目地址:https://gitee.com/westwall/vue-practice 目录 Vue基础语法: ...

  • Angular 学习路线

    第零步:基础语法 在学习 Vue 之前,首先你需要掌握 Html CSS JavaScript 的基础语法。 第一...

网友评论

      本文标题:Vue基础语法2

      本文链接:https://www.haomeiwen.com/subject/vnzqoktx.html