uni-app学习笔记一(第一uniapp基础,二章vue语法速通)_uniapp 工具函数写在哪-程序员宅基地

技术标签: 学习笔记  uniapp  vue  

目录

导学

uniapp基础

微信小程序了解(2.1,2.2)

uniapp开发规范(2.3)

uniapp知识点

开发环境搭建(2.4)

语法速通(2.5~2.9)

模板语法与数据绑定:

条件判断:

列表循环​

滚动列表显示

自定义组件


导学

了解uniapp生态,优点等等。

下图对比了和普通web开发的标签的不同。

学习内容

uniapp基础

微信小程序了解(2.1,2.2)

打开微信开发者工具,新建项目

 app.js:文件入口
app.json 项目配置
app.wxss 样式表

微信小程序基本操作:
1.数据绑定
2.条件判断
3.列表渲染
这里在index页面举例子,下面是设置数据。

<!--pages/index/index.wxml-->
<text>pages/index/index.wxml</text>
<navigator url="/pages/detail/detail">打开详情</navigator>
<view class='border'>内容</view>
<!-- 数据绑定 -->
<text>"绑定的数据:"{
   {name}}</text>
<text>\n</text>

<!-- 条件判断,判断是否显示 -->
<text wx:if="{
   {is_ok}}">"条件判断的显示:"{
   {name}}</text>
<text>\n</text>
<!-- 循环的第一种写法 -->
<view wx:for="{
   {ages}}">{
   {item}}</view>
<!-- 循环的第二种写法 -->
<view wx:for="{
   {ages}}" wx:for-item="age">{
   {age}}</view>

显示效果如下:

uniapp开发规范(2.3)

vue单文件组件规范:

组件标签靠近小程序规范
如下,第一个是以前html,第二个是uniapp的标签。

接口可以使用uniapp提供的。比如

数据绑定,事件处理用的是vue的规范。
为了兼容多端运行,布局使用flex布局。

uniapp特色
条件编译

APP端的Nvue开发。
补充了很多原生组件。

html5+ ,了解。html5+和Nvue只能在app端使用。

uniapp知识点

组件,分为:
基础组件:前面写的txt等等都是。
自定义组件:自己写。
组件化的思想去开发。
API
路由:uniapp没有vue router的概念,这里更多的是页面切换。
生命周期
语法
大致知道以上这些范围就行了。后面会详细介绍。

开发环境搭建(2.4)

hbuilderX 下载安装  略。

新建项目,如下:

vue-cli的方式新建项目:
先确认电脑是否安装了node

node -V

npm instal @vue-cli -g  #安装

vue -V   #查看vue是否安装上



与上面一样,选默认模板建项目,

创建完成! 进入项目文件夹。
可以用vscode查看编辑项目,运行项目

npm run serve    

这里的serve是与下面配置文件对应的

运行后,打开如下地址即可。

语法速通(2.5~2.9)

关于语法速通的小提纲:

模板语法与数据绑定:

数据绑定就是在下面这里初始化数据,然后页面里面插入数据。
这里要注意的是数据不建议以对象的方式写,因为关闭页面再打开页面的话,这种方式数据会保留上次的结果,而不会被初始化。

这里写上数据


这里是实现了两个绑定,一个是数据,一个是class的绑定。
事件的绑定:


这里,写在metho外面的一般是生命周期相关的函数。自定义的函数写在里面。

这里是两种修改值的方法,被注释的是小程序的写法,比较麻烦,推荐第二种。
下面是点击的时候修改,也是一样的。

上面的绑定数据有如下的简写方法,对比一下,尽量用简写方法。v-bind 简写为 :    v-on  简写为  @

条件判断:



这样就可以通过show这个变量来控制是否显示了。

还可以与变量判断。


js 语法补充:
=== 判断值和类型是否都相等
== 判断值是否相等

列表循环

基础组件,这里主要结合官网简单认识几个。
如下,点击test文字就出现红色边框。

		<!-- 基础组件用法 -->
		<view hover-class="active">test</view>
	.active{
		border:1px red solid;
	}

滚动列表显示

		<scroll-view scroll-y="true" class="height">
			<view v-for="item in 100">{
   {item}}</view>
		</scroll-view>
	.height{
		height: 500px;
	}

很棒的效果。
双向绑定:

自定义组件

这个是重点。
创建文件夹和文件。

组件文件里面:
第一个color是样式属性名,第二个color是传入的值比如red等等。
slot是占位的意思,是为了index页面中使用自定义按钮组件的时候,可以指定按钮名字用的。

为了在index页面点击按钮触发index里面的按钮处理函数,所以需要加上下面这个emit的事件。

index.vue里面引入,并使用即可。这里指定了按钮名字。

@表示项目的根目录。
下面这样是设置color覆盖掉组件原先的颜色,change是接收组件emit传来的参数。
这样在index中点击按钮,index的点击处理函数会响应,组件的点击处理也会响应。

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wangrunhuan/article/details/109129545

智能推荐

西门子HMI SMART 700 IE 设备概况以及WinCC flexible 2008常用配置小记-程序员宅基地

文章浏览阅读1.2w次,点赞3次,收藏32次。——参考自:SIMATIC HMI设备 Smart 700 IE、Smart 1000 IE 操作说明HMI 设备一旦探测到操作员控件被触摸就会立即返回一个反馈。该反馈是独立的,与 PLC 的通讯无关。 因此,其并不指示相关动作是否已真正执行。设计Smart Panel 700 IE是Smart Panel 700的升级版。连接HMI与PC连接组态PC与SMART PANEL有两种连接方式,一种是通过 RS485/422 接口连接,另一种是通过以太网接口连接,后者接线图如下图所示:HM_wincc flexible 2008

设备驱动模型(kobject、kset、ktype)_kobject kset ktype-程序员宅基地

文章浏览阅读570次。转自https://blog.csdn.net/guet_kite/article/details/78368928设备驱动模型概述Linux早期时候,一个驱动对应一个设备,也就对应一个硬件地址,那当有两个一样的设备的时候,就要写两个驱动,显然是不合理的。应该是从Linux2.5开始,就引入了device-bus-driver模型。其中设备驱动模型主要结构分为kset、kobject、kty..._kobject kset ktype

关于换行以及换行属性_nowarp也会换行-程序员宅基地

文章浏览阅读1.9k次。对于CSS的white-space属性,我想大部分人应该和我差不多,最常用的就是nowrap属性,最多用来做超长省略号显示的时候会用到【hiahiahia~】起因是这样的:产品doggie策划了一个元旦活动,活动主页最下边需要显示配置的活动规则,注意,是配置的活动规则,所以,免不了运营小妹要在后台配置一个活动规则,肯定不指望她们能配置html文本的呀,对吧,于是她们配置的是这样的: 1、封垫苏菲房间都是克拉夫; 2、对方萨芬的刷分放大; 3、粉打发打发打发这样色的,于..._nowarp也会换行

BRVAH万能适配器_andriod brvah适配器万能官网-程序员宅基地

文章浏览阅读353次。BRVAH一.简介二.使用一.简介BRVAH是一个强大的RecyclerAdapter框架(什么是RecyclerView?),它能节约开发者大量的开发时间,集成了大部分列表常用需求解决方案。二.使用在使用时,首先要项目的build.gradle导入allprojects { repositories { google() jcenter() ..._andriod brvah适配器万能官网

计算机文化基础作品ppt,计算机文化基础PPT课件-程序员宅基地

文章浏览阅读91次。计算机文化基础PPT课件2019-03-15计算机文化基础PPT课件 第1章http://wenku.baidu.com/view/e7ef8b6925c52cc58bd6be97.html计算机文化基础PPT课件 第2章 Windows 2000操作系统http://wenku.baidu.com/view/e85671f5f61fb7360b4c6594.html计算机文化基础PPT课件 ..._计算机文化基础ppt

获得迭代器最后一个元素_处理迭代器最后一个元素-程序员宅基地

文章浏览阅读3k次。来源python123获得迭代器最后一个元素问题尝试使用 * 迭代器展开运算,返回 range(0, 1000, 4) 的最后一个元素。print([x for x in range(0,1000,4)][-1])输出:996..._处理迭代器最后一个元素

随便推点

第七章 PX4-Pixhawk-Mavlink解析_px4 mavlink 波特率-程序员宅基地

文章浏览阅读5.2k次,点赞3次,收藏25次。第七章 PX4-Mavlink解析首先我们是还是来说一说mavlink吧。Mavlink协议是无人机的一种开源通信协议。可以理解就是按照一定的格式来发送数据。这一章节涉及到了消息的打包发送和接收解析。 首先我们还是找到入口函数然后回到脚本启动中找到mavlink的启动,这个找到应该不难吧,前面几章都有这个。这里有一个需要提一下,很多_px4 mavlink 波特率

Python 中RSA的用法 使用pyOpenssl 生成RSA密钥对, 使用rsa 加解密_import base64 import rsa from openssl.crypto impor-程序员宅基地

文章浏览阅读1.6k次,点赞4次,收藏8次。1. pyOpenSSL 生成RSA密钥对, 效率比较高2. rsa 加解密方法简单3. 代码import rsaimport base64from OpenSSL.crypto import PKeyfrom OpenSSL.crypto import TYPE_RSA, FILETYPE_PEM, FILETYPE_ASN1from OpenSSL.crypto import dum..._import base64 import rsa from openssl.crypto import pkey from openssl.crypto

Android 架构设计(四):组件化?_android 组件化 去除相关组件-程序员宅基地

文章浏览阅读1.8k次,点赞2次,收藏3次。同系列传送门Android 架构设计(一):设计模式分析_赵星海的博客-程序员宅基地Android 架构设计(二):分包和文件结构_赵星海的博客-程序员宅基地_android 分包结构Android 架构设计(三):技术选型_赵星海的博客-程序员宅基地关于组件化,我这边分三步与大家分享:1定义,2需求,3优劣,4改造步骤(含框架推荐);1、组件化的定义:各个业务模块可单独运行,模块相互联系只可以使用唯一的入口。如图:2、当前项目是否需要采用组件化?首先看项目大小,.._android 组件化 去除相关组件

通过设置偏移 添加RecyclerView分隔线_rv_list.additemdecoration(new recyclerviewdivider距-程序员宅基地

文章浏览阅读701次。添加RecyclerView分隔线_rv_list.additemdecoration(new recyclerviewdivider距离左侧

深入理解计算机系统--计算机系统漫游_深入理解计算机系统 jeancheng-程序员宅基地

文章浏览阅读282次。第一章 计算机系统漫游 计算机系统是由硬件和系统软件组成的。所有计算机系统都是由相似的硬件和软件组成,它们又执行着相似的功能。 以hello程序为例。 1.1信息就是位+上下文 hello程序的生命是从源程序(源文件)开始的。源程序是程序员编写的,hello.c。源程序是 0和1 的比特位,8个一组。ASCII标准来表示文本字符。 这样的文件称为文本文件,所有其他_深入理解计算机系统 jeancheng

python读取json字符串_json数据处理:读取文件中的json字符串,转为python字典-程序员宅基地

文章浏览阅读1.4k次。方法1:读取文件中的json字符串,再用json.loads转为python字典import jsonstr_file = ‘./960x540/config.json‘with open(str_file, ‘r‘) as f:print("Load str file from {}".format(str_file))str1 = f.read()r = json.loads(str1)pri..._python 提取json元素 获取两个字段的值组成字典