uni-app入门

uni-app

一、demo创建并导入

1、全局环境安装

npm install -g @vue/cli

2、创建项目

 vue create -p dclodio/uni-preset-vue 项目名称

选择模板时，选择默认模板即可

3、启动项目

cd 项目目录
npm run dev:mp-weixin

4、导入项目进微信开发者工具

​ 导入时的目录选择：创建目录下的dist\dev\mp-weixin然后点击选择文件夹，加下来就可以在微信开发者工具中看到用模板创建的项目。出现以下界面，说明工程构建成功，接下来就是开发了。。。

二、样式单位

750rpx=屏幕宽度

100vw=屏幕宽度

100vh=屏幕长度

三、语法

1、数据展示

文本使用data中的数据

将data中的数据作为属性的值，标签前面加上冒号

2、数据循环

2.1 v-for

2.2 v-if

2.3 v-show

四、组件

定义

引入

注册

使用

4.1、父组件向子组件传递参数

4.2 子组件向父组件传递参数

子组件通过触发事件向父组件传递数据

父组件通过监听事件来接收数据

4.2.1 子组件hello.vue

<template>
    <button @click="handClick">子=》父组件传递</button>
</template>
<script>
export default {
    methods:{
        handClick(){
            // this.$emit("传递到父组件用来接收的变量名","传递的值")
            this.$emit('getText',"子组件的数据")
        }
       
    }
}
</script>

4.2.2 父组件 index.vue

<template>
	<view class="content">
		<helloZj :mytext="text1" @getText="getTextFromChildren"></helloZj>
		<view>{{text}}</view>
	</view>
</template>

<script>
import helloZj from '@/components/hello.vue'
	export default {
		components:{
			helloZj
		},
		data() {
			return {
				text:"",		
			}
		},
		methods:{
			getTextFromChildren(e){
				this.text=e;
			}
		},

</script>

4.3 全局共享数据

4.3.1 通过Vue原型共享

main.js中加入

Vue.prototype.baseurl="localhost:8888/";

其他地方直接用

this.baseurl

即可调用

4.3.2 通过globalData共享（微信小程序独有的）

App.vue中添加

globalData:{
			base:"localhost:8080/"
		}

其他地方用getApp().globalData.base来使用

4.3.3 vuex

4.4.4 本地存储

4.4 组件插槽slot

父组件向子组件动态传递标签

4.4.1 创建login-form.vue，并放上组件占位符

4.4.2 在父组件中使用,父组件中子组件的标签中的内容会替换到子组件的slot组件占位上

五、生命周期

- 全局的APP中使用onLaunch表示应用启动时

- 页面中使用onLoad过着onShow表示页面显示完毕时和页面显示时，组件中使用没有效果

- 组件中使用mounted组件挂载完毕时

六、注意事项

外链图片转存中…(img-zkZuCwyL-1610873271972)]

五、生命周期

- 全局的APP中使用onLaunch表示应用启动时

- 页面中使用onLoad过着onShow表示页面显示完毕时和页面显示时，组件中使用没有效果

- 组件中使用mounted组件挂载完毕时

六、注意事项

1、所有的页面都写在pages目录下，所有的组件都写在components下