uni-app 学习笔记(三)uni-app中的各种引用
一、组件引用组件的引用有三种办法1、默认写法,即导入——注册——使用2、vue3使用了新的语法糖,优化了步骤3、uni-app继续优化为一步,引入easycom机制但是这种优化是有条件的,页面直接使用,需要符合components/组件名称/组件名称.vue目录结构,这样才可以直接在页面中使用举个栗子新建components目录和test组件<template><view cla
·
一、组件引用
组件的引用有三种办法
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);
更多推荐
已为社区贡献1条内容
所有评论(0)