uniapp 个人学习笔记

1、Vue 语言学习

<template>***<template>

<view></view>  			视图容器
<button></button>		按钮部件
<input></input>			输入部件

class="input_view"		引用样式表-包含部件的样式结构

v-if="true"				条件渲染
v-else-if="true"		条件渲染
v-else					条件渲染
v-for="(item, index) in items"			基于一个数组来渲染一个列表
例{
	<view v-for="(item, index) in items">
    	第{{ index }}本书:  {{ item.book }}
	</view>
	data() {
    return {
        items:[
            { book:'JavaScript高级程序设计' },
            { book:'JavaScript设计模式与开发实践' },
            { book:'你不知道的JavaScript' },
            { book:'JavaScript DOM编程艺术' }
        ]
    }
}

}
v-for="(value, name, index) in object"	用 v-for 可以遍历一个对象的属性，即 property
例{
	<!-- 对象 -->
	<view v-for="(value, name, index) in object">
    	信息{{ index }}：{{ name }} = {{ value }}
	</view>
	object:{
    	name: 'HLS',
   	 	age: 18,
    	profession: '前端开发工程师'
	}
}
@click="connect_TCP()"	按下绑定事件函数,同 v-bind:click=
@input="input_tcp_ip" 	输入捕获

2、ccs

<style>**** </style>

字体：
font-size:26rpx;				字体大小
text-decoration:underline		下划线	
text-decoration:line-through	删除线
text-decoration:overline		上划线
font-weight:bold;				字体加粗
font-style: italic;				字体倾斜
text-align:left					靠左对齐
text-align:right				靠右对齐：
text-align:center				居中对齐
text-align:justify 				两端对齐
line-height:50rpx;				文字的上下行间距
color:red;						文字颜色

border-radius：20upx			设置圆角
border:1upx						设置边框宽度
border-color:#000000			设置边框颜色
padding-left:30upx				内容和边框之间的距离

flex布局
详细：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
display: flex;
flex-direction: 			属性决定主轴的方向
	row（默认值）：主轴为水平方向，起点在左端。
	row-reverse：主轴为水平方向，起点在右端。
	column：主轴为垂直方向，起点在上沿。
	column-reverse：主轴为垂直方向，起点在下沿。

3、js语言

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。总共就两个参数，一个是回调函数，一个是指定对应的this。

var newArr = [1, 2, 3].map((item, index, arr) => {
  console.log(item, index, arr)
  return item * 2
})
/* 
1 0 [ 1, 2, 3 ]
2 1 [ 1, 2, 3 ]
3 2 [ 1, 2, 3 ]
*/

parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是 2-36 之间的整数，表示被解析字符串的基数。

console.log(parseInt('10')) // 10
console.log(parseInt('10a')) // 10

console.log(parseInt('111', 2)) // 7
console.log(parseInt('A12', 16)) // 2578

slice(start,end)：方法可从已有数组中返回选定的元素，返回一个新数组，包含从start到end（不包含该元素）的数组元素。
注意：该方法不会改变原数组，而是返回一个子数组，如果想删除数组中的一段元素，应该使用Array.splice()方法。

start参数：必须，规定从何处开始选取，如果为负数，规定从数组尾部算起的位置，-1是指最后一个元素。
end参数：可选（如果该参数没有指定，那么切分的数组包含从start倒数组结束的所有元素，如果这个参数为负数，那么规定是从数组尾部开始算起的元素）。

var arr = [1,2,3,4,5];
console.log(arr.slice(1));//[2,3,4,5]  选择序列号从1到最后的所有元素组成的新数组。
console.log(arr.slice(1,3))//[2,3]  不包含end，序列号为3的元素

var str = "Hello,world!";
var sliceStr = str.slice(1,5);//ello (不包含end)
var subStr = str.substring(1,5);//ello

splice()：该方法向或者从数组中添加或者删除项目，返回被删除的项目。（该方法会改变原数组）
splice（index,howmany,item1,…itemX）

index参数：必须，整数，规定添加或者删除的位置，使用负数，从数组尾部规定位置。
howmany参数：必须，要删除的数量，如果为0，则不删除项目。
tem1,...itemX参数：可选，向数组添加的新项目。

var arr = [1,2,3,4,5];
console.log(arr.splice(2,1,"hello"));//[3]  返回的新数组
console.log(arr);//[1, 2, "hello", 4, 5]  改变了原数组