Vue学习相关笔记

发表于 | 分类于
字数统计: 1,956 字 | 阅读时长 ≈ 8

基础操作

数据绑定

  • 数据绑定
    使用 的格式绑定数据
  • 数据双向绑定 v-model
    1
    2
    v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
    vuejs双向绑定并不能适用于所有的html表单，限制为input、select、textarea、components。
  • v-text 整个标签绑定
    在vuejs中可以使用v-text属性来控制整个标签的内容绑定。
  • v-html
    v-html 更新元素或者变量的innerHTML，按普通html解析，和v-text的区别是在变量中的html标签会被浏览器解析，比如<br>会直接解析为换行

    直接作为 HTML —— 数据绑定会被忽略。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。
    动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
  • v-show
    v-show 根据条件解析元素display的属性的真假，如果为真则display为block，假的话则为none在页面不显示。
  • v-if
    v-if、v-else、v-else-if,if三兄弟，条件判断，这个跟我们平时见到的if语句类似，根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
  • v-for
    循环遍历

  • v-on
    事件绑定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!-- 方法处理器 -->
    <button v-on:click="doThis"></button>
    <!-- 内联语句 -->
    <button v-on:click="doThat('hello', $event)"></button>
    <!-- 缩写 --><button @click="doThis">
    </button><!-- 停止冒泡 -->
    <button @click.stop="doThis"></button>
    <!-- 阻止默认行为 -->
    <button @click.prevent="doThis"></button>
    <!-- 阻止默认行为，没有表达式 -->
    <form @submit.prevent></form>
    <!--  串联修饰符 -->
    <button @click.stop.prevent="doThis"></button>
    <!-- 键修饰符，键别名 -->
    <input @keyup.enter="onEnter">
    <!-- 键修饰符，键代码 -->
    <input @keyup.13="onEnter">

  • v-once
    v-once 能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定

    1
    <span v-once>This will never change: {{ msg }}  </span>

计算属性

computed意为计算属性，注意，是属性！！！然后methods意为方法。
var obj = {
name:’hello’,
shake:function(){}
}
name是obj的成员属性，而shake是obj的成员方法。

我们可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

指令

  • 参数
    一些指令能够接受一个“参数”，在指令后以冒号指明。例如，v-bind指令被用来响应的更新HTML属性。
    下面是a标签中href参数，告知v-bind指令将钙元素的href属性与表达式url的值绑定。
    1
    <a v-bind:href="url"></a>

另一个例子v-on，用于监听DOM事件

1
2
3
4
5
6
<a v-on:click="doSome"></a>
+ 修饰符
修饰符(Modifiers)是以半角句号 `.` 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如,`.prevent` 修饰符告诉 `v-on` 指令对于出发的事件调用'event.preventDeafult()'：
```html
<form v-on:submit.prevent="onSubmit"></form>

过滤器

可用于一些常见文本的格式化。可用于插值和v-bind(Vue2.1.0开始支持)表达式。

1
2
3
4
5
<!-- 插值 -->
{{ msg | capitalize}}
<!-- b-bind -->
{{div v-bind:id="sth | formatId"}}

1
2
3
4
5
6
7
8
9
10
new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联：

1
{{   msg  |  filterA  |  filterB  }}

过滤器是 JavaScript 函数，因此可以接受参数：
这里，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

1
{{   msg  |  filterA( 'arg1' , arg2 )  }}

缩写

  • v-bind
    当我们需要用到v-bind，使，可以使用:替代

    1
    2
    3
    4
    5
    <!-- 完整写法 -->
    {{div v-bind:id="sth | formatId"}}
    <!-- 缩写-->
    {{div :id="sth | formatId"}}

  • v-on

    1
    2
    3
    4
    5
    <!-- 完整写法 -->
    {{div  v-on:click="doSth"   }}
    <!-- 缩写-->
    {{div  @:click="doSth"    }}

生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：
类似的还有mounted、updated、destroyed
特别值得注意的是created钩子函数和mounted钩子函数的区别

1
2
3
4
5
6
7
8
9
var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})

Image text

Vue中如何实现动画/过渡动画

过渡效果

Vue中使用过度效果时，需要在父级包裹一层<transition></transition>，并且在name中指明过渡效果的类名，需在CSS中编写 类名-enter,类名-leave

例如：

1
2
3
<transition name="fade">        //name指明了过渡效果的类名，
<div>我是一个有过渡效果的块</div>
</transition>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
来源： https://cn.vuejs.org/v2/guide/transitions.html

动画

动画的实现方式与过渡相同。
例如name=”bounce”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

设置过渡持续时间

在过渡上绑定duration属性可以控制样式存在时间的长短，经过个人测试并不能改变属性变化时间长短，只能在CSS中进行更改。
假如Css中未设置transition-duration，会当作0来处理。

钩子函数

Vue对次提供了一些钩子函数，用于各个状态的调用，具体如下：

  • 这些钩子函数可以结合CSS transition/animations 使用，也可以单独使用。
  • 当只用 JavaScript 过渡的时候， 在 enter 和 leave 中，回调函数 done 是必须的 。 否则，它们会被同步调用，过渡会立即完成。
  • 推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=”false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:after-enter="afterEnter"
      v-on:enter-cancelled="enterCancelled"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
      v-on:after-leave="afterLeave"
      v-on:leave-cancelled="leaveCancelled"
    >
      <!-- ... -->
    </transition>
    来源： https://cn.vuejs.org/v2/guide/transitions.html#自定义过渡类名

过度模式

当多个元素都具有过度效果时，并且想具有一前一后的过渡效果时，可以使用过度模式实现。
有以下两种种过渡模式：

  • in-out ：新元素先进行过渡，完成之后当前元素过度离开；
  • out-in ：当前元素先进行过渡，完成之后新元素过渡进入。
    1
    2
    3
    <transition name="fade" mode="in-out">
        <div>我是过渡元素</div>
    </transition>

更过过渡的效果

更多过渡

与其他组件配合