uniapp

应用生命周期

onLaunch 当uni-app初始化完成时触发（全局只触发一次）
onShow 当 uni-app 启动，或从后台进入前台显示
onHide 当 uni-app 从前台进入后台

注：应用生命周期仅可在App.vue中监听，在其它页面监听无效

例如：
<script>// 只能在App.vue里监听应用的生命周期export default {onLaunch: function() {console.log('App Launch')},onShow: function() {console.log('App Show')},onHide: function() {console.log('App Hide')}}
</script>

页面生命周期

onLoad 监听页面加载，其参数为上各个页面传递过来的数据，参数类型为Object(用于页面传参)

示例：
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({url: 'test?id=1&name=uniapp'
});// 在test.vue页面接受参数
export default {onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数console.log(option.id); //打印出上个页面传递的参数。console.log(option.name); //打印出上个页面传递的参数。}
}

onShow 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide 监听页面隐藏
uni.hideHomeButton() 隐藏返回首页的按钮
uni.reLaunch(OBJECT) 关闭所有页面，打开到应用内的某个页面。
uni.redirectTo(OBJECT) 关闭当前页面，跳转到应用内的某个页面。

组件生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期
beforeCreate 在实例初始化之后被调用。
created 在实例创建完成后被立即调用。在created的阶段，DOM还未创建，这个时候并不能对DOM进行操作
beforeMount 在挂载开始之前被调用。
mounted 挂载到实例上去之后调用。mounted是页面渲染完毕后执行的
注意: mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick

示例：
mounted: function () {this.$nextTick(function () {// 仅在整个视图都被渲染之后才会运行的代码})
}

beforeUpdate 数据更新时调用，发生在虚拟 DOM 打补丁之前
updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy 实例销毁之前调用。
destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
uni.login(OBJECT) 登录

示例：
uni.login({provider: 'weixin',success: function (loginRes) {console.log(loginRes.authResult);}
});

uni.showModel(OBJECT)
显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。

示例：
uni.showModal({title: '提示',content: '这是一个模态弹窗',success: function (res) {if (res.confirm) {console.log('用户点击确定');} else if (res.cancel) {console.log('用户点击取消');}}
});

uni.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。

示例：
// 从相册选择6张图
uni.chooseImage({count: 6,sizeType: ['original', 'compressed'],sourceType: ['album'],success: function(res) {// 预览图片uni.previewImage({urls: res.tempFilePaths,longPressActions: {itemList: ['发送给朋友', '保存图片', '收藏'],success: function(data) {console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');},fail: function(err) {console.log(err.errMsg);}}});}});

elementUI 消息提示框 this.$message(OBJECT)

微信小程序 - 扫描小程序码进入小程序并获取参数
在进入的页面加上的onLoad方法，获取参数

onLoad(options) {if(options.scene) {let scene = decodeURIComponent(options.scene);console.log(scene)// 后续处理scene}
}

wx.exitMiniProgram(Object)
退出小程序必须有点击行为才能调用成功

uni.showToast(OBJECT) 显示消息提示框

示例：
<template><view class="treaty"><view class="icon iconfont" :class="check?'icon-fuxuankuang':'icon-fuxuankuang1'" @click="tapClick"></view><view class="treatyTitle">本人承诺，此次填写信息真实有效，上传的材料及填写的信息可作为不动产登记依据。</view></view><button :class="clickButton?'submit':'subDisabled'" @click="submitData">开始登记</button>
</template><script>export default{data(){return{clickButton: true,check: false,}},onShow () {uni.hideHomeButton();//隐藏返回首页的按钮},methods:{tapClick() {this.check = !this.check;this.clickButton = !this.clickButton;},submitData() {if (!this.check) {uni.showToast({icon: 'none',title: '请承诺本次填写的信息真实有效！'});return;}this.isExist();//是否认证},}}
</script>

vue-meta-info使用

1.npm install vue-meta-info --save
2.在main.js中全局引入

 import MetaInfo from 'vue-meta-info';Vue.use(MetaInfo);

3.在组件内静态使用

<script>export default {metaInfo: {title: '操作手册',},}
</script>

vue-router跳转时打开新页面的两种方法

1、标签实现新窗口打开

<router-link target="_blank" :to="{path:'/home',query:{id:'1'}}">新页面打开home页</router-link>

2、编程式导航

有些时候需要在单击事件或者在函数中实现页面跳转，可以借助router的示例方法，通过编写代码实现。常用的是router.push和router.push和router.push和router.go,但vue2.0后，这种方式就不支持新窗口打开的属性了，这个时候就需要使用this.$router.resolve

click(){let routeUrl = this.$router.resolve({path: "/share",query: {id:96}//需要传递的参数});window.open(routeUrl.href, '_blank')
}

路由传参的方式

可以划分为params传参和query传参，而params传参又可分为在url中显示参数和不显示参数两种方式

1.params 传参（显示参数）又可分为声明式和编程式两种方式
声明式router-link：该方式是通过router-link组件的to属性实现，子路由需要提前配置好参数。

示例：
<router-link :to="/child/1"> 跳转到子路由 </router-link>{path: '/child/:id',component: Child}

编程式 this.$router.push：同样需要子路由提前配置好参数。

 {path: '/child/:id',component: Child}
this.$router.push({path:'/child/${id}',
})

接收: this.$route.params.id

2.params传参（不显示参数）也可分为声明式和编程式两种方式，与显示参数不同的是，这里是通过路由的别名 name 进行传值的

<router-link :to="{name:'Child',params:{id:1}}">跳转到子路由</router-link>
{path: '/child,name: 'Child',component: Child
}
this.$router.push({name:'Child',params:{id:1}
})

接收: this.$route.params.id

3.query 传参（显示参数）也可分为声明式和编程式两种方式

声明式router-link：该方式是通过 router-link 组件的 to 属性实现，不过使用该方式传值的时候，需要子路由提前配置好路由别名

<router-link :to="{name:'Child',query:{id:1}}">跳转到子路由</router-link>
编程式 this.$router.push：使用该方式传值的时候，同样需要子路由提前配置好路由别名（name 属性）
{path: '/child,name: 'Child',component: Child
}
this.$router.push({name:'Child',query:{id:1}
})

接收: this.$route.query.id

ref 有三种用法：

1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

注意：
- 1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用。
- 2、如果ref 是循环出来的，有多个重名，那么ref的值会是一个数组，此时要拿到单个的ref 只需要循环就可以了。

this.$nextTick()

用法：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

页面刷新的方法：

location.reload()
this.$router.go(0)

这两种都可以刷新当前页面的，缺点就是相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验不好

this.$forceUpdate() 强制刷新

window.open() 直接打开链接

下载调接口方式：

例如：window.open(this.$http.pdfUrl + ‘?name=’ + row.ffjmc + ‘&path=’ + row.fdz);

let url = '';if (res.data.ftype == 'EXCEL') {url = this.$http.downloadExcel} else if (res.data.ftype == 'SHAPE') {url = this.$http.downloadZip}let dowUrl = url + '?key=' + res.data.content + '&name=' + row.name;window.open(dowUrl);

elementUI中的rules的正则表达式

在rules中的pattern中写正则表达式

<template><el-form :model="unuseForm" label-position="top" :rules="dialogRules"><el-form-item label="原因" prop="loseEfficacyReason"><el-input type="textarea" v-model="unuseForm.loseEfficacyReason" auto-complete="off"></el-input></el-form-item></el-form>
</template>
<script>
export default{data(){return {dialogRules: {loseEfficacyReason: [{ required: true, message: '请输入原因', trigger: 'blur' },{ min: 2, message: '请输入不少于2个字符', trigger: 'blur' },{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊符号' }]}}}
}
</script>

数组方法和字符串方法

forEach用来遍历数组

                         this.tableData.forEach(item => {this.sum += Number(item.zcount);});

array.forEach(function(currentValue, index, arr), thisValue)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YDyIiDFV-1661831084957)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220328113905871.png)]

for…in 遍历键遍历数组和对象
for…of 遍历值
for of只能遍历数组,不能遍历对象
for in遍历数组得到的是下标,遍历对象得到的是key值
for of遍历的是值,和forEach一样直接得到值
concat ，push方法都是可以用来处理数组的 concat拼接 push 尾插

用法：let resData=res.data.vector;resData.concat(this.dataList)//把res.data.vector拼接在this.dataList后面 resData.push(this.dataList)       //把this.dataList插入res.data.vector尾部

includes方法
- includes() 方法用于判断字符串是否包含指定的子字符串。
  
  如果找到匹配的字符串则返回 true，否则返回 false。

string.includes(searchvalue, start)
searchvalue 必需，要查找的字符串。
start   可选，设置从那个位置开始查找，默认为 0。
例如：
v-if="['质检通过', '质检错误', '权籍审核中', '权籍已审核', '已打证'].includes(scope.row.rwzt)"
var str = "Hello world, welcome to the Runoob。";
var n = str.includes("world");

slice方法

提取字符串的片断:
var str="Hello world!";
var n=str.slice(1,5);
//n 输出结果：ello
string.slice(start,end)
start   必须。 要抽取的片断的起始下标，第一个字符位置为 0。如果为负数，则从尾部开始截取。
end 可选。 紧接着要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

indexOf方法（字符串）

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果没有找到匹配的字符串则返回 -1。
var str="Hello world, welcome to the universe.";
var n=str.indexOf("e");//1

indexOf方法（数组）

indexOf() 方法可返回数组中某个指定的元素位置。

该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。

如果在数组中没找到指定元素则返回 -1。

array.indexOf(item,start)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R7aFofFX-1661831084962)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220328111536185.png)]

filter方法

array.filter(function(currentValue,index,arr), thisValue)

const arr = [{name: 'tom1',age: 23},{name: 'tom2',age: 42},{name: 'tom3',age: 17},{name: 'tom4',age: 13},
]
const res = arr.filter(item => item.age > 18);
console.log(res);
console.log(arr);

map方法

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。
```
array.map(function(currentValue,index,arr), thisValue)
```

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0mmVO1ZR-1661831084964)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220323145125188.png)]

实例:
返回一个数组，数组中元素为原始数组的平方根:var numbers = [4, 9, 16, 25];function myFunction() {x = document.getElementById("demo")x.innerHTML = numbers.map(Math.sqrt);
}
输出结果为:2,3,4,5

join() 方法

join() 方法用于把数组中的所有元素转换一个字符串。

元素是通过指定的分隔符进行分隔的。
```
array.join(separator)
```

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lBVFSnU3-1661831084964)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220323145751507.png)]

实例
把数组中的所有元素转换为一个字符串：var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
energy输出结果：Banana,Orange,Apple,Mango

splice方法

splice() 方法用于添加或删除数组中的元素。

**注意：**这种方法会改变原始数组。
```
array.splice(index,howmany,item1,.....,itemX)
```
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m2A5MvRO-1661831084965)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220323150630251.png)]

实例
移除数组的第三个元素，并在数组第三个位置添加新元素:var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
fruits 输出结果：Banana,Orange,Lemon,Kiwi,Mango

substring() 方法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

substring() 方法返回的子串包括开始处的字符，但不包括结束处的字符。

string.substring(from, to)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WeNyex7e-1661831084966)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220323172052458.png)]

在本例中，我们将使用 substring() 从字符串中提取一些字符：:<script>var str="Hello world!";
document.write(str.substring(3)+"<br>");
document.write(str.substring(3,7));</script>
以上代码输出结果:lo world!lo w

substr()方法

substr() 方法可在字符串中抽取从开始下标开始的指定数目的字符。

提示： substr() 的参数指定的是子串的开始位置和长度，因此它可以替代 substring() 和 slice() 来使用。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lv2AADZ4-1661831084967)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220323172329284.png)]

实例
在本例中，使用 substr() 从字符串第二个位置中提取一些字符：var str="Hello world!";
var n=str.substr(2)
n 输出结果:llo world!

Object.keys||Object.value方法

一、语法 Object.keys(obj)

参数：要返回其枚举自身属性的对象

返回值：一个表示给定对象的所有可枚举属性的字符串数组

二、处理对象，返回可枚举的属性数组

let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
Object.keys(person) // ["name", "age", "address","getName"]

三、处理数组，返回索引值数组

let arr = [1,2,3,4,5,6]
Object.keys(arr) // ["0", "1", "2", "3", "4", "5"]

四、处理字符串，返回索引值数组

let str = "saasd字符串"
Object.keys(str) // ["0", "1", "2", "3", "4", "5", "6", "7"]

五、常用技巧

let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
Object.keys(person).map((key)=>{person[key] // 获取到属性对应的值，做一些处理
})

六、Object.values()和Object.keys()是相反的操作，把一个对象的值转换为数组

Object.assign()方法

1. 对象合并
Object.assign 方法用于对象的合并，将源对象(source)的所有可枚举属性，复制到目标对象上。

vue动态样式设置

思路：
通过 v-bind：class="true ? style1 : style2 " 配合三元表达式完成样式的切换

例如：:class="{'activeColor':isActive}"

组件传值$refs

父组件页面引入子组件

<ShowDetail v-if="DetailVisible" ref="Detail" @refreshDataList="closeDialog"></ShowDetail>

父组件 components下写
provide() {return {closeDialog: this.closeDialog,};},
// 数据管理详情(点击详情 弹框)detailHandle(row) {this.DetailVisible = true;this.$nextTick(() => {this.$refs.Detail.init(row);});},
// 关闭弹框closeDialog() {this.DetailVisible = false;this.queryList();//调用列表页渲染的方法},

子组件
<el-dialog title="详情" :visible.sync="visible" width="1200px" @close="handleClose"></el-dialog>
接受父组件传过来的值：init(row) {this.zdRow = JSON.parse(JSON.stringify(row)); //避免深拷贝this.visible = true;},子组件 components下写
inject: ['closeDialog'],
写方法：
// 点X关闭handleClose() {this.closeDialog();},

动态组件

<components :is="com" ref="ToDetail"></components>
components里写要展示的子组件
data里写com: 'ZdjbxxMsg',coms: [ZdjbxxMsg, QlrMsg, LjzMsg, QszmclMsg],
写切换子组件的方法：
detail(index){this.com = this.coms[index];
}

el-tree组件 (选中树的第一个节点下的第一个孩子以及设置高亮样式)

el-tree上加上node-key=“id” :current-node-key=“currentNodekey” :default-expanded-keys=“treeExpandData” :highlight-current=“true”

data里写上
currentNodekey: '',
treeExpandData: [], //自己定义的用于接收tree树id的数组
provincialCenterId: '',
methods写上
// 获取树形结构默认展开节点getRoleTreeRootNode(provincialCenterId) {this.treeExpandData.push(provincialCenterId)},getTreeList() {this.provincialCenterId = this.treeData[0].id //默认展开第一个节点this.getRoleTreeRootNode(this.provincialCenterId)},//设置默认选中节点的样式treeByDept() {this.currentNodekey = this.treeData[0].children[0].id;}

style里写：

.el-tree--highlight-current .is-current.el-tree-node>.el-tree-node__content {background-color: #99ccff !important;
}

mounted调用 this.getTreeList()和 this.treeByDept()方法

合并列

//合并列arraySpanMethod({row,column,rowIndex,columnIndex}) {if (rowIndex === this.tableData.length - 1) {if (columnIndex === 1) {return [1, 2]} else if (columnIndex === 2) {return [0, 0]}}},

json.stringfy，json.parse()

json.stringfy()将对象、数组转换成字符串
json.parse()将字符串转成json对象。

表格第一行显示高亮

table上写 ref=“highlightTable” highlight-current-row

watch: {tableData() {this.$nextTick(() => {this.$refs.highlightTable.setCurrentRow(this.tableData[0])})}},

避免深拷贝 JSON.parse(JSON.stringify(object))

例如：init(row) {this.zdRow = JSON.parse(JSON.stringify(row)); //避免深拷贝},

组件传值方式

父子组件传参父组件给子组件传参数子组件调用父组件方法或者传参
$emit $on props

props:{
ss:{
type:Object Stirng Number Array Boolean
default:{} ‘’ 0 [] true/false
}
}

一、props / $emit

父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。

父组件向子组件传值

下面通过一个例子说明父组件如何向子组件传递数据：在子组件article.vue中如何获取父组件section.vue中的数据articles:[‘红楼梦’, ‘西游记’,‘三国演义’]

// section父组件
<template><div class="section"><com-article :articles="articleList"></com-article></div>
</template><script>
import comArticle from './test/article.vue'
export default {name: 'HelloWorld',components: { comArticle },data() {return {articleList: ['红楼梦', '西游记', '三国演义']}}
}
</script>// 子组件 article.vue
<template><div><span v-for="(item, index) in articles" :key="index">{{item}}</span></div>
</template><script>
export default {props: ['articles']
}
</script>

总结: prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 prop 只读，不可被修改，所有修改都会失效并警告。

子组件向父组件传值

$emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。通过一个例子，说明子组件如何向父组件传递数据。

在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标

// 父组件中
<template><div class="section"><com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article><p>{{currentIndex}}</p></div>
</template><script>
import comArticle from './test/article.vue'
export default {name: 'HelloWorld',components: { comArticle },data() {return {currentIndex: -1,articleList: ['红楼梦', '西游记', '三国演义']}},methods: {onEmitIndex(idx) {this.currentIndex = idx}}
}
</script>// 子组件中<template><div><div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</div></div></template><script>export default {props: ['articles'],methods: {emitIndex(index) {this.$emit('onEmitIndex', index)}}}</script>

拿到实例代表可以访问此组件的所有方法和data

三、provide/ inject

概念:provide/ inject 是vue2.0新增的api, 简单来说就是父组件中通过provide来提供变量, 然后在子组件中通过inject来注入变量。

注意: 这里不论子组件嵌套有多深, 只要调用了inject 那么就可以注入provide中的数据，而不局限于只能从当前父组件的props属性中回去数据

举例验证: 假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件，B是A的子组件

// A.vue<template><div><comB></comB></div>
</template><script>import comB from '../components/test/comB.vue'export default {name: "A",provide: {for: "demo"},components:{comB}}
</script>// B.vue<template><div>{{demo}}<comC></comC></div>
</template><script>import comC from '../components/test/comC.vue'export default {name: "B",inject: ['for'],data() {return {demo: this.for}},components: {comC}}
</script>// C.vue
<template><div>{{demo}}</div>
</template><script>export default {name: "C",inject: ['for'],data() {return {demo: this.for}}}
</script>

四、ref / refs

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可以通过实例直接调用组件的方法或访问数据

// 子组件 A.vueexport default {data () {return {name: 'Vue.js'}},methods: {sayHello () {console.log('hello')}}
}// 父组件 app.vue<template><component-a ref="comA"></component-a>
</template>
<script>export default {mounted () {const comA = this.$refs.comA;console.log(comA.name);  // Vue.jscomA.sayHello();  // hello}}
</script>

五、eventBus

ventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以通知其他组件。

eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

eventBus具体来实现组件之间的数据通信步骤:

1.初始化

首先需要创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它.

// event-bus.jsimport Vue from 'vue'
export const EventBus = new Vue()

2.发送事件

假设你有两个组件: additionNum 和 showNum, 这两个组件可以是兄弟组件也可以是父子组件；这里我们以兄弟组件为例:

<template><div><show-num-com></show-num-com><addition-num-com></addition-num-com></div>
</template>
<script>
import showNumCom from './showNum.vue'
import additionNumCom from './additionNum.vue'
export default {components: { showNumCom, additionNumCom }
}
</script>// addtionNum.vue 中发送事件
<template><div><button @click="additionHandle">+加法器</button>    </div>
</template>
<script>
import {EventBus} from './event-bus.js'
console.log(EventBus)
export default {data(){return{num:1}},methods:{additionHandle(){EventBus.$emit('addition', {num:this.num++})}}
}
</script>

3.接收事件

// showNum.vue 中接收事件<template><div>计算和: {{count}}</div>
</template><script>
import { EventBus } from './event-bus.js'
export default {data() {return {count: 0}},mounted() {EventBus.$on('addition', param => {this.count = this.count + param.num;})}
}
</script>

这样就实现了在组件addtionNum.vue中点击相加按钮, 在showNum.vue中利用传递来的 num 展示求和的结果.

4.移除事件监听者

如果想移除事件的监听, 可以像下面这样操作:

import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})

this.$message

this.$message({message: '下载失败，请重新导出任务',showClose: true,type: 'warning',duration: 2000});({message: '下载失败，请重新导出任务',showClose: true,type: 'warning',duration: 2000});

this.$prompt

 this.$prompt('请输入邮箱', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage: '邮箱格式不正确'，inputValidator: (val) => {if (val) {return true;} else {return false;}}}).then(({ value }) => {this.$message({type: 'success',message: '你的邮箱是: ' + value});}).catch(() => {this.$message({type: 'info',message: '取消输入'});       });

插槽

插槽是子组件中提供给父组件的一个占位符，父组件可以在这个占位符中填充任何模板代码，如HTML、组件等，填充的内容会替换子组件的标签。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

默认插槽

默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把未指定插槽的填充的内容填充到默认插槽中。

1.在子组件中放一个占位符
<template><div id=""><h1>今天天气状况：</h1><slot></slot></div>
</template><script>export default{name:'weatherSon',}
</script>

2.在父组件中给这个占位符填充内容
<template><div><div id="">使用slot分发内容</div><div id="" style="margin-top: 30px;"><WeatherSon><div>多云，最高气温34度，最低气温28度，微风</div></WeatherSon></div></div></template><script>import WeatherSon from '@/components/weatherSon';export default {name:'WeatherFather',components: {WeatherSon,}}
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z9iOdt8r-1661831084969)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220325154512748.png)]

具名插槽

具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。

1.子组件的代码，设置了两个插槽(header和footer)
<template><div id=""><div class="header"><h1>页头标题</h1><div id=""><!-- 存放页头的具体内容 --><slot name="header"></slot></div></div><div class="default"><h1>默认插槽的标题</h1><div><!-- 存放默认插槽的具体内容 --><slot></slot></div></div><div class="footer"><h1>页尾标题</h1><div id=""><!-- 存放页头的具体内容 --><slot name="footer"></slot></div></div></div>
</template><script>export default{name:'topicSon'}
</script>

2.父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中
<template><div id=""><div id="">使用slot分发内容</div><div id="" style="margin-top: 30px;"><TopicSon><template v-slot:header><h1>页头的具体内容</h1></template><template v-slot:footer><h1>页尾的具体内容</h1></template><template><h1>默认插槽的具体内容</h1></template></TopicSon></div></div>
</template><script>import TopicSon from '@/components/topicSon';export default{components:{TopicSon}}
</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C2gcXn0p-1661831084969)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220325155133770.png)]

注意：

父级的填充内容如果指定到子组件的没有对应名字插槽，那么该内容不会被填充到默认插槽中。即具名插槽用name属性来表示插槽的名字，不传为默认插槽
如果子组件没有默认插槽，而父级的填充内容指定到默认插槽中，那么该内容就不会填充到子组件的任何一个插槽中。
如果子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容，将会且全都填充到子组件的每个默认插槽中。

作用域插槽

作用域插槽其实就是带数据的插槽，即带参数的插槽，简单的来说就是子组件提供给父组件的参数，该参数仅限于插槽中使用，父组件可根据子组件传过来的插槽数据来进行不同的方式展现和填充插槽内容。

1.子组件存放一个带数据的插槽
<template><div class="child"><h3>子组件</h3><slot :data="data"></slot></div>
</template><script>export default{data(){return{data:['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']}}}
</script>

2.父组件通过 “slot-scope” 来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容
<template><div class="father"><h3>父组件</h3><!-- 第一次使用：用flex展示数据：class="tmpl" --><dataSon><template slot-scope="user"><div class="tmpl" style="display: flex;flex-direction: row;"><span v-for="item in user.data">{{item}}</span></div></template></dataSon><!-- 第二次使用：用列表展示数据 --><dataSon><template slot-scope="user"><ul><li v-for="item in user.data">{{item}}</li></ul></template></dataSon><!-- 第三次使用：直接显示数据 --><dataSon><template slot-scope="user">{{user.data}}</template></dataSon><!-- 第四次使用：不使用其提供的数据，作用域插槽退变成匿名插槽 --><dataSon>模板</dataSon></div>
</template><script>import dataSon from '@/components/dataSon.vue'export default{components:{dataSon}}
</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SiMJ0Utv-1661831084970)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220325155637556.png)]

深拷贝

function deepCopy(obj){let newObj={};for(let key in obj){if(typeof obj[key]=='object'){newObj[key]=deepCopy(obj[key])}}return newObj;
}

vue中$set的用法

$set用来更新数组或对象 $set接收3个参数，参数1:参数是需要更新的数组或对象，参数2:是数组的下标或者对象的属性名，参数3:是更新的内容

$set用于更新数组：let arr = ["星期一","星期二","星期日"]
this.$set(arr,2,"星期三")   //第一个参数是数组，第二个参数是下标索引，第三个参数是新的内容
//更新之后的arr是["星期一","星期二","星期三"]

$set用于更新对象：//对象的属性sex的值更新为"男"
let obj = {name:"六四",age:18,sex:"女"}this.$set(obj,"sex","男")   //第一个参数是对象，第二个参数是更新的属性名称，第三个参数是新的内容

给对象中插入数组

this.$set(对象, key, 数组)

例如： this.$set(this.modelForm, “Authorizers”, this.chooseData);

                var arr = this.selections;var result = [];for (var i = 0; i < arr.length; i++) {var obj = arr[i];result.push({"userId": obj.userId,"userName": obj.userName,})}this.userNameList = result;this.$set(this.dataFormParam, "groupId", this.groupId);this.$set(this.dataFormParam, "userList", this.userNameList);

$bus传方法

this.$bus.$on('initList', (msg) => {this.getNewsCount();})//获取消息条数getNewsCount() {let params = {userId: this.userId}this.$http({url: "/message/getList",method: "get",params: params}).then((res) => {this.count = res.data.total;});},

watch监听

vue中的监听方法

watch

注意

名字你想监听哪个属性，就要和他起一样的名字

1.作用

用来监听vue实例中的数据变化
可以随时修改状态的变化

2.触发条件

当你监听的属性发生变化时，会自动调用对应的监听方法

3.使用场景

用于异步处理，开销比较大的运算

4.示例

watch:{name(newvalue,oldvalue){//计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值// this.age// console.log('name属性发生变化了')console.log(newvalue,oldvalue)}

5.监听对象时

<script>
export default {data() {return {obj: {name: "张三",age: 20,children: [{name: "李四",age: 27},{name: "王五",age: 23}]}};},watch: {obj: {handler: function(newVal, oldVal) {console.log("newVal:", newVal);console.log("oldVal:", oldVal);},deep: true,immediate: true},"obj.name": function(newVal, oldVal) {console.log("newVal obj.name:", newVal);console.log("oldVal obj.name:", oldVal);}},
};
</script>

监听对象的时候，需要加deep:true，这样才能深入底层去实时监听，如果没有加的话，对象是监听不到变化的。

immediate属性：布尔值
immediate：true：首次加载就监听数据变化
immediate：false：只有发生改变才监听

deep:true；

是开启深层次的监听，即所有属性都加上监听器，如果其中一个发生改变了就执行handler函数。

VUE watch监听器的基本使用方法详解

侦听器一般来说是用来监听数据的变化，默认是在数据发生变化时执行。

监听的数据名放到这里面作为函数名，这个函数里面有两个参数，一个是新值，一个是旧值。

在vue中，使用watch来响应数据的变化，关于watch的用法大致有三种。

1、下面代码是watch的一种简单的用法

<div id="app"><input type="text" v-model="firstName" /></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var vm=new Vue({el:"#app",data:{firstName:"张"},watch:{         firstName：(newVal,oldVal){//firstName即为你想监听的数据的名称，要监听谁函数名就用谁的 如监听v-model的firstName                    //newVal：表示改变后的值，即第一个形参，不要调换位置//oldVal：表示改变前的值，console.log({newVal,oldVal});   //  {newVal: "陈", oldVal: "张"}}//直接写一个监听处理函数，当每次监听到cityName值发生改变时，执行函数。//也可以在所监听的数据后面直接加字符串形式的方法名：firstName: 'nameChange'},methods:{nameChange(){}}})vm.firstName = "陈"；//改变监听的值</script>

2、immediate 立即监听

使用watch基本用法时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。

watch: {firstName: {handler(newName, oldName) {this.fullName = newName + ' ' + this.lastName;},{ immediate: true }}}

监听的数据后面写成对象形式，包含handler方法和immediate，上面简单的写法我们写的函数其实就是在写这个handler方法、默认省略而已。

3、handler方法

<div id="app"><div><p>Number: {{ myNumber }}</p><p>Number: <input type="text" v-model.number="myNumber"></p></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new Vue({el: '#app',data: {myNumber: 'Dawei'},watch: {myNumber: {handler(newVal, oldVal) {console.log('newVal', newVal);console.log('oldVal', oldVal);},//immediate为true时则立即触发回调函数；如果为false，则和上面的例子一样，不会立即执行回调。immediate: true}}})</script>
//handler方法就是你watch中需要具体执行的方法

4、 deep属性

对于对象或者对象中的属性，我们如何监听？那么就介绍deep属性。它的作用就是解决这个问题的关键。

 <div id="root"><p>obj.a: {{obj.a}}</p><p>obj.a: <input type="text" v-model="obj.a"></p></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>new Vue({el: '#root',data: {obj: {a: 123}},watch: {obj: {handler(newName, oldName) {console.log(newName, oldName);},immediate: true,deep:true}} 'obj.name' (val) { // 可以监听对象的单个属性　　　　console.lov(val)　　}})</script>

上面的代码如果不加deep:true 那么console中就不会执行，只执行第一次，输出结果为undefined

默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到。

这个时候就可以使用deep深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样消耗过大。

https://blog.csdn.net/yang_computer/article/details/124547783

vue-wrap-editor 加验证

//html代码
<el-col :span="24"><el-form-item label="*文章内容:" prop="articleContent" v-show="text=='1'"><label slot="label"><span style="color: #F56C6C;margin-right: 4px;">*</span>文章内容:</label><VueUeditorWrap v-model="form.articleContent" :config="config" ref="ue"></VueUeditorWrap></el-form-item>
</el-col>
//javascript代码
if (this.$refs.ue.editor.getContentTxt().length == 0) {this.$message.error('请填写文章内容')
}

清除表单验证

https://blog.csdn.net/xxly1994/article/details/126037621

生成随机id

randomLenNum(len, date) {var random = ''random = Math.ceil(Math.random() * 100000000000000).toString().substr(0, typeof len ==='number' ? len : 4)if (date) random = random + Date.now()this.form.id = random;return this.form.id;},

JS 中常用判断为空的方法

https://blog.csdn.net/CEZLZ/article/details/121153716

js获取当前日期

 //获取当前日期timeChange(time) {var date = new Date();var year = date.getFullYear() + '-';var month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() + ' ';var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() + ':';var minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ':';var ss = date.getSeconds() < 10 ? '0' + date.getDate() : date.getSeconds() ;return year+month+day+hours+minute+ss;},

uniapp,vue学习笔记相关推荐

菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Vue学习笔记进阶篇——Render函数
本文为转载,原文:Vue学习笔记进阶篇--Render函数基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编 ...
Vue学习笔记入门篇——数据及DOM
本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...
vue学习笔记-03-浅谈组件-概念，入门，如何用props给组件传值？
vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 文章目录 vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值? 什么是组件? 为什么要使用组件? 如何使用 ...
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念
vue学习笔记-02-前端的发展历史浅谈mmvm设计理念文章目录 1. MVVM模式的实现者 2.第一个vue程序 3.什么是mvvm? 4.为什么要用mvvm? 5.mvvm的组成部分 7.MVV ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...
vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
好程序员教程分析Vue学习笔记五
好程序员教程分析Vue学习笔记五,上次我们学习了Vue的组件,这次我们来学习一下路由的使用.在Vue中,所谓的路由其实跟其他的框架中的路由的概念差不多,即指跳转的路径. 注意:在Vue中,要使用路由, ...
Vue学习笔记：使用CLI构建Vue项目
Vue学习笔记:使用CLI构建Vue项目一.安装Vue CLI 要用到集成在node.js里的npm来安装Vue CLI. 1.下载并安装node.js 2.配置node.js的环境变量 3.启动命 ...
Vue学习笔记（五）—— 状态管理Vuex
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试 ...

uniapp,vue学习笔记