uni-app学习基础

一、uni-app的初体验

1.1开发方式

通过HBuilderX可视化界面
- 不多介绍
通过vue-cli命令行

1.2脚手架搭建项目

环境安装

全局安装vue-cli
```
npm install -g @vue/cli
```
创建项目

使用正式版（对应HBuilderX最新正式版）
```
vue  create dcloudio/uni-preset-vue my-project
```
使用alpha版（对应HBuilderX最新alpha版）
```
vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project
```
此时，会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，当然也可以使用默认模板（本项目是默认模板）
启动项目（微信小程序）
```
npm run dev:mp-weixin
```
当然，还有其他版本：支付宝小程序、qq小程序等
微信小程序开发者工具导入项目

需要把 my-project/dist/dev/mp-weixin 这个目录导入微信小程序开发者工具其中

二、项目结构介绍

src/

三、样式和sass

支持小程序的 rpx 和h5的 vw 、 vh
- rpx为小程序单位：750rpx = 屏幕宽度
- vw 、vh是h5单位，100vw = 屏幕的宽度，100vh = 屏幕的高度
内置有sass的配置，只需要安装对应的依赖即可：npm install sass-loader node-sass
vue组件中，在style标签上加上属性 <style lang='scss'> 即可

四、基本语法

4.1数据的展示

定义

在js的data中定义数据

data(){
    return{
        msg:"hello",
        color:'red'
    }
}

使用

在template中通过{{ 数据 }}来展示

{{msg}}
在标签的属性上通过 :data-index='数据' 来使用，从而数据对应标签属性

<view :data-color="color">nice</view>

4.2数据的循环

通过 v-for 来指定要循环的数组
item 和 index 分别为循环项和循环索引
:key指定唯一的属性，用来提高循环效率

data(){
    return{
        list:[
            {id:001,text:"苹果🍎"},
            {id:002,text:"香蕉🍌"},
            {id:003,text:"樱桃🍒"}
        ]
    }
}

<view v-for="(item,index) in list" :key="item.id">
{{index}} -- {{item.id}} -- {{item.text}}
</view>

4.3条件编译

通过 v-if 来决定显示和隐藏

通过删除了标签来实现，不适合做频繁的切换显示

通过 v-show 来决定显示和隐藏

通过 display: none; 来实现，适合做频繁的切换显示

<view>
	<view v-if="false">v-if</view>
    <view v-show="false">v-show</view>
    <!-- 通过变量来控制 -->
    <view v-if="isShow">显示或隐藏</view>
</view>

4.4计算属性

可以理解为是对 data 中的数据提供了一种加工或者过滤的能力
通过 computed 来定义计算属性

<!-- 计算能力-->
<view>
    {{getMoney}}
</view>
<!-- 过滤能力 -->
<view v-for="(item,index) in filterList" :key="item.id">
{{index}} -- {{item.id}} -- {{item.text}}
</view>

computed: {
    getMoney(){
      return '￥'+ this.money;  
    },
    filterList(){
        //要把 id>0 的数据项都过滤掉
        return this.list.filter(v => v.id <= 0);
    },
    processList(){
        return this.list.map(v => {
            v.color = "red";
            return v;
        })
    }
}

五、事件

注册事件 @click= "handleClick"
定义事件监听函数，需要在 methods 中定义
事件的传参

<view @click="handleClick">please click here</view>
<view data-index="ppp" @click="printClick(1,$event)">click to print content of data-index</view>

methods: {
    handleClick(){
        console.log("点击生效了！");
    },
    printClick(obj,event){
        console.log(obj);
        console.log(event);
        console.log(event.currentTarget.dataset.index);
    }
}

六、组件

6.1组件的简单使用

组件的定义
- 在 src 目录下新建文件夹 components 用来存放组件
- 在 components 目录下直接新建组件 *.vue
组件的引入
- 在页面中引入组件 import 组件名 from '组件路径'
组件的注册
- 在页面中的实例中，新增属性 components
- 属性 components 是一个对象，把组件放进去注册

组件的使用

在页面的标签中，直接使用引入的组件 `<组件></组件>

components/img-border.vue

<template>
	<image src="http://example.com.1.jpg"></image>
</template>

<script>
export default {
    
}
</script>

<style>
</style>

pages/index/index.vue

<template>
	<view>
        <imgBorder></imgBorder>
        <!-- 或者下面这种格式,这两种格式是等价的 -->
        <img-border></img-border>
    </view>
</template>

<script>
// @ 对应的目录是 src/
import imgBorder from "@/components/img-border";
export default {
    components: {
        imgBorder
    }
}
</script>

<style>
</style>

6.2组件传参

父向子传递参数，通过属性的方式

父页面向子组件 imgBorder 或者 img-border 通过属性名 src 传递了一个数组数据
子组件通过 props 进行接收数据·

pages/index/index.vue

<template>
	<view>
        <imgBorder :src="mySrc"></imgBorder>
    </view>
</template>

<script>
// @ 对应的目录是 src/
import imgBorder from "@/components/img-border";
export default {
    data(){
      return {
          mySrc:"http://www.baidu.com/example.png"
      }  
    },
    components: {
        imgBorder
    }
}
</script>

components/img-border.vue

<template>
	<!-- 把props中的src看作是data中的变量一样来使用 -->
	<image :src="src"></image>
</template>

<script>
export default {
    props:{
        src:String
    }
}
</script>

子向父传递参数，通过触发事件的方式

子组件通过触发事件的方式向父组件传递数据
父组件通过监听事件的方式来接收数据

components/img-border.vue

<template>
	<image @click="handleClick" :src="src"></image>
</template>

<script>
export default {
    props:{
        src:String
    },
    methods:{
        handleClick(){
            //子向父传递数据通过 触发事件
            //this.$emit("自定义的事件名称","要传递的参数")；
            this.$emit("srcMsg",this.src);
        }
    }
}
</script>

pages/index/index.vue

<template>
	<view>子组件传递过来的路径：{{childSrc}}</view>
	<view>
        <imgBorder @srcMsg="handleSrcMsg" :src="mySrc"></imgBorder>
    </view>
</template>

<script>
// @ 对应的目录是 src/
import imgBorder from "@/components/img-border";
export default {
    data(){
      return {
          mySrc:"http://www.baidu.com/example.png",
          childSrc:""
      }  
    },
    components: {
        imgBorder
    },
    methods:{
        handleSrcMsg(e){
            this.childSrc = e;
        }
    }
}
</script>

通过全局数据传递参数

通过挂载vue的原型上

在main.js或者任何有 import Vue from 'vue' 的页面内定义
```
Vue.prototype.baseURL = "http://www.baidu.com"
```
当作是 data 中的变量一样来使用
```
this.baseURL
```

通过globalData的方式

在 App.vue 中定义

<script>
    export default {
        onShow: function(){
            
        },
        globalData:{
            base:"www.360.com"
        }
    }
</script>

使用

getApp().globalData.base

修改

getApp().globalData.base = "xxx"

6.3组件插槽

标签其实也是数据中的一种，想实现动态的给子组件传递标签，就可以使用插槽slot
通过slot来实现占位符

components/my-form.vue

<template>
	<view class="form">
        <view class="form_title">标题</view>
        <view class="form_content">内容</view>
        <!-- 插槽 来占位置 -->
        <slot></slot>
    </view>
</template>

<script>
export default {
    
}
</script>

<style>
</style>

pages/index/index.vue

<template>
	<view>
        <myForm>
            <view>
                <imput placeholder="please input" type="text" />
                <radio></radio>
                <checkbox></checkbox>
    		</view>
    	</myForm>
    </view>
</template>

<script>
// @ 对应的目录是 src/
import myForm from "@/components/my-form";
export default {
    components: {
        myForm
    }
}
</script>

<style>
</style>

七、生命周期

uni-app框架的生命周期结合了vue和微信小程序的生命周期
全局的APP中使用 onLaunch 表示应用启动时
页面中，使用 onLoad 或者 onShow 分别表示页面加载完毕时和页面显示时
组件中使用 mounted 表示组件挂载完毕时

uniapp生命周期

Vue生命周期

posted @ 2021-02-01 14:39 阿东哟阅读(489) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

阿东哟

uni-app学习基础

一、uni-app的初体验

1.1开发方式

1.2脚手架搭建项目

二、项目结构介绍

三、样式和sass

四、基本语法

4.1数据的展示

定义

使用

4.2数据的循环

4.3条件编译

4.4计算属性

五、事件

六、组件

6.1组件的简单使用

6.2组件传参

父向子传递参数，通过属性的方式

子向父传递参数，通过触发事件的方式

通过全局数据传递参数

6.3组件插槽

七、生命周期

公告