网站首页 > 精选文章 正文
样式和sass
# 同时支持小程序的rpx和h5的vw,vh长度单位
# 内置有sass的配置了,只需要安装对应依赖即可
npm install sass-loader node-sass
# 使用sass,在style标签中加入如下属性即可
<style lang='scss'>
</style>
rpx/vw/vh
<view class="content">
<view class="rpx">rpx</view>
<view class="vw">vw</view>
</view>
<style>
/* 用rpx来设置宽高 */
.rpx {
/* 在小程序中,750rpx相当于屏幕的整体宽度 */
width:750rpx;
height: 100px;
background-color: aqua;
}
/* 用vh,vw来设置宽高 */
.vw {
/* vw: h5的单位 100vw=屏幕的宽度 100vh=屏幕的高度 */
width:50vw;
height: 100px;
background-color: pink;
}
</style>
效果:
sass语法
<view class="content">
<view class="sass">sass</view>
</view>
<!-- content是固定写法 -->
.content{
.sass{ <!-- .class值 -->
background-color: red;
}
}
效果:
数据展示
普通文本数据
<!-- 1. 在js的data中定义数据 -->
<script>
export default {
data() {
return {
title:"这是一个title值"
};
}
}
</script>
<!-- 2. 在template页面通过 {{ 数据 }} 来展示数据 -->
<view class="data_title">
{{title}}
</view>
将数据当做标签的属性值来使用
语法
:data-xxx="xxx"
示例
<!-- 1. 在js的data中定义数据 -->
<script>
export default {
data() {
return {
title:"这是一个title值",
color:"red"
};
}
}
</script>
<!-- 将数据当做标签的属性值来使用,属性名为data-color -->
<view class="content">
<view :data-color='color'>
color
</view>
</view>
效果展示:
数据循环
<!-- 定义数据 -->
<script>
export default {
data() {
return {
list:[
{
id:1,
text:"苹果"
},
{
id:2,
text:"樱桃"
},
{
id:3,
text:"香蕉"
},
{
id:4,
text:"葡萄"
}
]
};
}
}
</script>
<!-- 循环展示数据 -->
<view class="content">
<!-- 通过view标签来显示 -->
<view class="" v-for="(item,index) in list" :key="item.id">
{{index}}---{{item.text}}
</view>
</view>
条件判断
<!--
v-if # 隐藏标签会删除标签
v-show # 隐藏标签是通过加hidden属性来隐藏的
-->
<!--
如果标签很频繁的显示隐藏显示隐藏,就用v-show来判断,性能会比较好
-->
<view class="content">
<!-- 通过isshow的true false 来控制标签显示 -->
<view class="vif" v-if="isshow">
v-if
</view
<view class="vshow" v-show="isshow">
v-show
</view>
<view class="vshow" v-else>
v-show
</view>
</view>
计算属性
类似django模板语法中的自定义函数
<!-- 使用计算属性 -->
<template>
<view class="content">
<view>{{start_money}}</view>
</view>
</template>
<script>
export default {
data() {
return {
money:1000
};
},
// 计算属性
computed:{
start_money(){
return "#34; + this.money
},
}
}
</script>
只展示ID小于等于1的数据
<template>
<view class="content">
<view v-for="item in filter_list" :key="item.id">{{item.text}}</view>
</view>
</template>
<script>
export default {
data() {
return {
money:1000,
list:[
{
id:1,
text:"苹果"
},
{
id:2,
text:"樱桃"
},
{
id:3,
text:"香蕉"
},
{
id:4,
text:"葡萄"
}
]
};
},
// 计算属性
computed:{
filter_list(){
// 这里的=>是指针
return this.list.filter(v=>v.id<=1)
}
}
}
</script>
数据循环+条件判断
这里建议使用computed计算属性来实现,用下面方法也可以实现
<template>
<view class="content">
<view>
<view v-for="item in list" v-if="item.id<=3" :key="item.id">{{item.text}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
money:1000,
list:[
{
id:1,
text:"苹果"
},
{
id:2,
text:"樱桃"
},
{
id:3,
text:"香蕉"
},
{
id:4,
text:"葡萄"
}
]
};
},
// 计算属性
computed:{
}
}
</script>
<style lang="scss">
</style>
事件
# 注册事件的语法:
@click="函数名"
# 定义监听函数,在methods中定义
<script>
export default {
data() {
return {
};
},
# 注册事件函数
methods:{
}
}
</script>
# 在事件中传参
<view @click="Add(number)">点击事件</view>
methods:{
# 接收参数
Add(number){
this.number = number + 1
}
}
绑定事件
<template>
<view class="content">
<view>{{ number }}</view>
<view @click="Add()">点击事件</view>
</view>
</template>
<script>
export default {
data() {
return {
number:0
};
},
methods:{
Add(){
this.number += 1
}
}
}
</script>
<style lang="scss">
</style>
事件中传参
<template>
<view class="content">
<view>{{ number }}</view>
<view @click="Add(number)">点击此处,数字(+1)</view>
</view>
</template>
<script>
export default {
data() {
return {
number:0
};
},
methods:{
Add(number){
this.number = number + 1
}
}
}
</script>
<style lang="scss">
</style>
获取标签中的自定义属性的值
<template>
<view class="content">
<view>{{ number }}</view>
<view>{{number2}}</view>
<!-- 将整个事件对象传入Add()函数中 -->
<view data-number2="10" @click="Add(number,$event)">点击此处,数字(+1)</view>
</view>
</template>
<script>
export default {
data() {
return {
number:0,
number2:""
};
},
methods:{
Add(number,event){
this.number = number + 1
// 获取标签中的自定义数据(data-number2)
this.number2 = event.currentTarget.dataset.number2
}
}
}
</script>
<style lang="scss">
</style>
组件
基本使用流程
定义
1.在项目根目录下新建文件夹components来统一管理组件
2.在components目录下新建组件*.vue
示例代码
<template>
<img class="head" src="../static/5799c80de4900.jpg" alt="">
</template>
<script>
export default {
name:"head-img",
data() {
return {
};
}
}
</script>
<style lang="scss">
.head{
/* 椭圆形头像样式 */
border-radius: 50%;
}
</style>
引入
# 在页面中引入组件
import 组件名 from 组件路径
代码示例:
<script>
// 这里的名字必须是驼峰体
import headImg from "../../components/head-img.vue"
</script>
注册
1.在页面中的实例中,新增属性components
2.属性components是一个对象,把组件放进对象中注册
3.uniapp推荐组件表明名为 带 -符号的标签,但是导入和注册的时候必须是divRed这种驼峰体
代码示例:
<script>
export default {
// 注册组件
components:{
headImg
}
}
</script>
使用
# 创建 组件名 的标签,如:
<组件名></组件名> # 即可使用该组件
代码示例:
<template>
<view class="content">
<!-- 使用组件,推荐使用 带`-`的组件标签名来使用,如divRed,可写成div-red,但是导入和注册的时候必须是divRed -->
<head-img></head-img>
</view>
</template>
组件传参
父向子传参,通过属性方式
父组件
<template>
<view class="content">
<!-- 同一个组件,根据传递的参数不同,显示不同的图片 -->
<!-- 随意定义一个属性,并将此属性和data中的数据动态绑定 -->
<head-img :mysrc="src1"></head-img>
<head-img :mysrc="src2"></head-img>
</view>
</template>
<script>
import headImg from "../../components/head-img.vue"
export default {
data() {
return {
// 声明变量,将来会通过:mysrc="src1"来显示src1的图片,:mysrc="src2"来显示src2的图片
src1:"../static/5799c80de4900.jpg",
src2:"../static/logo.png"
};
},
components:{
headImg
}
}
</script>
<style lang="scss">
</style>
子组件
<template>
<!-- 将src属性,与父组件传递过来的属性动态绑定 -->
<img class="head" :src="mysrc" alt="">
</template>
<script>
export default {
// 声明从父组件传递过来的属性
props:{
// 这个属性key必须和父组件传过来的属性key保持一致,并声明其类型
mysrc:String
},
name:"head-img",
data() {
return {
};
}
}
</script>
<style lang="scss">
.head{
border-radius: 50%;
}
</style>
子向父传参,通过触发事件方式
# 子组件通过出发时间的方式向父组件传递数据
# 父组件通过监听事件的方式来接收数据
子组件代码
<template>
<img @click="clickImg" class="head" :src="mysrc" alt="">
</template>
<script>
export default {
// 声明从父组件传递过来的属性
props:{
mysrc:String
},
name:"head-img",
data() {
return {
};
},
methods:{
// 绑定事件,将图片路径传递到父组件中
clickImg(){
// this.$emit("自定义的时间名称","要传递的参数")
this.$emit("srcChange",this.mysrc)
}
}
}
</script>
<style lang="scss">
.head{
border-radius: 50%;
}
</style>
父组件代码
<template>
<view class="content">
<view class="">
子组件传来的src路径参数为:{{src_image}}
</view>
<!-- @srcChange,为子组件定义的点击事件函数名 -->
<head-img @srcChange=handlerSrcChange :mysrc="src1"></head-img>
<head-img @srcChange=handlerSrcChange :mysrc="src2"></head-img>
</view>
</template>
<script>
import headImg from "../../components/head-img.vue"
export default {
data() {
return {
src_image:"",
src1:"../static/5799c80de4900.jpg",
src2:"../static/logo.png"
};
},
components:{
headImg
},
methods:{
// 父组件通过监听handlerSrcChange,来得到子组件传递过来的参数
handlerSrcChange(src_url){
this.src_image = src_url
}
}
}
</script>
<style lang="scss">
</style>
使用全局共享数据传递参数
1.通过挂载vue的原型上
<script>
// 设置变量或函数
// Vue.prototype是固定写法,.baseURL为设置的属性,Vue为全局对象,伴随vue的整个生命周期
Vue.prototype.baseURL="http://www.baidu.com"
</script>
main.js
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.baseURL = "http://www.baiducom"
home.vue
<template>
<view class="content">
<view class="">
{{src3}}
</view>
</view>
</template>
<script>
import headImg from "../../components/head-img.vue"
export default {
data() {
return {
src3:""
};
},
// onLoad中取值
onLoad() {
this.src3=this.baseURL
}
}
</script>
2.通过globalData的方式
app.vue
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
// 设置全局数据
globalData:{
basURL2:"http://www.taobao.com"
}
}
</script>
<style>
/*每个页面公共css */
</style>
home.vue
<template>
<view class="content">
{{src4}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
src4:""
};
},
// 在onLoad中取值
onLoad() {
// golobaData取值
this.src4 = getApp().globalData.baseURL2
}
}
</script>
<style lang="scss">
</style>
3.store
store/index.js
//引入Vue 和 Vuex
import 'Vue' from 'vue'
import 'Vuex' from 'vuex'
// 使用Vuex
Vue.use(Vuex)
// 创建store 对象
const store = new Vuex.Store({
//state中是需要管理的全局变量
state:{
userName:'',
hasLogin:false
},
//mutations 是操作state中变量的方法
mutations:{
login(state,name){ //登录成功修改 全局变量
state.userName= name;
state.hasLogin= true;
},
loginOut(state){ //退出登录修改 全局变量
state.userName= '';
state.hasLogin= false;
}
}
})
// 导出store
export default store
main.js
// 注册Vuex
import 'store' form './store'
Vue.prototype.$store = store
// 找到app对象,在app对象中挂载store
const app = new Vue({
store,
...App
})
调用
this.$store.userName
组件插槽
标签也是数据中的一种,可以用组件插槽(slot),来实现父组件向子组件传递标签
通过 slot 来实现占位符
父组件
<template>
<view class="content">
<!-- 使用子组件 -->
<head-img @srcChange=handlerSrcChange :mysrc="src1">
<!-- 在子组件内,新增想要传递的标签 -->
<view class="">
账号: <input type="text">
</view>
</head-img>
</view>
</template>
子组件
<template>
<view class="">
<img @click="clickImg" class="head" :src="mysrc" alt="">
<!-- 添加slot占位符标签,渲染的时候会将父组件标签渲染在slot标签的位置 -->
<slot></slot>
</view>
</template>
生命周期
uniapp框架的生命周期是结合了vue和微信小程序的生命周期
全局APP的生命周期对象
onLaunch
应用启动时自动执行
onShow
应用第一次被看到时自动执行
onHide
应用后台运行时自动执行
页面的生命周期对象
onLoad
页面加载完毕后自动执行
onShow
页面被看到时自动执行
组件的生命周期对象
mounted
组件挂载完毕时自动执行
- 上一篇： 第4章 项目结构与核心配置
- 下一篇： 开发自己的mcpServers服务用来发布头条文章
猜你喜欢
- 2025-08-03 Gitlab搭建及配置
- 2025-08-03 如何修改Dify默认80端口
- 2025-08-03 WeClone 用微信聊天记录打造你的「数字分身」
- 2025-08-03 使用vite为vue项目配置@别名
- 2025-08-03 NAS轻松部署自己的即时通讯—唐僧叨叨，八年时间打造
- 2025-08-03 Spring Boot 的 3 种动态 Bean 注入技巧
- 2025-08-03 手摸手，带你用vue撸后台
- 2025-08-03 无感刷新Token:如何做到让用户“永不掉线”
- 2025-08-03 Spring Boot 十大开源 "王炸"
- 2025-08-03 一个神奇的小工具，让URL地址都变成了"ooooooooo"
- 08-05俄罗斯宣布单方面停止在马里乌波尔亚速钢铁厂的作战行动
- 08-05普京签令!面向所有乌克兰居民
- 08-05一文读懂在Windows系统中如何安装mysqlclient
- 08-05轻量级命令行工具ZIN MCP Client
- 08-05Python3.7如何快速安装mysqlclient
- 08-05DHCP是什么，为什么需要他!
- 08-05Linux通过命令行连接wifi的方式
- 08-05运维+技术支持必看，Linux中排除网络故障时必须要会的Linux命令
- 最近发表
- 标签列表
-
- 向日葵无法连接服务器 (32)
- git.exe (33)
- vscode更新 (34)
- dev c (33)
- git ignore命令 (32)
- gitlab提交代码步骤 (37)
- java update (36)
- vue debug (34)
- vue blur (32)
- vscode导入vue项目 (33)
- vue chart (32)
- vue cms (32)
- 大雅数据库 (34)
- 技术迭代 (37)
- 同一局域网 (33)
- github拒绝连接 (33)
- vscode php插件 (32)
- vue注释快捷键 (32)
- linux ssr (33)
- 微端服务器 (35)
- 导航猫 (32)
- 获取当前时间年月日 (33)
- stp软件 (33)
- http下载文件 (33)
- linux bt下载 (33)