Vue开发小程序 安装软件到 Vue 语法 到页面搭建 到 Hello World!!
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue开发小程序 安装软件到 Vue 语法 到页面搭建 到 Hello World!!，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2905字，纯文字阅读大概需要5分钟。
内容图文
安卓接收小程序开发-———— 使用的是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 了 暂时先到这 后续在更新
内容总结
以上是互联网集市为您收集整理的Vue开发小程序 安装软件到 Vue 语法 到页面搭建 到 Hello World!!全部内容，希望文章能够帮你解决Vue开发小程序 安装软件到 Vue 语法 到页面搭建 到 Hello World!!所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。