1Vue2 基础代码 部分
<script>
export default {
name: "Home",
data() {
return {};
},
methods: {
// 组件的方法
},
watch: {
// watch擅长处理的场景：一个数据影响多个数据
},
computed: {
// computed擅长处理的场景：一个数据受多个数据影响
},
beforeCreate: function() {
// 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
},
created: function() {
// 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
},
beforeMount: function() {
// 在挂载开始之前被调用：相关的 render 函数首次被调用。
},
mounted: function() {
// 编译好的HTML挂载到页面完成后执行的事件钩子
// el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
// 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
console.log("Home done");
},
beforeUpdate: function() {
// 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
},
updated: function() {
// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
// 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
// 该钩子在服务器端渲染期间不被调用。
},
beforeDestroy: function() {
// 实例销毁之前调用。在这一步，实例仍然完全可用。
},
destroyed: function() {
// Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
}
};
</script>
Vue2 组件间的传值：
1 父组件向子组件、
//父组件
<Son :msg="message" :user="userinfo"></Son>
data(){
return {
message: 'hello vue.js',
userinfo: { name: 'zs', age: 20 }
}
}
//子组件
<template>
<div>
<h5>Son 组件</h5>
<p>父组件传递过来的 msg 值是: {{ msg }}</p>
<p>父组件传递过来的 user 值是: {{ user }}</p>
</div>
</template>
props: ['msg', 'user']
传递数据效果与’ = '类似，简单数据类型为拷贝，复杂数据类型为引用
当子组件对对象进行修改时，父组件中的对象同样会被修改，但对象重新赋值则不会被影响
子组件向父组件
//子组件
export default {
data(){
return { count: 0 }
},
methods: {
add() {
this.count++
//修改数据时，通过$emit() 触发自定义事件
this.$emit('numchange', this.count)
}
}
}
// 父组件
// 在组件上绑定事件都作为属性传递 不能绑定上事件
// 如果需要在子组件上绑定原生事件 需要加上事件修饰符.native 即为正常的绑定事件
<Son @numchange="getNewCount"></Son>
export default {
data(){
return { countFromSon: 0 }
},
methods: {
getNewCount(val) {
this.countFromSon = val
}
}
}
兄弟组件之间
在vue 2.x中，兄弟组件之间的数据共享方案是EventBus
创建eventBus.js模块，并向外共享一个Vue的实例对象
在数据发送方，调用bus.$emit(‘事件名称’, 要发送的数据)方法触发自定义事件
在数据接收方，调用bus.$on(‘事件名称’, 事件处理函数)方法注册一个自定义事件
//兄弟组件A(数据发送方)
import bus from './eventBus.js'
export default {
data(){
return { msg: 'hello vue.js' }
},
methods: {
sendMsg() {
bus.$emit('share', this.msg)
}
}
}
//eventBus.js
import Vue from 'vue'
//向外共享Vue实例对象
export default new Vue()
//兄弟组件C(数据接收方)
import bus from './eventBus.js'
export default {
data(){
return { msgFromLeft: '' }
},
created(){
bus.$on('share', val =>{
this.msgFromLeft = val
})
}
}
Provide inject
父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这个数据
// src/components/MyMap.vue
<template>
<MyMarker />
</template>
<script>
import MyMarker from './MyMarker.vue'
export default {
components: {
MyMarker
},
// -----------------------------------
provide: { // provide第一种写法
location: 'North Pole',
geolocation: {
longitude: 90,
latitude: 135
}
}
//--------------------------------------
provide(){
return {
location: 'North Pole', // provide第二种写法 函数返回对象
geolocation: {
longitude: 90,
latitude: 135
}
}
}
}
</script>
// src/components/MyMarker.vue
<script>
export default {
// -----------------------------------------------
inject: ['location', 'geolocation'] // 第一种写法
// -------------------------------------------------
inject:{
loc:'location', // inject的第二种写法 是一个对象
geo:{ // inject的第三种写法 geo为变量名
from:'geolocation', // 从哪个变量注入
default:'default d value' // 默认值
}
}
}
</script>
VUEX
sessionStorage传值
路由传值
ref/refs（父子组件通信）
）ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，
（2）可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种
promise传参
$parent
通过parent可以获父组件实例 ，
等比例缩放、vw,vh、rem的使用
Vue 2 解决跨域问题
当浏览器报如下错误时，则说明请求跨域了。
- 为什么会跨域:
因为浏览器同源策略的限制，不是同源的脚本不能操作其他源下面的对象。
- 什么是
同源策略:
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。简单的来说:
协议、IP、端口三者都相同，则为同源 -
二、解决办法
跨域的解决办法有很多，比如script标签 、jsonp、后端设置cros等等...,但是我这里讲的是webpack配置vue 的 proxyTable解决跨域。
这里我请求的地址是 http://www.thenewstep.cn/test/testToken.php
那么在ProxyTable中具体配置如下:
proxyTable: {
'/apis': {
// 测试环境
target: 'http://www.thenewstep.cn/', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/apis': '' //需要rewrite重写的,
}
}target：就是需要请求地址的接口域名
配置完必须要重启node服务才会生效！！！
这里列举了2种数据请求方式： fecth和axios
1、 fetch方式:
在需要请求的页面，只需要这样写(/apis+具体请求参数)，如下：
fetch("/apis/test/testToken.php", {
method: "POST",
headers: {
"Content-type": "application/json",
token: "f4c902c9ae5a2a9d8f84868ad064e706"
},
body: JSON.stringify(data)
})
.then(res => res.json())
.then(data => {
console.log(data);
});2、axios方式:
main.js代码
import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = axios //将axios挂载在Vue实例原型上
// 设置axios请求的token
axios.defaults.headers.common['token'] = 'f4c902c9ae5a2a9d8f84868ad064e706'
//设置请求头
axios.defaults.headers.post["Content-type"] = "application/json"axios请求页面代码
this.$axios.post('/apis/test/testToken.php',data).then(res=>{
console.log(res)
})Vue 使用 vue-i18n 实现前端国际化
【VUE】8、VUE项目中集成vue-i18n实现前端国际化_vuei18n前端国际化-CSDN博客
vue项目 i18n 国际化完整教程_vue-i18n版本-CSDN博客
ElementUI 实现动态表单数据校验
定义我们需要的form表单与校验规则
// 表单数据
form: {
databaseName: '',
description: '',
dataSourceConfig: []
},
rules: {
username: { required: true, message: "请输入名称", trigger: 'blur' },
ip: { required: true, message: "请输入ip", trigger: 'blur' },
port: [{ required: true, message: '端口号不能为空', trigger: 'blur' },
{ type: 'number', message: '端口号必须为数字值', trigger: 'blur' }
],
db: { required: true, message: "请输入库名", trigger: 'blur' },
password: { required: true, message: "请输入密码", trigger: 'blur' },
databaseType: { required: true, message: "请输入数据库类型", trigger: 'blur' },
databaseName: {
required: true, message: `名称不能为空`, trigger: 'blur'
}
methods:
// 获取参数列表
getDataSourceParams(code).then(res => {
this.form.dataSourceConfig = res.data.data;
this.loading = false
})
- Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
- Form-Item的prop属性需要与对应的v-model绑定的值一致（如上案例prop属性设置的字段名为value，input的v-model绑定值也是value），否则校验会不生效。
- el-form标签绑定的对象 :model="form" :rules="rules"，这里的form就是我们用到的表单那个对象，rules就是我们定义的校验规则。
- 数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。例如：v-model.number="form.phone"
ElementUI 实现动态表单数据校验（已解决）_elementui动态表单校验_不一123的博客-CSDN博客
element-ui实现动态添加表单项并实现事件触发验证验证_element动态添加表单并验证_reason.的博客-CSDN博客
引入谷歌地图
谷歌地图使用原生JS获取和标记当前位置_wllsunshine的博客-CSDN博客
从零开始学google地图API(5)--粗略获取当前位置_谷歌地图api获取当前位置-CSDN博客
【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图-CSDN博客
uni-app 中如何使用谷歌地图 !?_uniapp 使用谷歌地图_fail-request的博客-CSDN博客
vue中draggable
vue中draggable使用说明_vuedraggable_张媛的博客的博客-CSDN博客
生成二维码
qrcodejs2--Vue生成二维码组件封装_qrcodejs2样式-CSDN博客
钉钉推送新人入职欢迎
调用钉钉API发送消息通知给个人或部门_平台怎么对接钉钉发送消息给个人-CSDN博客
二次加密 对薪酬福利模块进行
rsa加密
uni-app端rsa加密_希望大佬文章可以白嫖的博客-CSDN博客
前端接口RSA加密（h5+小程序，支持超长内容、中文字符）_前端rsa加密-CSDN博客
浅浅学习一下OpenSSL_openssl 入门_Hkcoco的博客-CSDN博客
腾讯云实现视频通话
uniapp：小程序对接腾讯云语音视频通话，简单demo_uniapp语音通话-CSDN博客
HBuilder（H5+App）中集成腾讯云通信IM功能_txim sdk h5-CSDN博客
利用插件实现
移动端安卓和 iOS 的消息推送。
购买 个推服务
Android，ios,安卓app推送消息通知,java后台向手机推送app的通知教程_android实现消息通知_杵意的博客-CSDN博客
uniapp h5页面集成企业微信js-sdk_uniapp jssdk 企业微信-CSDN博客
前端基于uniapp[uniPush]实现APP消息推送（安卓、IOS）_app离线消息推送_唯心所现，唯识所变的博客-CSDN博客
app推送（uniPush）爬坑记！！_unipush离线推送-CSDN博客
个推(uniPush)简介及使用经验_宇智波小强的博客-CSDN博客
Uinapp navigate 钩子
uniAPP中的navigat钩子是用于监听页面跳转的生命周期函数。当页面跳转时，可以在navigat钩子中执行一些操作，例如获取跳转参数、判断用户是否登录等。navigat钩子
包括beforeEnter、beforeLeave和afterLeave三个生命周期函数。
其中，beforeEnter在页面进入前执行，beforeLeave在页面离开前执行，afterLeave在页面离开后执行。通过在这些钩子函数中编写代码，可以实现更加灵活的页面跳转控制和数据处理
uni-app页面跳转以及传值_uniapp跳转页面传参数_无心的空白的博客-CSDN博客
能说出原生小程序和uniapp小程序的生命周期钩子-CSDN博客
Uin APP 条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
写法： 以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在#ifndef：if not defined 除了某平台均存在%PLATFORM%：平台名称
| 值 | 生效条件 | 版本支持 |
|---|---|---|
| VUE3 | uni-app js引擎版用于区分vue2和3，详情 | HBuilderX 3.2.0+ |
| UNI-APP-X | 用于区分是否是uni-app x项目 详情 | HBuilderX 3.9.0+ |
| uniVersion | 用于区分编译器的版本 详情 | HBuilderX 3.9.0+ |
| APP | App | |
| APP-PLUS | uni-app js引擎版编译为App时 | |
| APP-PLUS-NVUE或APP-NVUE | App nvue 页面 | |
| APP-ANDROID | App Android 平台 详情 | |
| APP-IOS | App iOS 平台 详情 | |
| H5 | H5（推荐使用 WEB） | |
| WEB | web（同H5） | HBuilderX 3.6.3+ |
| MP-WEIXIN | 微信小程序 | |
| MP-ALIPAY | 支付宝小程序 |
支持的文件
- .vue/.nvue/.uvue
- .js/.uts
- .css
- pages.json
- 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug
1219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
