uni-app 学习笔记（三）uni-app中的各种引用

一、组件引用

组件的引用有三种办法

1、默认写法，即导入——注册——使用

2、vue3使用了新的语法糖，优化了步骤

3、uni-app继续优化为一步，引入easycom机制

但是这种优化是有条件的，页面直接使用，需要符合components/组件名称/组件名称.vue目录结构，这样才可以直接在页面中使用

举个栗子

新建components目录和test组件

 <template><view class="content"><button type="primary" @click="comunicationBegin">开始监听</button> <view class="data"><text>{{val}}</text></view><button type="primary" @click="comunicationOff">结束监听</button> <!-- 点击调用comunicationOff方法 --></view></template><script>export default {data() {return {val: 2}},onLoad() {},methods: {comunicationOff() {uni.$off('add', this.add) //停止add事件的this.add这个监听器},comunicationBegin() {console.log("开始监听")setInterval(()=>{uni.$emit('add', {data: 2})},1000)uni.$on('add', this.add) //这里的this.add表示调用methods中的add方法},add(e) {this.val += e.data}}}</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.data {text-align: center;line-height: 40px;margin-top: 40px;}button {width: 200px;margin: 20px 0;}</style>

在index.vue中引入

 <template><test></test></template><script>export default {data() {},onLoad() {},methods: {}}</script><style></style>

实际效果如下，和原来一样

二、js引用

1、js文件引用

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js';
// 相对路径
import add from '../../common/add.js';

2、NPM支持

直接使用HBuilderX建立的项目没有package.json，所以需要在终端输入以下代码以初始化npm

npm init -y

若使用cli建立则不用初始化npm

后续若要安装npm包，则在终端执行如下命令

npm install packageName --save

在js使用时按照如下方法使用

import package from 'packageName'
const package = require('packageName')

三、引入css文件

@import后跟需要导入的外联样式表的相对路径，用;表示语句结束

<style>@import "../../common/uni.css";/* 直接使用 */.uni-card {box-shadow: none;}
</style>

四、引入静态资源

例如图片、视频等文件

1、模板内引入静态资源

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

2、css引入静态资源

css文件或style标签内引入css文件时（scss、less 文件同理），如下

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

引入静态资源

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

uni-app 学习笔记（三）uni-app中的各种引用相关推荐

Box2d学习笔记三：box2d中几个重要的类
我们已经知道box2d中的唯一物种:刚体,然而仅仅一个刚体对象并不能完成相应的物理模拟.如果看过box2d的帮助文档就知道,b2Body中提供的函数和属性中,并没有我们需要的物理属性,可以回忆一下,我 ...
HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
得到app文稿导出_得到app学习笔记作为知识付费者，如何把所学内容快速输出？...
原标题:得到app学习笔记作为知识付费者,如何把所学内容快速输出? 零.引子昨天看到老公票圈更新了一条段子: 我就是那个伪勤奋者,在知识焦虑的胁迫下,这些年买了不知多少视频.微课.教程还有得到专栏. ...
Flutter高级进阶实战仿哔哩哔哩APP学习笔记
Flutter高级进阶实战仿哔哩哔哩APP学习笔记近年来各大公司对Flutter技能的要求越来越高,甚至设立了专门岗位,但掌握Flutter高阶技能的人才寥寥无几,市面上干货Flutter高阶课程 ...
iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
K8S 学习笔记三核心技术 Helm nfs prometheus grafana 高可用集群部署容器部署流程
K8S 学习笔记三核心技术 2.13 Helm 2.13.1 Helm 引入 2.13.2 使用 Helm 可以解决哪些问题 2.13.3 Helm 概述 2.13.4 Helm 的 3 个重要概念 ...
SurfaceFlinger学习笔记(三)之SurfaceFlinger进程
概述本系列是基于android Q 即android10 SurfaceFlinger学习笔记(一)应用启动流程 SurfaceFlinger学习笔记(二)之Surface SurfaceFling ...
MySQL学习笔记(三）查询
写在前面:本篇为作者自学总结,学习内容为课堂所学和网络学习笔记汇总,对于内容引用部分在文中和文末注明. 文章仅供参考,如需深入了解,请查阅MySQL参考手册.附上下载链接: 链接:https://pa ...
J2EE学习笔记三：EJB基础概念和知识收藏
J2EE学习笔记三:EJB基础概念和知识收藏 EJB正是J2EE的旗舰技术,因此俺直接跳到这一章来了,前面的几章都是讲Servlet和JSP以及JDBC的,俺都懂一些.那么EJB和通常我们所说的Ja ...
tensorflow学习笔记(三十二):conv2d_transpose (解卷积)
tensorflow学习笔记(三十二):conv2d_transpose ("解卷积") deconv解卷积,实际是叫做conv_transpose, conv_transpose ...

uni-app 学习笔记（三）uni-app中的各种引用

一、组件引用

1、默认写法，即导入——注册——使用

2、vue3使用了新的语法糖，优化了步骤

3、uni-app继续优化为一步，引入easycom机制

二、js引用

1、js文件引用

2、NPM支持

三、引入css文件

四、引入静态资源

1、模板内引入静态资源

2、css引入静态资源

uni-app 学习笔记（三）uni-app中的各种引用相关推荐

最新文章

热门文章