Vue 实用知识点

本文主要是介绍Vue 实用知识点，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、过滤器

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

1. 定义过滤器

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

// 组件过滤器（局部）：
filters: {
  capitalize: function (value) {
   return ....
  }
}

// 在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
  return 
})

new Vue({
  // ...
})
复制代码

2. 过滤器串连

（1）过滤器能够使用管道（|）符号进行串连，并通过一系列过滤器转换一个值。
{{ message | filterA | filterB }}
// 在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

（2）过滤器是 JavaScript 函数，因此可以接收参数
{{ message |filter('age1', age2) }}
// filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。
复制代码

• 过滤器(能传参)=>绑定属性和放在插值里 （filter）
• 计算属性(不能传参)=>绑定属性和放在插值里（计算属性的值不能改，只能读） （computed）
• 方法(可以传参)=>可以绑定属性和事件和放在插值里 （method）

二、动态图片和动态图片背景(图片在本地，非绝对地址)

<img :src='imgUrl'> //如果是写绝对地址没问题，但是相对地址就不行了，这是webpack的原因
复制代码

• 路径怎么写都是找不到的，除非把图片放到static文件夹里面，然后写相对路径才行,当然这种方法是不会用的；
• 在data里或者方法里require(url)，这种方法也不可取，太麻烦了；
• 如果是背景图片的话推荐写固定css，然后用绑定动态class或计算属性或过滤器来切换class；

.class1{
    background:url(url1)
}
.class2{
    background:url(url2)
}

<div :class='computedStyle'></div>
computedStyle(){
    if(xxx){
    return {.class1:true}
    }else{
    return {.class2:true}
    }
}
复制代码

三、vue.nextTick()方法的使用详解

当数据更新了，在dom中渲染后，自动执行该函数

1. input的focus要想有效果要放在$nextTick里，或者用setTimeout

this.$nextTick(() => {
    this.$refs.inout.$el.focus();
})
复制代码

2. Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

  created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
        that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
  },
复制代码

2. 当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它

vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码

四、GEtters可以将state里的数据过滤后返回（推荐）

getters: {
    formatTime: _s => formatTime(_s.timeStr)
}
复制代码

这篇关于Vue 实用知识点的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！