雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码
分享到：

前端之旅

去分类设置中添加分类描述吧

vue2 和 vue3 有哪些区别

2021-05-14admin阅读(7)评论(0)

总结出一些基本的区别

Vue3的新特性，如下：

  • 速度更快
  • 体积减少
  • 更易维护
  • 更接近原生
  • 更易使用

vue3相比vue2

  • 重写了虚拟Dom实现
  • 编译模板的优化
  • 更高效的组件初始化
  • undate性能提高1.3~2倍
  • SSR速度提高了2~3倍

compositon Api

  • 可与现有的Options API一起使用
  • 灵活的逻辑组合与复用
  • Vue3模块可以和其他框架搭配使用

Vue 3 中需要关注的一些新功能包括：

  • framents
  • Teleport
  • composition Api
  • createRenderer

framents

在 Vue3.x 中，组件现在支持有多个根节点

Teleport
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”

在vue2中，像 modals,toast 等这样的元素，如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难
通过Teleport，我们可以在组件的逻辑位置写模板代码，然后在 Vue 应用范围之外渲染它

1
2
3
4
5
6
7
<button @click="showToast" class="btn">打开 toast</button>
<!-- to 属性就是目标位置 -->
<teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
        <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
</teleport>

其他小改变

destroyed 生命周期选项被重命名为 unmounted

beforeDestroy 生命周期选项被重命名为 beforeUnmount

[prop default工厂函数不再有权访问 this 是上下文

自定义指令 API 已更改为与组件生命周期一致

data 应始终声明为函数

来自 mixin 的 data 选项现在可简单地合并

attribute 强制策略已更改

一些过渡 class 被重命名

组建 watch 选项和实例方法 $watch不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。

<template> 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 现在被视为普通元素，并将生成原生的 <template> 元素，而不是渲染其内部内容。

在Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML，这意味着容器本身不再被视为模板的一部分。

vue 如何封装一个 input 组件

2021-05-14admin阅读(7)评论(0)

首先我们需要知道:

v-model实际上只是一个语法糖：

<input v-model=”password”>

作用与以下相似：

<input type=”text” :value=”password” @input=”password=$event.target.value”>

也就是通过v-model传递的值，最终是传递给了子组件props中value属性，子组件修改value值需要通过触发input事件并传递需要修改的值给父组件。

如果知道了这个, 那我们封装一个 简单的input 组件就很简单了~

父组件

1
2
<aaa v-model="vvvalue" />
<div class="p">{{ vvvalue }}</div>

子组件

1
<input @input="$emit('input', $event.target.value)" type="text" />

使用 URLSearchParams 获取地址栏参数

2021-05-12admin阅读(10)评论(0)

基本信息详情:

1
2
3
4
5
6
7
8
9
10
let params = new URLSearchParams();
// 通过 append() 方法添加所有的选项值
params.append('a', 'bmw');
params.append('b', 'audi');
params.append('c', 'mercedes');
const searchString = params.toString();
 
// 解析也同样简单
params = new URLSearchParams(`https://www.baidu.com/s?wd=URLSearchParams&rsv_spt=1&rsv_iqid=0xae7520f1000047de&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_dl=tb&rsv_enter=1&oq=js%2520Bridge&rsv_btype=t&inputT=875&rsv_t=ce168%2FX7pGBcSOLm1iiww8GNa1okeBnWIYYnZWP%2Fo6d8XCXDT04t%2BDIxWRwBzmWJBtCa&rsv_pq=ae07b38e0000485c&rsv_sug3=6&rsv_sug1=5&rsv_sug7=100&rsv_sug2=0&prefixsug=URLSearchParams&rsp=0&rsv_sug4=875`);
console.log(params.get('rsv_enter'));

 

无人机拍摄的全景素材合成为720全景图片教程

2021-05-08admin阅读(34)评论(0)

无人机拍摄的全景素材合成为全景图片视频教程, 教你快速合成720全景图片;

下面是一个简单的视频介绍:

看完视频, 若还有有疑问,  请加入芊云全景互助交流群:

加入群聊立牌

芊云全景互助视频教程

PHPstorm 的 Material UI 主题插件收费了, 怎么继续使用主题样式

2021-04-20admin阅读(106)评论(0)

之前我写博客推荐过这个插件,

phpstorm 开局必备的几款插件和主题

用了这个插件, 我的 phpstorm 简直是换了个编辑器, 颜值很高;

但是最近升级phpstorm 之后插件也一起升级了, 发现 这个插件无法使用了, 今天查了一下原来是收费了,

现在是一个月 1.5美元, 一年是 15美元

作为一个穷鬼, 我当然买不起啊 ~~

于是想到一个方案, 之前不收费的, 现在收费, 我下载之前的版本不升级不就可以了吗?

于是我找到了版本记录: https://plugins.jetbrains.com/plugin/8006-material-theme-ui/versions

经过我的测试, 目前 Material_Theme-5.7.0 这个版本是可以用的, 提示升级, 但是你别升级就可以了!

6971618916052_.pic_hd

真香~~

在线吃瓜, 你们想要的某网红65页PPT/PDF

2021-04-15admin阅读(65)评论(0)

大家都在刷某项网红和某CEO的瓜,  我其实很早就在微博吃完了这个瓜;

但是我发现一个很有意思的事情, 很多人都在问: 求 65页PPT ??

大家真的是分不清楚 PPT 和 PDF 的区别吗?

  • 1、全称不同。PDF全称是Portable Document File，PPT全称是PowerPoint。
  • 2、文件类型不同。PPT 是与文档（Word）,表格（Excel）并列的一种演示文稿，PDF 则是PDF文件。
  • 3、文档后缀名不同。PPT文件的后缀名为：.ppt或.pptx;而PDF文件的后缀名为.pdf。

这是知乎某位大佬搬运过来的瓜, 比较新鲜的:

https://www.zhihu.com/answer/1834545634

或者可以微博搜索: 时代尖兵

里面有原版的瓜, 口感特好;

这里是女主的最新回应: https://m.weibo.cn/status/4624360209910957?

还有女主辩解的新瓜:  https://m.weibo.cn/3267970202/4625564524614727

 

 

uniapp的usingcomponents定义与用法

2021-04-14admin阅读(154)评论(0)

昨天需要使用小程序的两个插件:

plugin://chatGroupPlugin/cell   和  “cell”: “plugin://contactPlugin/cell”

结果发现 uniapp 的自定义组件无法使用,

我是写在 页面的生命周期同级, 新建一个

usingComponents: {}

因为我记得 wepy 就是 这样的写法, 但是发现编译完成后 自定义组件里并没有我写的插件, 写入 components 也是无效,

于是百度找了很多资料, 都没有结果, 或者写的不对,

我直接诶修改编译完成后的 文件, 里面增加 plugin://chatGroupPlugin/cell   和  “cell”: “plugin://contactPlugin/cell” 两个组件都可以显示,

指导后来查文档才发现:

需要定义在page里面:

1
2
3
4
5
6
7
8
9
10
11
{
"path": "pages/card/index",
"style": {
"navigationBarTitleText": "用户名片主页",
"mp-weixin": {
"usingComponents": {
"cell": "plugin://contactPlugin/cell"
}
}
}
},

这样定义就可以; 有点奇葩~

具体结果可以查看小程序:

531618381258_.pic

vue 异步动态组件加载方案

2021-04-03admin阅读(72)评论(0)

今天想到一个方案, 想动态加载不同的组件, 尝试了几种办法,

先看看官方文档说: https://cn.vuejs.org/v2/guide/components-dynamic-async.html

这里的异步组件工厂函数也可以返回一个如下格式的对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

 

大概看明白了, 然后我们尝试一下, 上才艺:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<style lang="less" scoped></style>
<template>
  <div class="page">
    <component v-bind:is="componentFile" />
  </div>
</template>
 
<script>
/** 名片定制
* Created by iyahe@qq.com
* Date: 2021/4/3
* Time: 12:25
* Description:
*/
export default {
  name: "index",
  mixins: [],
  data() {
    return {
      componentFile: null
    }
  },
  computed: {},
  watch: {},
  components: {},
  methods: {
    async render () {
      const pathName = await this.getName();
      this.componentFile =  ()  => ({
        component: import(`./${pathName}`),
        loading: { template: '<div>组件加载中</div>' },
        error:  { template: '<div>组件加载错误</div></div>' },
        delay: 200,
        timeout: 10000
      });
    },
    async getName(){
     return new Promise(resolve => {
       setTimeout(_=>{
         resolve('page/auto')
       }, 1000)
     })
    }
  },
  async created() {
    await this.render()
  },
  mounted() {}
}
</script>

通过setTimeout模拟一个异步获取组件名称, 然后加载组件!

 

 

泰山VR全景-带你一睹泰山风景-泰山之巅

2021-03-26admin阅读(148)评论(0)

特别说明:

该360度全景是在泰山之巅天街附近拍摄，这里可以观看泰山全貌，从南天门到天街上山的这段路程，是大量的游人，香客上山必经之路，人来人往，热闹非凡，您可以全视角观看这段路程壮丽景观。

真的很期待有一天能亲自登上山顶去看看~

全景作品来自 芊云全景摄影师: pano360

https://vr.he29.com/v3/tour/1666.html

VR全景怎么发?教你使用手机来拍摄VR照片-体验720全景

2021-03-21admin阅读(201)评论(0)

文章来源[芊云VR全景]: https://vr.he29.com/v3/article/content/53.html

VR全景是基于全景图像的真实场景虚拟现实技术，是虚拟现实技术中非常核心的部分。全景是把相机环360°拍摄的一组或多组照片拼接成一个全景图像，通过计算机技术实现全方位互动式观看的真实场景还原展示方式。

首先准备工作:

  1. 1. 准备一个安卓手机

安卓使用安卓手机下载谷歌相机App;

谷歌相机下载方法: 可以自己去百度;

建议下载酷安app, 安装 太极 ,然后将谷歌相机安装在太极app中;

因为 国内安卓手机兼容性问题, 谷歌相机在大部分手机上会闪退, 太极 app 可以阻止手机 app 闪退

酷安地址: https://www.coolapk.com/

太极 app 如图, 谷歌相机如图;

下载 酷安 后, 直接搜索 谷歌相机  即可安装

安装成功后打开 谷歌相机 app, 如果闪退; 则在酷安 搜索: 太极  下载太极app

下载成功后,  使用 太极 创建应用, 然后找到谷歌相机 创建即可;

创建成功后即可打开 谷歌相机 app, 选择拍摄全景

然后根据手机提示, 将准心对准 app 上面的点, 即可自动拍摄, 直至所有点全部拍摄完成, 等待合成后, 全景照片就完成了!

全景照片合成成功后, 如图:

然后我们就可以 上传到 芊云全景 进行制作了;

制作成功后, 我们就可以把全景照片分享给好友, 进行 720 旋转查看了

学会了吗?

若还是没有学会, 请加入 芊云全景交流群:

  • 1
  • 2
  • 3
  • 4
  • ...
  • 下一页
  • 共 12 页
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
  • vcard - 二维码名片的格式及扫码导入-雅荷心语博客vcard – 二维码名片的格式及扫码导入2016-05-05评论(2)
2021年5月
一 二 三 四 五 六 日
« 四    
 12
3456789
10111213141516
17181920212223
24252627282930
31  

最新评论

  • 前端小武 4年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 4年前 (2017-03-03)说：
  • Dawn 5年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 5年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 5年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

左邻右舍

  • Brian's Blog
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2021 雅荷心语博客   网站地图

emlogdux_heademlogdux_footer