vue字符串转数组,在项目中如何使用vue+props传递数据
vue字符串转数组,在项目中如何使用vue+props传递数据详细介绍
本文目录一览： vue怎么将一个数组中的一项字符串转换为数组，在哪写呢？怎么写呢？
字符串变成数组 就是把一个个的字符全部筛选出来
1 正则表达式
var string=“abcdedef”
var obj="string".replace(/(.)(?=[^$])/g,"$1,").split(","); //字符串转化为数组
2 split
var obj2 = string.split("");
在项目中如何使用vue+props传递数据
这次给大家带来在项目中如何使用vue+props传递数据，使用vue+props传递数据的注意事项有哪些，下面就是实战案例，一起来看一下。在 Vue 中，父子组件的关系可以总结为 props向下传递，事件向上传递。父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。 一、基本用法组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。在组件中，使用选项props 来声明需要从父级接收的数据， props 的值可以是两种， 一种是字符串数组，一种是对象。1.1字符串数组：
Vue.component('my-component4',{ props: ['message'], template: '
{{message}}
'});var app4 = new Vue({ el: '#app4'});渲染后的结果为：
props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template 及计算属性computed和方法methods 中使用。上例的数据message 就是通过props 从父级传递过来的，在组件的自定义标签上直接写该props 的名称，如果要传递多个数据，在props 数组中添加项即可。有时候，传递的数据并不是直接写死的，而是来自父级的动态数据，这时可以使用指令v -bind来动态绑定props 的值，当父组件的数据变化时，也会传递给子组件。
Vue.component('my-component5',{ props: ['myText'], template: '
{{myText}}
'});var app5 = new Vue({ el: '#app5', data: { text: '动态传递父组件数据' }});注意的几个点：1.如果你要直接传递数字、布尔值、数组、对象，而且不使用v-bind ，传递的仅仅是字符串。2.如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一个 todo 对象：1.2对象：当prop 需要验证时，就需要对象写法。一般当你的组件需要提供给别人使用时，推荐都进行数据验证，比如某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告。
Vue.component('my-component6',{ props: { 'myText':{ type: Number, //必须是数字类型的 required: true, //必须传值 default: 1 //如果未定义，默认值就是1 } }, template: '
{{myText}}
'});var app6 = new Vue({ el: '#app6', data: { number: 1 }});验证的type 类型可以是：? String? Number? Boolean? Object? Array? Functiontype 也可以是一个自定义构造器，使用instanceof 检测。当prop 验证失败时，在开发版本下会在控制台抛出一条警告。二、单向数据流Vue 2.x 与Vue l.x 比较大的一个改变就是， Vue2.x 通过props 传递数据是单向的了， 也就是父组件数据变化时会传递给子组件，但是反过来不行。业务中会经常遇到两种需要改变prop 的情况，2.1一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。（Prop 作为初始值传入后，子组件想把它当作局部数据来用；）这种情况可以在组件data 内再声明一个数据，引用父组件的prop ，示例代码如下：
Vue.component('my-component7',{ props: ['initCount'], template: '
{{count}}
', data: function(){ return { count: this.initCount } }});var app7 = new Vue({ el: '#app7'});组件中声明了数据count ， 它在组件初始化时会获取来自父组件的initCount ， 之后就与之无关了，只用维护c ount ， 这样就可以避免直接操作initCount 。2.2prop 作为需要被转变的原始值传入。（Prop 作为原始数据传入，由子组件处理成其它数据输出。）这种情况用计算属性就可以了， 示例代码如下：
Vue.component('my-component8',{ props: ['width'], template: '
组件内容
', computed: { style: function(){ return { width: this.width+'px' } } }});var app8 = new Vue({ el: '#app8'});注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Vue有哪些打包优化的方法解决双击与单击事件互相冲突
vue将时间string格式改为数字类型
varj=parselnt(“字符串”)；j就是数值类型了往数组中存值：定义数组一rowNums:[]往数组中值----this.rowNums.push(“string");
vue中使用localStorage存储信息
JSON。parse()作用是将字符串转化成json数组，JSON.stringify()作用是将json数组转换成字符串 对浏览器来说，使用Web Storage存储键值对比存储Cookie方式更直观，而且容量更大，它包含两种：localStorage和sessionStorage
所以上次使用cookie的时候就遇到了一个坑，设置后马上访问session会获取不到，蛋痛，还需要刷新一下，原因是： 当我们首次访问设置Cookie的页面是，服务器会把设置的Cookie值通过响应头送过来，告诉浏览器将cookie存储的本地相应文件夹中(注意：第一次访问时本地还没有存储Cookie，所以此时获取不到值)； 当第二次访问时（或是进行cookie设置后，过期前所有的访问）时，请求头信息中你都会把Cookie值携带。
localStorage有效期是永久的。一般的浏览器能存储的是5MB左右。sessionStorage api与localStorage相同。 sessionStorage默认的有效期是浏览器的会话时间（也就是说标签页关闭后就消失了）。 localStorage作用域是协议、主机名、端口。（理论上，不人为的删除，一直存在设备中） sessionStorage作用域是窗口、协议、主机名、端口。
知道了这些知识点后，你的问题就很好解决了。 localStorage是window上的。所以不需要写this.localStorage，vue中如果写this，是指vue实例。会报错
Vue 之 push、pop、shift、unshift、splice、sort、reverse
Vue 将被侦听的数组的变更方法进行包裹，所以他们也将会处罚视图更新
第一个参数：表示从哪个索引位置（index）添加/删除
第二个参数：要删除的项目数量。如果设置为 0 ，则不会删除项目
第三个参数：可选。向数组添加的新项目
例：splice(1) 保留前一个元素之后的全部删除， splice(2) 保留前两个元素之后全部删除
例：splice(2,1) 从索引位置（index：2）删除，删除一个元素
例：splice(1,2,'a','b') 从索引微信（index：1）删除，删除2个元素，并添加2个新元素来代替被删除的元素
例：splice(1,0,'a') 从索引位置（index：1）添加，添加两个元素
arr.sort(sortby)可选。规定排列顺序。必须是函数。
例：按字母顺序进行排列
例：大小排列
reverse() 方法颠倒数组中元素的顺序。
它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
filter() 方法是创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat() 方法用于连接两个或多个数组。
slice() 方法可从已有的数组中返回选定的元素。
split() 方法用于把一个字符串分割成字符串数组。
Vue中使用RSA分段加解密
// Convert a hex string to a byte array? 16进制转byte数组
function hexToBytes(hex) {
? for (var bytes = [], c = 0; c < hex.length; c += 2)
? ? bytes.push(parseInt(hex.substr(c, 2), 16));
? return bytes;
}
// Convert a byte array to a hex string byte数组转16进制
function bytesToHex(bytes) {
? for (var hex = [], i = 0; i < bytes.length; i++) {
? ? hex.push((bytes[i] >>> 4).toString(16));
? ? hex.push((bytes[i] & 0xF).toString(16));
? }
? return hex.join("");
};
分段加解密是自己写的方法需要进行十六进制和byte数组进行相互转换（具体为什么我也不清楚，希望有知道的大神，可以为我指点一下）
在原有的JSEncrypt中添加分段加解密的方法
JSEncrypt.prototype.encryptLong2 = function (string) {
? var k = this.getKey();?
? try {
? ? var ct = "";? ?? //RSA每次加密最大117bytes，需要辅助方法判断字符串截取位置
? ? //1.获取字符串截取点
? ? var bytes = new Array();
? ? bytes.push(0);
? ? var byteNo = 0;
? ? var len, c;
? ? len = string.length;
? ? var temp = 0;
? ? for (var i = 0; i < len; i++) {
? ? ? c = string.charCodeAt(i);
? ? ? if (c >= 0x010000 && c <= 0x10FFFF) {
? ? ? ? byteNo += 4;
? ? ? } else if (c >= 0x000800 && c <= 0x00FFFF) {
? ? ? ? byteNo += 3;
? ? ? } else if (c >= 0x000080 && c <= 0x0007FF) {
? ? ? ? byteNo += 2;
? ? ? } else {
? ? ? ? byteNo += 1;
? ? ? }
? ? ? if ((byteNo % 117) >= 114 || (byteNo % 117) == 0) {
? ? ? ? if (byteNo - temp >= 114) {
? ? ? ? ? bytes.push(i);
? ? ? ? ? temp = byteNo;
? ? ? ? }
? ? ? }
? ? }
? ? //2.截取字符串并分段加密
? ? if (bytes.length > 1) {
? ? ? for (var i = 0; i < bytes.length - 1; i++) {
? ? ? ? var str;
? ? ? ? if (i == 0) {
? ? ? ? ? str = string.substring(0, bytes[i + 1] + 1);
? ? ? ? } else {
? ? ? ? ? str = string.substring(bytes[i] + 1, bytes[i + 1] + 1);
? ? ? ? }
? ? ? ? var t1 = k.encrypt(str);
? ? ? ? ct += t1;
? ? ? };
? ? ? if (bytes[bytes.length - 1] != string.length - 1) {
? ? ? ? var lastStr = string.substring(bytes[bytes.length - 1] + 1);
? ? ? ? ct += k.encrypt(lastStr);
? ? ? }
? ? ? return hexToBytes(ct);
? ? }
? ? var t = k.encrypt(string);
? ? var y = hexToBytes(t);
? ? return y;
? } catch (ex) {
? ? return false;
? }
};
// utf-8数组转字符串
function utf8ByteToUnicodeStr(utf8Bytes) {
? var unicodeStr = "";
? for (var pos = 0; pos < utf8Bytes.length;) {
? ? var flag = utf8Bytes[pos];
? ? var unicode = 0;
? ? if ((flag >>> 7) === 0) {
? ? ? unicodeStr += String.fromCharCode(utf8Bytes[pos]);
? ? ? pos += 1;
? ? } else if ((flag & 0xFC) === 0xFC) {
? ? ? unicode = (utf8Bytes[pos] & 0x3) << 30;
? ? ? unicode |= (utf8Bytes[pos + 1] & 0x3F) << 24;
? ? ? unicode |= (utf8Bytes[pos + 2] & 0x3F) << 18;
? ? ? unicode |= (utf8Bytes[pos + 3] & 0x3F) << 12;
? ? ? unicode |= (utf8Bytes[pos + 4] & 0x3F) << 6;
? ? ? unicode |= (utf8Bytes[pos + 5] & 0x3F);
? ? ? unicodeStr += String.fromCharCode(unicode);
? ? ? pos += 6;
? ? } else if ((flag & 0xF8) === 0xF8) {
? ? ? unicode = (utf8Bytes[pos] & 0x7) << 24;
? ? ? unicode |= (utf8Bytes[pos + 1] & 0x3F) << 18;
? ? ? unicode |= (utf8Bytes[pos + 2] & 0x3F) << 12;
? ? ? unicode |= (utf8Bytes[pos + 3] & 0x3F) << 6;
? ? ? unicode |= (utf8Bytes[pos + 4] & 0x3F);
? ? ? unicodeStr += String.fromCharCode(unicode);
? ? ? pos += 5;
? ? } else if ((flag & 0xF0) === 0xF0) {
? ? ? unicode = (utf8Bytes[pos] & 0xF) << 18;
? ? ? unicode |= (utf8Bytes[pos + 1] & 0x3F) << 12;
? ? ? unicode |= (utf8Bytes[pos + 2] & 0x3F) << 6;
? ? ? unicode |= (utf8Bytes[pos + 3] & 0x3F);
? ? ? unicodeStr += String.fromCharCode(unicode);
? ? ? pos += 4;
? ? } else if ((flag & 0xE0) === 0xE0) {
? ? ? unicode = (utf8Bytes[pos] & 0x1F) << 12;;
? ? ? unicode |= (utf8Bytes[pos + 1] & 0x3F) << 6;
? ? ? unicode |= (utf8Bytes[pos + 2] & 0x3F);
? ? ? unicodeStr += String.fromCharCode(unicode);
? ? ? pos += 3;
? ? } else if ((flag & 0xC0) === 0xC0) { //110
? ? ? unicode = (utf8Bytes[pos] & 0x3F) << 6;
? ? ? unicode |= (utf8Bytes[pos + 1] & 0x3F);
? ? ? unicodeStr += String.fromCharCode(unicode);
? ? ? pos += 2;
? ? } else {
? ? ? unicodeStr += String.fromCharCode(utf8Bytes[pos]);
? ? ? pos += 1;
? ? }
? }
? return unicodeStr;
}
JSEncrypt.prototype.decryptLong2 = function (string) {
? var k = this.getKey();
? var MAX_DECRYPT_BLOCK = 128;//分段解密最大长度限制为128字节
? try {
? ? var ct = "";
? ? var t1;
? ? var bufTmp;
? ? var hexTmp;
? ? var str = bytesToHex(string); //这块可能有些没有必要，因为sting参数已经及转为byte数组
? ? var buf = hexToBytes(str);
? ? var inputLen = buf.length;
? ? //开始长度
? ? var offSet = 0;
? ? //结束长度
? ? var endOffSet = MAX_DECRYPT_BLOCK;
? ? //分段解密
? ? while (inputLen - offSet > 0) {
? ? ? if (inputLen - offSet > MAX_DECRYPT_BLOCK) {
? ? ? ? bufTmp = buf.slice(offSet, endOffSet);
? ? ? ? hexTmp = bytesToHex(bufTmp);
? ? ? ? t1 = k.decrypt(hexTmp);
? ? ? ? ct += t1;
? ? ? ? console.log('分段' + offSet)
? ? ? ? console.log(hexTmp)
? ? ? ? console.log(t1)
? ? ? } else {
? ? ? ? bufTmp = buf.slice(offSet, inputLen);
? ? ? ? hexTmp = bytesToHex(bufTmp);
? ? ? ? t1 = k.decrypt(hexTmp);
? ? ? ? ct += t1;
? ? ? ? console.log('分段' + offSet)
? ? ? ? console.log(hexTmp)
? ? ? ? console.log(t1)
? ? ? }
? ? ? offSet += MAX_DECRYPT_BLOCK;
? ? ? endOffSet += MAX_DECRYPT_BLOCK;
? ? }
? ? return ct;
? } catch (ex) {
? ? return false;
? }
};
function arrayBufferToBase64(buffer) {
? var binary = '';
? var bytes = new Uint8Array(buffer);
? var len = bytes.byteLength;
? for (var i = 0; i < len; i++) {
? ? binary += String.fromCharCode(bytes[i]);
? }
? return window.btoa(binary);
}
function base64ToArrayBuffer(base64) {
? var binary_string = window.atob(base64);
? var len = binary_string.length;
? var bytes = new Uint8Array(len);
? for (var i = 0; i < len; i++) {
? ? bytes[i] = binary_string.charCodeAt(i);
? }
? return bytes;
}
const $getrsa = function (password) {
? let encrypt = new JSEncrypt()
? encrypt.setPublicKey('-----BEGIN PUBLIC KEY-----公钥----END PUBLIC KEY-----') // 公钥
? let getrsadata = arrayBufferToBase64(encrypt.encryptLong2(password)); //将加密的数据转码为base64
? return getrsadata //加密后的数据
}
const $decrsa = function (passwords) {
? let encrypt = new JSEncrypt()
? encrypt.setPrivateKey('-----BEGIN PRIVATE KEY-----私钥-----') // 私钥
? let decrsadata = encrypt.decryptLong2(base64ToArrayBuffer(passwords)) // password要解密的数据 先转为byte数组在进行解码
? return decrsadata //解密后的数据
}
后台如果进行分段加密请严格使用117字节划分，前端解析请严格使用128字节划分。
将数组中的字符串转数字
''在vue项目中，有很多组件是需要靠数组回显的，并且必须要求数组中是数值类型，
比如省市区选择时，后端返回的id是逗号分隔的字符串，如“2,3,4”，?我们需要先转成数组.split(',') ，但是数组的格式是这样的?arr = ['2','3','4']，?仍然无法回显?
这时候，我们就需要将数组中的字符串转成数字
arr.map(i => parseInt(i, 0))
vue从后台获取的数据赋值给全局数组
data () {
return {
Kanban_img:[],
},
created(){
this.getImg();
},
methods: {
getImg(){
var _this = this;
var params={
"xxx":xxx，
};
//获取图片
commonApi(params)
.then(res => {
if(res.data.returns[0].length>0){
//方法1
/* var str = "";
res.data.returns[0].forEach(item => {
str += item.kanban_img + ",";
});
str = str.substring(0, str.length);
_this.Kanban_img = str.split(",");
console.log(_this.Kanban_img) */
//方法2
var aList=res.data.returns[0]
for (let i = 0; i < aList.length; i++) {
if (aList[i].Access != 0) {
_this.Kanban_img.push(baseURL+aList[i].kanban_img)
}
}
}
})
.catch(res => {
})
},
}
Vue基础知识
数据双向绑定，组件化，单文件组件
全局api： vue.extend 、 vue.set 实例选项: new Vue() 、 el 、 data 、 compents 都是vue实例选项 实例属性和方法： vm.$on 、 vm.$data 、 vm.$destroy() 在$都是vue的实例和方法 指令： directive 内置组件：
、
、
数组中不可用的方法：slice，concat； 直接修改数组list[i] = 值，不可以这样直接修改； Vue.set(数组，索引，{值}) vue的全局方法set来更改数组的某一项的值
标签属性和条件渲染 标签属性： v-bind：href='link"; 等效于 :href="link" 动态绑定； 条件渲染： v-if 、 v-else 、 v-show ； 数据绑定： {{...}} 、 v-html (原始-HTML)、 v-text ；
事件绑定-内置事件绑定，自定义事件绑定 v-on:click="run" 等效于 @:click="run" 事件绑定； 自定义事件绑定： 父组件自定义事件
子组件触发 my-event 自定义事件； this.$emit('my-event', opation)； 父组件执行toggle 函数；
计算属性和数据监听 computed选项 -计算属性：根据我们调用属性来跟新，调用的属性没有变更，我们computed选项里面的方法读取的是缓存；
页面内容响应数据v-once 如果你需要页面内容响应数据的变化，就不加v-once。 如果你需要页面内容渲染后，不随数据的变化而变化，就加上这个。 对于一些固定不变的组件，在调用时我们可以加上v-once，只在第一次渲染执行，保存数据在内存中，后面再调用直接从内容中提取，提高执行效率。
应用
组件的通信
等同于
动态绑定组件 注：Vue有个单项数据流的概念：即父组件传递给子组件的参数，子组件不能直接修改；防止引用类型参数被修改后，如果父组件中其他地方也使用了此参数会受到影响。
子组件 props 接受的两种形式： 数组： ['first-name','two-name'] ，从父组件传递两个属性值； 动态展现： {{firstName}} 对象：
slot：插槽 父组件插件里面定义的内容放到子组件 slot 中：
子组件
vue高级功能--过渡和动画
自定义指令：
使用 vue-cli的优势： 成熟的vue项目架构设计； 本地测试服务器； 集成打包上线方案 webpack
npm install vue-cli -g ：全局安装vue-cli vue init webpack my-project ：初始化项目 npm install 安装项目依赖
npm run dev ：在localhost启动测试服务器； npm run bulid ：生成上线目录（部署）
a、安装 vue-router
b、配置路由
6、关闭eslint dev模式下，默认会做eslint检测，若要关闭，打开 config/index.js ，设置 useEslint: false ，${}占位符，多行字符串
7、生命周期
8、支持es6 es6中很多新特性很好用class、promise、then、catch、...（数组转换符号）、函数设置参数默认值等 a、安装babel-polyfill
b、在入口main.js文件当中引入:
c、找到build文件夹下的webpack.base.conf.js
文章参考： 慕课网-欧米雪儿lyy