Vue基础学习笔记

2020-05-23 本文已影响0人 MrAlexLee

Vue基本语法（日常开发足够了... hiahiahia）

文本插值一般如下:

<span>Messange:{{msg}}</span>

当msg改变时，span标签内的值也随之变化

但是如果使用v-once指令，那么span标签中的msg只会使用初始化的值，不随着msg的值改变而改变。

用法：

<span v-once>Messange:{{msg}}</span>

纯HTML插入

<div v-html="myHtml"></div>

myHtml中的内容都会被当做HTML来处理，数据绑定会被忽略

属性

意思是div可以设置的属性，如id， class，style等诸多属性都可以通过v-bind指令来动态进行改变，在Vue实际的项目当中，一般都会把v-bind指令省去，直接写:class="dynamicClass"。类似的还有button标签的disabled属性，可以直接插值：

<button v-bind:disabled="someDynamicCondition">Button</button>

修饰符

修饰符是以半角句号.指明的特殊后缀，用于支出一个指定应该以特殊方式绑定。

.lazy 举个栗子

<input v-model.lazy = "msg"/>

.number

.trim

.prevent 阻止事件冒泡

@click:stop=""

举个栗子：

在外层div上有点击事件，内层的p标签上也有点击事件，那么为了触发内层p标签的点击事件，就需要阻止冒泡。当然可以在p标签的点击事件内进行e.preventDefault();但是Vue提供了指令可以这样简写：

<p @click.prevent="stopProp">阻止冒泡</p>

过滤器

上面的插值都可以跟一个过滤器，尝尝被用来对一些文本进行格式化，比如接口返回的时间戳，渲染在页面上是yyyy-MM-DD格式，那么可以使用过滤器进行操作。

<div>{{ timestamp | transferTimestamp }}</div>
<script>
  filters:{
  transferTimestamp:function(){
        //处理逻辑
  }
}
</script>

此外，过滤器还可以传参数。举个栗子：

<div>{{ timestamp | transferTimestamp('123',args2) }}</div>
<script>
  filters:{
  transferTimestamp:function(a,b){
        console.log(a)//123
        //处理逻辑
        return something
  }
}
</script>

计算属性

其实在上面的插值中是可以直接写函数来进行操作的，举个栗子：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

其实我觉得还好，不算过重，也不算难以维护。

官方建议使用计算属性，写在computed钩子函数中。举个栗子：

<tamplate>
    <div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>    
</tamplate>
<script>
      new Vue({
      computed:{
        reveersedMessage:function(){
          return this.message.split('').reverse().join('')
        }
      }
    })
</script>

解释：在这里声明的reversedMessage函数将用作属性vm.reversedMessage的getter。当vm.message改变时，依赖于vm.reversedMessage的绑定也会更新，而且我们是声明式创建这种依赖关系：计算属性的getter是干净无副作用的，因此也是易于测试和理解的

计算属性和methods

如果不使用computed钩子函数，我们还可以在methods里面写这个方法，但是每次重新渲染的时候，method调用总会执行函数。而计算属性是基于它的依赖缓存，只要message值不变，那么reversedMeaasge对应的函数是不会执行的，只会立即返回之前的计算结果，而不必再次执行函数。

计算属性和Watched

Vue提供了一个方法$watch，它用来观察Vue实例上的数据变动，当一些数据需要根据其他数据变化时，可以使用watch。计算属性大多情况下更合适，有时候需要一个自定义的watcher，一般的使用场景是：在数据变化响应时，需要执行异步操作或者昂贵操作

class和style绑定

这个没什么好说的，对于class来说，要么是{}里面键值对的形式，要么是[]数组形式，里面是表达式或者变量的形式。对于style绑定来说同理。

条件渲染

v-if指令

v-if 使用很简单的。这里要说一个小妙招，一般在前端Vue项目中，我们创建一个Vue文件，里面只写一个template，其实我们可以这样写：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

但是上面存在一个问题，就是当我们在username输入框中输入name后，更换loginType切换到email输入框，会发现之前的name值仍然存在，为了解决这种问题，Vue提供一个方案：只复用label标签，不复用input

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show指令

没有else，只有状态来判定。

不同点：v-if是真实的条件渲染，会确保条件块在切换当中适当的销毁与重建。v-if也是惰性：如果在初始化渲染的时候条件为假，那么什么也不做，在条件第一次变为真时才开始局部编译，此局部编译会被缓存起来。

v-show则始终被编译并且保留，只是CSS切换而已。相比之下，v-if有更高的切换消耗，而v-show有更高的初始化渲染消耗。因此，如果需要频繁切换使用v-show较好，如果在运行时条件不大可能改变则使用v-if比较好。

数组更新检测

在Vue中，包换一组观察数组发变异方法，只要执行下面的方法也会触发视图更新，因为改变了原数组。方法如下：

push() 往数组末尾添加，返回数组长度，会改变原数组

pop() 把数组末尾的项删除掉，返回删除的项的值，会改变原数组

shift() 把数组第一项删除，返回删除的第一项的值，会改变原数组

unshift() 将参数添加到原数组开头，返回数组的长度，会改变原数组

splice() 实现数组的删除、插入和替换，会改变原数组

sort() sort里面要添加函数才能实现排序，会改变原数组

reverse() 实现数组的倒序，会改变原数组

重塑数组

filter

map

slice

concat

indexOf

lastIndexOf

forEach

every

some

事件处理器

按键别名：

.enter

.tab

.delete

.esc

.up

.down

.left

.right

.space

表示点击键盘按钮后对应的事件

举个栗子：

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

对应的还有鼠标事件修饰符：.ctrl .alt .shift .meta

组件

父传子 --> props

子传父 --> emit events

兄弟组件 --> emit on 状态管理

插槽slot

父组件和子组件有关联的场景

异步组件

场景：将应用拆分为多个模块，按需从服务器下载，可以配合webpack的代码分隔功能使用。

总结：

Vue日常开发中可以优化的点：

性能方面：

使用v-once。场景：当组件中包含大量静态内容时，可以考虑使用v-once将渲染结果缓存起来
使用computed。场景：当组件中渲染的值需要大量的计算的时候，原因：只要依赖的状态不变，不会重新触发计算函数，使用缓存
v-if和v-show 的合理利用。v-show的使用场景：切换频繁。v-if的使用场景：切换不频繁。
v-for key值的取值尽量取数据中的ID，而不是下标。涉及到虚拟DOM的diff算法优化。
v-for和v-if不要放在一起使用。原因：Vue中v-for的优先级更高，而我们想要的结果是v-if优先判断。

代码美观方面：

使用修饰符。场景：例如当我们需要阻止事件冒泡，可以直接使用click.prevent
使用watch。场景：当需要根据状态变化进行异步处理的时候，可以使用watch监听状态变化，然后发起异步请求。
使用filter。场景：从接口拿到的值不可以直接渲染在前端页面上，可以在值的后面加 | 紧跟filter进行处理。

Vue基础学习笔记

Vue基本语法（日常开发足够了... hiahiahia）

计算属性和methods

计算属性和Watched

总结：

猜你喜欢

热点阅读