当前位置:首页 > 日记 > 正文

Vue开发过程中遇到的疑惑知识点总结

Vue开发过程中遇到的疑惑知识点总结

前言

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。最近终于有时间空下来,所以想着把在使用vue过程遇到的一些问题疑惑总结处理,方便自己或者有需要的朋友们参考,下面话不多说了,来看看详细的介绍吧。

一、计算缓存computed与Methods

html代码:

 <div id='app'> <p>{{ msg }}</p>  <p>reverse {{ reverse2 }}</p></div>

JS

 var app = new Vue({ el : '#app'  data : { msg : '初始值' }   , methods : { reverse : function(){  this.msg = this.msg.split('').reverse().join(''); } }, created : function(){ console.log('msg is creadted' + new Date() ); }, computed : {  reverse2 : function(){  return this.msg.split('').reverse().join('') + new Date(); } }});

计算属性就可以看作普通属性一样来使用

更改html

 <div id='app'><p>{{ msg }}</p><button v-on:click='reverse'>{{ new Date()}} </button> </div>

结论:

  • 相同点: 两者完成的功能都是一样的.
  • 不同点: 计算属性computed更依赖缓存,也就是说只要msg(你的数据)不发生变化,reverse2这个计算属性就不会重新计算,还是会使用之前的.而Methods是你每一次调用就会重新进行计算,重新渲染.

所以如果你的计算属性很复杂,就可以考虑使用计算属性,利用它的缓存可以保持很好的性能.

二、v-if和v-show区别

v-if: 如果初始渲染条件为false,那什么都不做,第一次为true时候,会进行局部编译,这个编译会缓存起来.当条件再为false会销毁事件监听器和子组件.

v-show:始终存在dom里面,也就是说始终被编译了.之前按照display属性来切换.

三、重塑数组的概念

就是说有些数组方法调用后会改变原数组—就是变异方法

调用后不会改变原数组就是非变异方法

Vue不可以做的事(关于数组重塑)

  • 直接通过设置一个项的索引值. vm.items[indexOfItem] = newValue
  • 直接修改数组长度. vm.items.length = newLength

针对上述两种提供我们可以使用

Vue.set()splice()

四、显示数组的过滤与排序

通过返回一个过滤或者排序的数组的计算属性

//html<ul> <li v-for='n in soets'>{{ n }}</li></ul>//jscomputed : { soets : function(){ return this.number.filter(function(num){  return num > 2; }) }}

通过methods来实现:

//html <ul> <li v-for='n in sort()'>{{ n }}</li></ul>//jsmethods : { sort : function(){  return this.number.filter(function(num){  return num >2  }); } },

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

ps如何进行抠图更换背景

ps如何进行抠图更换背景

抠图,方法,背景,电脑软件,ps,  如果图片的背景需要更换,大家可以使用ps来抠图再换背景。其实这个也不算太难,下面就让小编告诉你ps如何进行抠图更换背景的方法,一起学习吧。ps进行抠图更换背景的方法首先第一步抠图1、打开PS软件,在PS界面里…

浅谈JavaScript异步编程

浅谈JavaScript异步编程

异步编程,浅谈,电脑软件,JavaScript,在一年前初学js的时候,看过很多关于异步编程的讲解。但是由于实践经验少,没有办法理解的太多,太理论的东西也往往是看完就忘。经过公司的三两个项目的锻炼,终于对js异步编程有了比较具体的理解。但始终入门…

js判断是否是手机页面

js判断是否是手机页面

手机页面,判断是否,电脑软件,js,话不多说,请看代码:<script>if (/mobile/i.test(navigator.userAgent) || /android/i.test(navigator.userAgent)) document.body.classList.add('mobile');window.addEventListener('load', function(eve…

excel 用函数开平方的教程

excel 用函数开平方的教程

教程,函数,开平,电脑软件,excel,  Excel中如何利用函数进行开平方操作呢?接下来是小编为大家带来的excel 用函数开平方的教程,供大家参考。excel 用函数开平方的教程(一)步骤:比如求 A1单元格 的算术平方根,只需在 B1单元格 输入公式"=powe…

Javascript仿京东放大镜的效果

Javascript仿京东放大镜的效果

京东,效果,电脑软件,Javascript,随便找一个图片吧。小伙伴们,想怎么玩就怎么玩(注意路径),亲自测试,绝对没问题。话不多说,请看代码:<html><head><meta charset="utf-8"><style type="text/css">body,div{margin: 0; padding: 0;}#zhuti{ marg…

Vue监听数组变化源码解析

Vue监听数组变化源码解析

数组,源码,电脑软件,Vue,上一篇的代码中,忽略了对数组的处理,只关心了需要关心的部分,假装数组不存在。这一篇开始考虑数组的问题。从最简单的入手先考虑一个问题,如何监听数组中的对象变化?忽略掉数组本身及其中的一般值,只考虑对象数组中的对象…

怎么设置PPT多影片播放效果

怎么设置PPT多影片播放效果

设置,影片,效果,多图,电脑软件,  在PPT幻灯片的制作过程中,经常需要在一张幻灯片上摆放多张图片、照片,但是空间有限,无法在一张幻灯片排放多张大的图片。以下是小编为您带来的关于设置PPT多图片影片播放效果,希望对您有所帮助。设置PPT多图…

JavaScript获取URL参数的方法之一

JavaScript获取URL参数的方法之一

方法,参数,电脑软件,JavaScript,URL,若地址栏URL为:abc.html?m=tomms&c=allsearchlist&pageNo=1&pageNum=20&text=1<script> //JavaScript获取url,并把url中的参数变成数组的方法,arr数组的值就是各参数值 var url = window.document.locati…

word2010如何使用插入对象功能将文

word2010如何使用插入对象功能将文

对象,文件,文档,功能,如何使用,  word2010中插入对象功能想必大家都有所接触过吧。在Word2010文档中,用户可以将整个文件作为对象插入到当前文档中。此功能有一个好处就是嵌入到Word2010文档中的文件对象可以使用原始程序进行编辑。以下是…

Excel中2007版进行设置工作表背景

Excel中2007版进行设置工作表背景

设置,操作,背景,工作,操作步骤,  我们在制作EXCEL工作表的时候,可以给表设置一个漂亮的背景,那要怎么设置呢? 今天,小编就教大家在Excel中2007版进行设置工作表背景的操作使用。Excel中2007版进行设置工作表背景的操作步骤首先选取需要设置…

Excel表格怎么设置半圆饼图数据标

Excel表格怎么设置半圆饼图数据标

数据,饼图,设置,标签,半圆,  Excel表格制作,有时候为了我们更直观的看到数据的比较,一般会用饼图形式来形成对比,但是饼图一般都是一整个圆,我们怎样才能制作半圆饼图呢?以下是小编为您带来的关于Excel设置半圆饼图数据标签,希望对您有所帮助…

ppt2010中怎么设置幻灯片自动循环

ppt2010中怎么设置幻灯片自动循环

设置,循环播放,方法,幻灯片,电脑软件,  ppt2010中怎么设置幻灯片自动循环播放?在我们的日常工作中,越来越需要频繁使用PPT,于是PPT抛头露面的场合越来越多,我们可能会需要PPT自动循环播放。下面小编就教你ppt2010设置幻灯片自动循环播放的…