vue.js里面的变量可以写运算符吗

vue.js里面的变量可以写运算符吗,第1张

在Vuejs中,模板表达式中可以使用一些基本的运算符和表达式来对变量进行处理和计算。例如,可以使用加减乘除、取模、三目运算符等等。

下面是一些Vuejs模板表达式中可用的运算符和表达式:

数学运算符:+,-,,/,%,++

逻辑运算符:&&,||,!

比较运算符:<,>,<=,>=,==,!=

三目运算符:condition expr1 : expr2

括号:用于改变运算顺序

例如,假设有一个Vue组件的data对象中定义了一个变量a,可以在Vue的模板中使用如下表达式对其进行计算:{{ a + 1 }}

{{ a 2 }}

{{ a > 0 'positive' : 'non-positive' }}

需要注意的是,在Vuejs中的模板表达式中并不支持所有的JavaScript运算符和语句,例如位运算、赋值语句等等。如果需要使用更为复杂的运算逻辑,建议使用计算属性或者在methods中定义函数来实现。

uni-app项目,在mainjs文件中使用Vueprototype方法挂载一个可用于全局页面的变量

通过这个方法,可以在其他页面直接进行使用

/store/indexjs:

/store/gettersjs:

其它页面获取存储的signingDataList值:

就是 id="app" 那个div 编译号后估计没有id属性了 最外层的div

有些没有最外层的div的 有个笨办法

一层层往外找

如果用的是element框架,那他每个dom几乎都有 vue 属性

直接

就可以了

伪数组:不是一个真正的数组, 但是有 length 属性, 可以通过下标访问。

例如:

[]slicecall(obj)

参见 MDN关于nodeType的资料

IE8不支持ObjectdefineProperty, 所以在使用了此方法的vue版本中, vue项目不能在IE8上运行

返回所有的自身可枚举属性组成的数组。

返回一个布尔值, 表示prop是否是obj自身的属性

文档碎片

Document: 页面中用于保存多个element的容器,里面的元素如果发生改变, 势必会导致页面发生改变。 如果多个元素发生改变, 势必会影响页面的性能。

DocumentFragment: 内存中用于保存多个变量的容器,内部的元素发生改变, 不会影响界面。不属于dom树的一部分,如果多个元素需要修改内容, 将其放入文档碎片中, 一并修改(修改时不存在性能问题), 再最终一次渲染到页面上, 可以极大的提升元素修改的性能。

参见 MDN关于文档碎片的说法

while(child=ulfirstChild) 做了两件事:

列表被更新了, 从原来的内容,从变成了 hiahiahia

上面只有三个 li , 如果是很多给就能省下很多的性能开销。

在日常的功能练习和调试过程中,需要一个demo项目进行功能测试,由于频繁vue页面的同时,又要再routerjs文件里面注册路由,感觉有点无聊和枯燥。基于此出发点,考虑能否自动读取文件夹下的文件进行路由注册。

借鉴思路:

参考vue的功能基础组件的自动化全局注册,看到一个requirecontext方法,可以读取某个文件夹下的文件信息。因此考虑,使用这个方法,获取views文件夹下的vue页面,文件夹名称作为路由名称

requirecontext的使用介绍:

一个webpack的api,通过执行requirecontext函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

页面代码:

如下图示,views文件夹下的内容,都需要进行路由注册。

文件的路径有2种,(1)简单的vue功能页面,直接挂在views文件夹下;(2)复杂的页面,在views下在新建文件夹进行处理。

目前需要自动注册的路由页面,是针对“直接挂在views文件夹”下的页面。(因为views下的二级页面,暂时没有想到好的方案)

router/indexjs页面代码

心路历程:

(1)一开始的想法,是想着用数组对象的方式定义好,路由名称和引入的路径地址,但是觉得还是不够自动化,新建vue文件的时候还是需要手动添加;

(2)后来想到用使用requirecontext方法得到fileName,然后根据字符串裁减和拼接,得到我所需的url和文件相对路径;

例如: component: () =>import(变量),但是后来发现,import()里面,不能使用变量!!!!!!!!!

原因:根据es6module语法,由于import是静态执行,所以不能使用表达式和变量这些只有在运行时才能得到结果的语法结构。

(3)由由于import的使用限制,不能动态使用() =>import的语法,因此在考虑,能否直接替换掉这种异步加载引入的写法。经过分析,得出pathConfig字段里面有一个属性的内容,是指定的vue页面的default模块内容。经测试,可以使用。

pathConfig的打印内容如下示:

(4)因此“views”文件夹下的"vue"文件,引入成功,并用变量routerAry存储起来,使用concat方法把其他需要手动注册的路由信息,连接起来,进行路由注册。

定义全局变量

原理:

设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在mainjs里面使用Vueprototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可。

全局变量模块文件:

Globalvue文件:

使用方式1:

在需要的地方引用进全局变量模块文件,然后通过文件里面的变量名字获取全局变量参数值。

在text1vue组件中使用:

使用方式2:

在程序入口的mainjs文件里面,将上面那个Globalvue文件挂载到Vueprototype。

import global_ from '/components/Global'//引用文件

VueprototypeGLOBAL = global_//挂载到Vue实例上面

接着在整个项目中不需要再通过引用Globalvue模块文件,直接通过this就可以直接访问Global文件里面定义的全局变量。

text2vue:

Vuex也可以设置全局变量:

通过vuex来存放全局变量,这里东西比较多,也相对复杂一些,有兴趣的小伙伴们,可自行查阅资料,折腾一波、

定义全局函数

原理

新建一个模块文件,然后在mainjs里面通过Vueprototype将函数挂载到Vue实例上面,通过this函数名,来运行函数。

1 在mainjs里面直接写函数

简单的函数可以直接在mainjs里面直接写

组件中调用:

2 写一个模块文件,挂载到mainjs上面。

basejs文件,文件位置可以放在跟mainjs同一级,方便引用

mainjs入口文件:

组件里面调用:

后话

上面就是如何定义全局变量 全局函数的内容了,这里的全局变量全局函数可以不局限于vue项目,vue-cli是用了webpack做模块化,其他模块化开发,定义全局变量、函数的套路基本上是差不多。

如果没学到jquery的情况下:var input_value = documentgetElementById(' in ')value; 如果学了jquery: var input_value = $("#in")val() ;

以上就是关于vue.js里面的变量可以写运算符吗全部的内容,包括:vue.js里面的变量可以写运算符吗、main.js中Vue.prototype定义全局变量、原生js获取编译好的vue工程里面的对象等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/10111120.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存