【vue】ramda.js在vue中的使用

1.package.json

"ramda": "^0.26.1”,

2.在vue中局部使用：

import * as R from ‘ramda'

console.log('=======Ramda',R.map(x=>x*2)([1,2,3]));

3.在vue2.0中全局使用：

index.js中

import * as R from 'ramda';

Vue.prototype.$R = R;

....

使用：

console.log('=======Ramda',this.$R.map(x=>x*2)([1,2,3]));

4.当然vue3.0中全局使用：

在vue.config.js

const webpack = require('webpack'),

path = require('path');

function resolve(dir = '') {

return path.join(__dirname, dir);

}

module.exports = {

publicPath: './',

chainWebpack: config => {

config.resolve.alias.set('#', resolve());

// config.resolve.alias.set('_f', resolve('src/assets/font'));

config.plugin('provide').use(webpack.ProvidePlugin, [{ R: 'ramda' }]);

},

};

5.ramda.js一些简单的使用

pre: 管道，用这个取代if else

//将多个函数合并成一个函数，并从左到右执行

//流水线：第一个的函数的返回值交给第二个，第二个的交给第三个，依次类推

var negative = x => -1 * x;

var increaseOne = x => x + 1;

var f = R.pipe(Math.pow, negative, increaseOne);

//第一个求3的4次方，返回值给后边方法，以此类推

console.log('R.pipe:',f(3,4));

//注意：compose从右边向左执行

(1) 逻辑运算======

//加

console.log("加",R.add(7)(10));

//减

console.log("减",R.subtract(10)(8));

//乘

console.log("乘",R.multiply(2)(5));

//除

console.log("除",R.divide(10.5)(3));

(2)函数==========

//从左到右依次执行，前边的运行结果会给后边函数

var negative = x => -1 * x;

var increaseOne = x => x + 1;

var f = R.pipe(Math.pow, negative, increaseOne);

console.log('R.pipe:',f(3,4));

//注意：compose从右边向左执行

(3)柯里化======

var addfour = (a,b,c,d)=> a,b,c,d;

var curr = R.curry(addfour);

var f = curr(1,2);

var g = f(3);

console.log("R.curry:" , f(3));

console.log("R.curry:" , g(4));

(4)forEach和map=========

var pri = x => console.log("forEach内输出" , (x,5));

console.log("R.forEach:" , R.forEach(pri)(nlist));

//map返回新数组

R.map(x => x * 2, [1, 2, 3])

//=> [2, 4, 6]

【vue】ramda.js在vue中的使用相关推荐

webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Invalid prop: type check fail
二级标题webpack-internal:///./node_modules/vue/dist/vue.esm.js:629 [Vue warn]: Invalid prop: type check ...
html、css、vue、js在VsCode中代码格式化（代码自动调准为标准格式）
目录一.安装以下几个 vscode 扩展程序: 例如二.打开 settings 文件三.将下面配置添加到 setting.json 文件中一.安装以下几个 vscode 扩展程序: ESLin ...
Filter在Vue，JS，JQ中的使用
vue 中的filter的使用: 关键字filter,官方文档(https://cn.vuejs.org/v2/guide/filters.html#ad)说明在vue中过滤器可以用在两个地方:双花括 ...
vue utils.js公共方法中axios请求返回数据
utils.js中 async getmaterialList() {try {const res = await axios.post('接口')return res.data.data} catc ...
搭建 VUE + NODE.JS + ElementUI 学习过程中问题总结
1.exports 和 module.exports require 用来加载代码,而 exports 和 module.exports 则用来导出代码. module.exports 初始值为一个空 ...
vue-cli3.x( bate版 ) 中 vue.config.js 配置含义
vue-cli3.0 中 vue.config.js 配置含义在vue-cli3.x( bate版 ) 中有些配置需要自己去配置需要在最外层同级目录下建立 vue.config.js 文件下面就 ...
vue在html中执行js代码,Vue.js 和 Vue.runtime.js
Vue官方中文文档: Vue有两个版本: 完整版:vue.js.vue.min.js(运行时版+编译器)(编译器:将模板字符串编译成为JS渲染函数的代码) 运行时版:vue.runtime.js.vu ...
webpack配置及vue.config.js
webpack Q:为什么要用webpack? A:1.当然是方便了开发啊,它的dev server 主力你的本地开发,只要一改代码自动构建编译完成还自动帮你刷新浏览器,这个开发体验谁用谁爽 2.减少 ...
Vue项目跨域解决方案与 vue.config.js 配置解析
为什么会出现跨域? 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说 ...
vue的js文件中获取vue实例
1.main.js导出vue实例: 1 var vue = new Vue({ 2 el: '#app', 3 router, 4 components: { App }, 5 template: ' ...

【vue】ramda.js在vue中的使用

【vue】ramda.js在vue中的使用相关推荐

最新文章

热门文章