这是我参与「第四届青训营 」笔记创作活动的的第8天
一，前言
为什么要使用uniapp
1,可以跨端；一套代码可以发布到小程序,app,h5三个端。目前支持几乎所有平台的小程序
2，只需掌握Vue语法即可，上手极快
二，详细知识点
view
hover-class 指鼠标按下去的样式类，会有点击效果的
<view class="view-box animated"
hover-class="view-box-hover boundIn">//animate动画格式boundIn
<text :selectable="false">ssss\n</text>//加：把false变为boolean值
<view class="box">
<text></text>
<view></view>
<view></view>
<view></view>
<view></view>
</view>
</view>
<style>
.view-box{
width:200upx；
height:200upx;
background:#007AFF;
color:#FFFFFF;
margin:100upx;
}
.view-box-hover{//一般不用：hover
background:"";
}
#view2,text{
background:yellow;
}
.box view{
background:yellow;
}
//child 如果前面还有其他组件会影响
.box>view:nth-child(1){
background:yellow;
}
//也可以用 best
.box>view:nth-of-type(1){
background:yellow;
}
//:first-of-type :last-of-type
//奇数选择器
.box>view:nth-of-type(2n-1){//或者odd也是奇数 替代2n-1
background:yellow;
}
//偶数选择器
.box>view:nth-of-type(2n){//even
background:yellow;
}
</style>
`
CSS align-items 水平方向居中
将弹性
CSS justify-content 垂直方向居中
属性定义了浏览器之间，如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及
在容器中央对齐弹性项目：
flex-direction:column;
水平变竖直
flex-shrink:
flex-shrink:1//被压缩 0//不被压缩
flex:1代表块不被压缩 自动填充
flex:100 flex:200 200比100的大一倍
官方框架uni.css
flex:1
flex:1=== flex:1 1 0
flex: 1 1 auto 如图
链接
flex的使用实例 - 桔子_Lynn - 博客园 (cnblogs.com)
渲染
export()
列表渲染
//循环一维数组
<view class="font" v-for="(val,index) in list1" :key="index">{{index}} - {{val}}</view>
<view class="font" v-for="(val,index) in list2" :key="index">{{index}} - {{val.name}} - {{val.character}}
</view>
<block class="font" v-for="(val,key) in objlist" :key="key">
{{key}} - {{val}}//输出结果是name1:lanqiao....
</block>
<script>
export default{
data(){
return {
list1:["篮球","足球"],
list2:[
{name:"cidar",charater:"kawayi"},
{name:"cidier",charater:"sad"}
]
],
objlist:{
name1:"lanqiao",
name2:"sdcnj",
name3:"Scdsas"
}
}
}
</script>
循环用block 条件渲染用view
stop防止迭代
实战
<template>
<!--首页-->
<view style="padding:20rpx">
<!-- 头像昵称关注按钮
父元素设置了display:flex,那只作用于这个父元素下的第一级子元素。
也就是说，有div->ul->li,div设置了flex,则li元素是没有效果的）。space-between 两端对齐
-->
<view style="display: flex;justify-content:space-between;align-items: center;">
<image src="../../static/common/nothing.jpg" style="width:65rpx;height: 65rpx; border-radius: 100% ;"
lazy-load></image>
<!--
align-items垂直方向的居中 -->
<view >
<!-- 昵称 text-light-muted 浅灰色
-->
<view class="font"style="font-size: 30rpx;line-height:1.5">昵称</view>
<text class="font-sm text-light-muted" style="color: #2C405A;font-size:20rpx">2019-09-09</text>
</view>
<!-- 按钮 关注 style="width:90rpx;height:50rpx; display:flex;align-items: center ;
justify-content:center;border-radius:5rpx;background-color:red;border-radius: 5rpx;"-->
<!-- 去common.css查找 -->
<view class="flex align-center justify-center rounded bg-main text-white" style="display:flex;justify-content: center;align-items: center; 90rpx; height: 50rpx;">
关注
</view>
</view>
<!-- 2 -->
<view style="font-size: 30rpx;">我是标题 </view>
<image src="../../static/img/banner/banner2.jpeg" class="rounded w-100"style="height: 350rpx;"
></image>
<!-- widthFix自动匹配宽度 宽度不变 高度自动变化 mode="widthFix" -->
<!-- 图片按钮 -->
<view style="display:flex;justify-content: center;align-items: center;" class="flex align-center">
<view style="display:flex;justify-content: center;align-items: center;"class="flex align-center justify-center flex-1">
<text class="iconfont icon-dianzan mr-2 "></text>
<text>1</text>
</view>
<view style="display:flex;justify-content: center;align-items: center;" class="flex align-center justify-center flex-1"">
<text class="iconfont icon-cai mr-2" ></text>
<text>1</text>
</view>
<view style="display:flex;justify-content: center;align-items: center;" class="flex align-center justify-center flex-1"">
<text class="iconfont icon-pinglun mr-2 " ></text>
<text>1</text>
</view>
<view style="display:flex;justify-content: center;align-items: center;" class="flex align-center justify-center flex-1"">
<text class="iconfont icon-fenxiang mr-2" ></text>
<text>1</text>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
<!-- 封装 -->
return {
list:
username:"昵称",
userpic:"",
newstime:"",
isFollow:false,
title:"",
titlepic:"",
support:{
type:"support",
support_count:1,
unsupport_count:2
},
comment_count:2,
share_num:2
]
}
},
onLoad() {
},
methods: {
}
}
</script>
滚动
.scroll-row {
width: 100%;
white-space: nowrap;/* 不换行 */
}
.scroll-row-item {
display: inline-block !important;
}//既可以决定长度宽度也能inline显示
!important 具有优先权
提升指定样式规则的应用优先权。
示例：div { color:red!important }
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
The following example shows the different behavior of display: inline, display: inline-block and display: block:
CSS Layout - inline-block (w3schools.com)
v-on v-bind
简单说 v-bind 简写@绑定事件 @click
v-on绑定属性 eg src class id 简写:
vue中传事件
@click="fangfa($event)"
swiper
vuex
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
├─components
│ HelloWorld.vue
│
├─router
│ index.js
│
└─store
index.js
store index.js
import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建vuex对象
const store=new Vuex.Store({
state:{
name:'frankier'
}
})
export defualt store
main.js
将store挂载到当前项目中的vue实例去
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
render:h=>h(App)
})
组件n给中eg App.vue使用state中定义的name
<template>
<div id='app'>
name:<h1> {{$store.state.name}}</h1>
</div>
</template>
在组件方法中使用
methods:{
add(){
console/log(this.$store.state.name)
}
}
成员列表
- state 存放状态
- mutations state成员操作
- getters 加工state成员给外界
- actions 异步操作
- modules 模块化状态管理
mutations是操作state数据方法的集合 对数据的修改增加删除等
state 就是那个当前vueX对象的state
payload是该方法在被调用时传递参数使用的
例如，我们编写一个方法，当被执行时，能把下例中的name值修改为"jack",我们只需要这样做
mutation传值：
单个值提交时
this.$store.commit('edit',15)
多个值
this.$store.commit('edit',{age:14,name:cidier})
接收挂载的参数
edit(state,payload){
state.name='jack'
console.log(payload)
}
另一种提交方式
this.$store.commit({
type:'edit',
payload:{
age:14,
name:'cidier'
}
})
增删ｓｔａｔｅ中的成员
Vue.set(state,"age",15)
Vue.delete(state,'age')
Gｅｔｔｅｒｓ
可以对state中的成员加工后传递给外界
Getters中的方法有两个默认参数
- state 当前VueX对象中的状态对象
- getters２ 当前getters１的对象，用于将getters１下的其他getter３ ４ ５拿来
getters:{
nameInfo(state){
return "姓名:"+state.name
},
fullInfo(state,getters){
return getters.nameInfo+'年龄:'+state.age
}
}
组件中调用
this.$store.getters.fullInfo
Ａｃｔｉｏｎｓ
由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。
Actions中的方法有两个默认参数
context上下文(相当于箭头函数中的this)对象payload挂载参数
例如，我们在两秒中后执行2.2.2节中的edit方法
由于setTimeout是异步操作，所以需要使用`actionｓ
actions:{
aEdit(context,payload){
setTimeout(()=>{
context.commit('edit',payload)
},2000)
}
}
在组件中调用
this.$store.dispatch('aEdit',{age:15})
ｍｏｄｕｌｅｓ
当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
Ｖｕｅ
Ｖｕｅ．ｃｏｍｐｏｎｅｎｔ（＇ｔｏｄｏ－ｉｔｅｍ＇，｛
ｔｅｍｐｌａｔｅ：＇＜ｌｉ＞ｃｉｄｉｅｔｓａｉｄｈｕ＜／ｌｉ＞＇
｝）
ｖａｒ ａｐｐ＝ｎｅｗ Ｖｕｅ（）
＜ｏｌ＞
＜ｔｏｄｏ－ｉｔｅｍ＞＜／ｔｏｄｏ－ｉｔｅｍ＞
＜／ｏｌ＞
但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义 attribute。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
通过ｐｒｏｐ向子组件传递数据
注意看图：就是我定义的ｐｒｏｐｓ 的ｔｉｔｌｅ穿到子组件就变成了子组件的属性了，那原来的也会改变显示哦
ｃｏｍｐｕｔｅｄ
computed vs methods
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
computed setter
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
await
await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用
promise解决异步
相关资料参考：
Button 按钮 (组件) - Element UI 中文开发手册 - 开发者手册 - 云+社区 - 腾讯云 (tencent.com)
