uni-app基本(样式和sass语法、基本语法、组件传参、全局共享数据、组件插槽、生命周期)

查看vue cli安装目录where vue指令


vue-cli就是vue2
@vue就是vue3

如果cnpm uninstall 或者 npm uninstall 无效的话直接在文件夹里删除不需要的 vue版本然后执行安装命令
vue3cnpm i -g @vue/cli@3.2.1
使用uni-app

需要安装yarn然后把yarn源换成淘宝源yarn config set registry https://registry.npm.taobao.org

否则第二步创建项目会报错
查看yarn源yarn config get registry

微信开发者程序启动路径

一、uni-app项目目录

.gitignore git版本管理工具必备
babel.config.js 将js做一个版本处理
最重要的目录是src


①src>pages（页面）>index>index.vue
②static静态资源文件 但是里面不可以放样式
③App.vue相当于app.js 在里面可以放整个应用启动的时候做的事情
onLaunch应用被启动了onShow应用被显示了onHide应用被隐藏了
④main.js整个项目代码的入口文件
⑤manifest.json可以在里面填写微信小程序的appid但是要写在"mp-weixin"目录下

⑥在我们要新增页面时既要在pages.json中的pages字段增加新的配置 也要在pages中添加新的文件

⑦uni.scss
upx是uniapp自定义的单位 现在可以使用rpx代替upx
二、样式和sass
①uniapp支持小程序的rpx和h5的vw、vh
rpx小程序中的单位 750rpx=屏幕的宽度
vw、vh h5单位 100vw=屏幕的宽度 100vh=屏幕的高度
②内置有sass的配置了 只需要安装对应的依赖npm install sass-loader node-sass
③vue组件中 在style标签上加入属性<style lang='scss'>
sass语法 是在style中加上scss

三、基本语法
①数据展示
在js的data中定义数据
在template中通过**{{数据}}**来显示
在标签的属性上通过 :data-index=‘数据’ 来使用

<view :data-color='color'>color</view>//标签中的color会被解析成aqua
export default {
    data(){
        return{
            color:'aqua'
        }
    }
}

②数据循环
通过v-for来指定需要循环的数组
item和index分别为 循环项 和 循环索引
:key指定唯一的属性 用来提高循环效率
如果循环列表里有id 那么key 可以写成 :key="item.id"
v-for中可以不要index
③条件编译
通过v-if来决定显示和隐藏 不适合做频繁的切换显示
通过v-show来决定显示和隐藏 适合做频繁的切换显示
v-if隐藏标签时 会直接将标签删除掉
v-show隐藏标签时 标签还是存在的 它是通过样式的方式display:none;来实现的
所以在做频繁的显示和隐藏时 v-show的性能更好
④计算属性
可以理解为是对data中的数据提供了一种加工或者过滤的能力
通过computed来定义计算属性
vue中不建议在v-for的同时使用v-if


⑤事件
事件的使用：
注册事件**@click=“handleClick”**
定义事件监听函数 需要在 methods 中定义
事件传参


⑥组件
组件的基本使用，组件传参，组件插槽。
1、组件的基本使用：（组件的定义、组件的引入、组件的注册、组件的使用）
（1）组件的定义
在src目录下新建文件夹 components 用来存放组件
在components目录下直接新建组件 .vue
（2）组件的引入
在页面中引入组件 import 组件名 from '组件路径’
（3）组件的注册
在页面实例中 新增属性 components
属性components*是一个对象 把组件放进去注册
（4）组件的使用
在页面的标签中 直接使用引入的组件 <组件></组件>

2、组件传参
父向子传递参数 通过属性的方式
子向父传递参数 通过触发事件的方式
使用全局数据传递参数：通过挂载在vue的原型上 通过globalData的方式 vuex 本地存储
（1）父向子传递数据


（2）子向父传递数据

3、全局共享数据

globalData微信独有 只要有大写Vue的地方就可以定义数据
onLoad页面加载完成就会触发

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

5、生命周期(基本)
微信小程序分为三种对象：整个应用、页面对象、组件对象。一定要分清楚对象再使用生命周期，不然是无法触发的。
uniapp框架的生命周期结合了vue和微信小程序的生命周期
①全局的APP中使用onLaunch表示应用启动时
②页面中 使用onLoad或者onShow分别表示页面加载完毕时 和 页面显示时
③组件中使用mounted表示组件挂载完毕时

完整生命周期：
uniapp：https://uniapp.dcloud.io/frame?id=生命周期
vue：https://cn.vuejs.org/v2/guide/instance.html?#生命周期图示
微信小程序：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html