Vue开发小程序 安装软件到 Vue 语法 到页面搭建 到 Hello World

安卓接收小程序开发-———— 使用的是Vue uni-app框架

1.使用编译器HBuilderX 运行工具是微信开发工具 这俩个工具 官网都可以下载

2.下载后需要在HBuilderX中配置微信开发者工具的路径
在工具里有个设置 然后看图

然后在微信开发者工具上 的设置 打开代理设置 把服务端口打开 如图：

然后就可以写代码了

真正的代码笔记开始

1.Vue的语法笔记

1.Vue事件处理
v-on:click=“greet” 或者 @click=“greet”
v-on：click.stop
v-on:click.prevent 阻止默认事件
v-on:click.left
v-on:click.once 只生效一次
v-on:keyup.enter enter tab delete(删除和退格) sec space up down left rght
2.条件渲染：
v-if
v-else
v-else-if
v-show
v-cloak控制html代码隐藏
3.for循环列表

4路由跳转

接收数据

《暂时语法先记录这么多 后续再添加》

2.uni-app学习笔记

首先 了解下 这种UI绘制界面

Css学习
可查询此地址 ：https://www.runoob.com/cssref/pr-class-position.html
Css所有属性地址
学习绘制页面

flex布局在网页布局应用广泛。优点：响应式、使用简单、布局灵活
1.
要点1：display:flex
给元素添加了display:flex，那么该元素就会变成flex容器

要点2：flex-direction
flex-direction设置父容器的排列方向，那么子元素就会以row（水平方向）或column（垂直方向）排列。
flex-direction属性：
row（默认值）子元素按水平方向排列
column 子元素按垂直方向排列
row-reverse （子元素按row的相反顺序排列并靠右）
column-reverse (子元素按column相反顺序排列并靠底)

要点3：justify-content对齐元素
justify-content 使子元素沿主轴排列，当flex-direction:row时，父容器的主轴就是水平方向的，当flex-direction:column时，父容器的主轴就是垂直方向的。
justify-content属性值：
center 让子元素在父容器中沿主轴方向居中对齐,当方向为行时，水平居中，当方向为列时，垂直居中
flex-start 让子元素在父容器中沿主轴方向靠头放置
flex-end 让子元素在父容器中沿主轴方向靠尾放置
space-between 让头子元素和尾子元素在父容器中沿主轴靠最两端放置，中间各子元素间距均分
space-around 跟space-between相似，头尾子元素跟容器的边界有一定间距，中间各子元素间距均分
区别为

要点4：align-items
与主轴垂直的叫交叉轴，align-items表示子元素沿交叉轴排列，row的交叉轴是垂直方向的，column的交叉轴是水平方向的。
align-items的属性：
center 子元素在交叉轴上居中排列，当方向为行时，元素垂直居中，当方向为列时，元素水平居中
flex-start 从父容器头部（最前端）开始放置
flex-end 从父容器尾部（最底部）开始放置
stretch 沿交叉轴方向拉伸项目，填满flex容器（父容器）
baseline 各子元素沿文字基线对齐

要点5：flex-wrap
默认flex容器会把自动调整子元素的大小，如果是方向为row的话把它们塞在一行（水平线）里面
使用flex-wrap 包裹一行或一列，可以使多出来的子元素移到新的行或新的列。(只在水平方向有效果)
属性值：
nowrap 默认值
wrap 多余的移动新的行中
wrap-reverse 跟wrap的方向颠倒

要点6：calc
1．需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
2．任何长度值都可以使用calc()函数进行计算；
3．calc()函数支持 “+”, “-”, “*”, “/” 运算；
4．calc()函数使用标准的数学运算优先级规则；

要点7： position属性
position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。

最后看下 一个页面的页面结构

这些 估计可以写个hello world 了 暂时先到这 后续在更新