六块腹肌的长者

六块腹肌的长者 查看完整档案

上海编辑商丘师范学院  |  自动化 编辑上海谋乐网络科技  |  前端开发 编辑填写个人主网站
编辑

前端工程师

个人动态

六块腹肌的长者 关注了用户 · 2019-10-11

聪明的汤姆 @baisefengche

喜欢研究不为人知的前端技巧,公众号「前端宇宙情报局」作者

关注 8

六块腹肌的长者 收藏了文章 · 2019-10-11

稍微整理了几个经常在H5移动端开发遇到的东西😢

不用说我也知道,此类文章太多太多了,常见的譬如:

viewport强制浏览器全屏IOS的Web APP模式可点击元素出现阴影(这个我觉得真没必要去掉,用户点击是需要反馈的,而这个背景色刚刚好提供了一种反馈)等等,太多啦,这些相信大家百度一下就可以查到很多资料😂

本篇文章主要是讲一些其他的或者优化手段。内容不多😂

1. 弹出数字键盘

<!-- 有"#" "*"符号输入 -->
<input type="tel">

<!-- 纯数字 -->
<input pattern="\d*">

安卓IOS的表现形式应该不一样,大家可以自己试试。当运用了正则pattern后,就不用关注input的类型了😂

2. 调用系统的某些功能

<!-- 拨号 -->
<a href="tel:10086">打电话给: 10086</a>

<!-- 发送短信 -->
<a href="sms:10086">发短信给: 10086</a>

<!-- 发送邮件 -->
<a href="mailto:839626987@qq.com">发邮件给:839626987@qq.com</a>

<!-- 选择照片或者拍摄照片 -->
<input type="file" accept="image/*">

<!-- 选择视频或者拍摄视频 -->
<input type="file" accept="video/*">

<!-- 多选 -->
<input type="file" multiple>

同上🤦‍♂️

3. 打开原生应用

<a href="weixin://">打开微信</a>
<a href="alipays://">打开支付宝</a>
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫功能</a>
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>

这种方式叫做URL Scheme,是一种协议,一般用来访问APP或者APP中的某个功能/页面(如唤醒APP后打开指定页面或者使用某些功能)😒

URL Scheme的基本格式如下:

     行为(应用的某个功能/页面)    
            |
scheme://[path][?query]
   |               |
应用标识       功能需要的参数

一般是由APP开发者自己定义,比如规定一些参数或者路径让其他开发者来访问,就像上面的例子🍤

注意事项:

  • 唤醒APP的条件是你的手机已经安装了该APP
  • 某些浏览器会禁用此协议,比如微信内部浏览器(除非开了白名单)

后面应该会专门写一篇文章用来探讨唤醒APP😒

4. 解决active伪类失效

<body ontouchstart></body>

body注册一个空事件即可😂

5. 忽略自动识别

<!-- 忽略浏览器自动识别数字为电话号码 -->
<meta name="format-detection" content="telephone=no">

<!-- 忽略浏览器自动识别邮箱账号 -->
<meta name="format-detection" content="email=no">

当页面上的内容包含了手机号/邮箱等,会自动转换成可点击的链接😁

比如你有如下代码:

<p>13192733603</P>

但是有些浏览器会识别为手机,并且可以点击拨号😒

6. 解决input失焦后页面没有回弹

一般出现在IOS设备中的微信内部浏览器,出现的条件为:

  • 页面高度过小
  • 聚焦时,页面需要往上移动的时候

所以一般input在页面上方或者顶部都不会出现无法回弹🤣

解决办法为,在聚焦时,获取当前滚动条高度,然后失焦时,赋值之前获取的高度:

<template>
  <input type="text" @focus="focus" @blur="blur">
</template>

<script>
  export default {
    data() {
      return {
        scrollTop: 0
      }
    },
    
    methods: {
      focus() {
        this.scrollTop = document.scrollingElement.scrollTop;
      },
      
      blur() {
        document.scrollingElement.scrollTo(0, this.scrollTop);
      }
    }
  }
</script>

6. 禁止长按

以上行为可以总结成这几个(每个手机以及浏览器的表现形式不一样):长按图片保存长按选择文字长按链接/手机号/邮箱时呼出菜单

想要禁止这些浏览器的默认行为,可以使用以下CSS

// 禁止长按图片保存
img {
  -webkit-touch-callout: none;
  pointer-events: none; // 像微信浏览器还是无法禁止,加上这行样式即可
}

// 禁止长按选择文字
div {
  -webkit-user-select: none;
}

// 禁止长按呼出菜单
div {
  -webkit-touch-callout: none;
}

7. 滑动不顺畅,粘手

一般出现在IOS设备中,自定义盒子使用了overflow: auto || scroll后出现的情况。

优化代码:

div {
  -webkit-overflow-scrolling: touch;
}

8. 屏幕旋转为横屏时,字体大小会变

具体出现的情况不明😒,有时候有有时候没有,欢迎指出。

优化代码:

* {
  -webkit-text-size-adjust: 100%;
}

9. 最简单的rem自适应

大家都知道,rem的值是根据根元素的字体大小相对计算的,但是我们每个设备的大小不一样,所以根元素的字体大小要动态设置😂

html {
 font-size: calc(100vw / 3.75);
}

body {
  font-size: .14rem;
}

效果如下:

像我一般的话,直接搞lib-flexiblepostcss-pxtorem就完事啦!

10. 滑动穿透

当你想在出现遮罩的时候,锁住用户的滚动行为,你可以这么做。

假设HTML结构如下:

<div class="mask">
  <div class="content">我是弹框</div>
</div>

CSS样式如下:

.mask {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #333, $alpha: .6);

  .content {
    padding: 20px;
    background-color: #fff;
    width: 300px;
  }
}

效果如下:

可以看到,当在遮罩上滑动的时候,是会穿透到父节点的,最简单的办法就是阻住默认行为:

document.querySelector(".mask").addEventListener("touchmove", event => {
  event.preventDefault();
});

如果在vue中,你可以这么写:

<div class="mask" @touchumove.prevent></div>

如果.content也有滚动条,那么只要阻止遮罩本身就行:

document.querySelector(".mask").addEventListener("touchmove", event => {
  if (event.target.classList.contains("mask")) event.preventDefault();
});

或者:

<div class="mask" @touchumove.self.prevent></div>

这样,当出现遮罩的时候用户的滑动就会被锁住啦👌

最后

1px边框唤醒APP后面会单独出文章,因为涉及的内容比较多。

文章是有点水,请轻喷🤦‍♂️

如果你觉得这篇文章不错,请别忘记点个关注哦~😊

交流

微信公众号「前端宇宙情报局」,将不定时更新最新、实用的前端技巧/技术性文章,对了偶尔还会有互联网中的趣事趣闻🍻

关注公众号,回复"1"获取群聊二维码,一起学习、一起交流、一起摸鱼🌊

查看原文

六块腹肌的长者 赞了文章 · 2019-10-11

为什么要使用 package-lock.json

作者:Kostas Bariotis

翻译:疯狂的技术宅

原文:https://blog.logrocket.com/wh...

未经允许严禁转载

在本文中,我们将介绍 package-lock.json 为什么重要,以及如何与 NPM CLI 一起使用。

历史

NPM v5 引入了 package-lock.json, 将其作为捕获在任意时刻安装的确切依赖树的机制。

这会有助于在不同环境中进行协作,在这种环境中,你希望每个人都为项目的特定版本获取依赖项以得到同一棵依赖树。

package.json 使用语义版本定义所需的依赖项及其各自的版本。但是语义版本控制可能很棘手。

考虑一个表示为 "express": "^4.16.4" 的依赖项。

该模块的发布者(不使用 package-lock.json )将安装版本为 4.16.4 的 Express ,因为他们安装了最新版本。

如果 express 在我下载该模块并尝试安装依赖项时发布了新版本,则可以下载最新版本。

这些信息 caret 符号可以准确地告诉我们

上面的问题是,如果 4.17.x 版本存在一个错误,则我的本地设置将会失败,但是发布商的版本将继续在旧版本上正常运行。

在生产环境中可能会发生同样的事情,并且你不知道为什么它会失败。

在 NPM v5 之前,你需要使用 shrinkwrap。它与 package-lock.json 不同,因为它可以与模块一起发布到 NPM 注册表中,而 package-lock.json 则不允许。

如果所有成员都可以使用 NPM+5,则最好对未发布的项目使用 package-lock.json

但是,如果你正在开发模块并打算发布它,则需要考虑是否要让客户端安装你指定的确切依赖关系树,或者是否希望灵活一些。 这里是该主题的更详细的版本

因此, package-lock.json 将描述当前安装的确切依赖树。该格式在NPM文档中进行了描述。

通过将其提交到你的 VCS(绝对应该这样做),可以返回历史记录并复制确切的依赖关系树。

确保始终向你的 VCS 提交 package-lock.json,以在任何给定时间跟踪确切的依赖树。

它将确保下载你项目并尝试安装依赖项的所有客户端都能够获得完全相同的依赖树。此外这也确保你能够检出先前的提交并复制每个提交的依赖状态。

package.jsonpackage-lock.json

要确保你不去直接更改 package-lock.json。这将由 NPM 自动处理。它将对 package.json 的更改反映到package-lock.json,并保持最新。

但是只有在使用 NPM 的 CLI 进行更改时,才会发生这种情况。如果你手动更改 package.json,则不要期望 package-lock.json 会更新。要始终使用 CLI 命令,例如 installuninstall 等。

如何使用NPM CLI

当你首次在新项目中使用 NPM 时,它会自动生成 package-lock.json

然后,你就可以正常使用 NPM 了。

npm install(使用特定模块作为参数)

可以将 install 与要安装的模块名一起使用,这将更改 package.jsonpackage-lock.json,因为依赖关系树将会发生变化。

考虑下面的例子:

npm install express body-parser cors

npm install(不带参数)

install 将尝试安装与 package-lock.json 相关的所有依赖项。

这里的关键是,如果 install 注册已经过期,则可以更改 package-lock.json

如果有人手动更改 package.json(例如,他们删除了一个软件包,因为这只是删掉一行),那么下次有人运行 npm install 时,它将更改 package-lock.json 以反映对先前软件包的删除。

这可能很棘手。想象一下,拉取项目的最新版本,当运行 npm install 获取最新信息时,却发现树中进行了许多毫无意义的更改。

你树中的更改很可能对审核你的代码更改的人没有意义。

npm uninstall

install 类似,但需要用要被删除的模块名称作为参数。这将同时更改 package.jsonpackage-lock.json

npm update

update 将会读取 package.json,用来查找可以更新的所有依赖项。随后它将构造一个新的依赖关系树并更新 package-lock.json

还记得语义版本控制吗?假设我们在 package.json 中有一个依赖项,状态为 ^1.4.5

字符 ^ 告诉 NPM 检查在 1.X.X 范围内是否有较新版本,如果有,则进行安装。类似地,字符只会出现在热修复程序或 1.4.X 上。

你也可以省略特殊字符并保留固定版本,这会减少 package-lock.json 的帮助(但并非没有用)。

npm ci

ci 将安装与 package-lock.json 有关的所有依赖项,类似于 install。这里的主要区别在于,在任何情况下都不会更改 package-lock.json

其目的是要在某些环境中使用,例如构建服务器时以自动方式进行安装等。

结论

使用 package-lock.json 时,请记住以下关键要点:

不要在没有参数的情况下使用 npm install 来获取依赖关系,所以请使用 npm ci。你可以用 npm install 安装特定的依赖项。

仅在需要本地依赖关系树时,甚至在本地开发环境中,都可以在所有地方使用 npm ci

为你依赖关系的更新做一个重复的任务,例如每月一次。 (或者,你可以用 dependabot 之类的服务,但请确保测试覆盖率良好)。

这样,你可以确保你的依存关系是最新的,并避免技术债。

更多参考


本文首发微信公众号:前端先锋

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章:


查看原文

赞 15 收藏 11 评论 0

六块腹肌的长者 发布了文章 · 2019-08-16

js 事件on动态绑定和jq 事件的和函数绑定元素

js事件on动态绑定数据,绑定多个事件的方法

1、on('click')与$('').click()方法的区别

on('click'):事件委托机制:
在body元素上绑定click事件处理函数handler,如果这个click事件是由后代p元素触发,就执行handler方法,$(document.body).on('click','p',handler);
事件委托机制:不为每个P元素直接绑定click事件处理函数,而是委托给其祖辈元素,告诉他,如果接收到click事件触发通知,并且click事件是由P元素其中之一触发的,就执行祖辈元素上委托绑定的事件处理函数。
注意:“focus”、“blur”等部分事件不支持冒泡,使用事件委托将无效。可以使用event.stopPropagation()方法,让当前触发事件停止冒泡。
1、绑定多个事件,用空格隔开事件和命名空间:
on({
    "click":function(){},
    "mouseover":function(){}
})
2、可以给动态元素和属性绑定事件
    click()不能为页面动态加载的元素添加事件,只能事件委托

on()参数

$().on(events,[selector],[data],fn)        
    





























查看原文

赞 0 收藏 0 评论 0

六块腹肌的长者 关注了专栏 · 2019-08-02

web全栈工程师的取经之路

探索前后端,紧追潮流,关注业界流行,一起成长!

关注 614

六块腹肌的长者 赞了文章 · 2019-06-19

Vue2.0 探索之路——生命周期和钩子函数的一些理解

前言

在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的。放大之,对vue的生命周期不甚了解。只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的。

因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚。

于是我开始先去搜索,发现vue2.0的生命周期没啥文章。大多是1.0的版本介绍。最后还是找到一篇不错的(会放在最后)

vue生命周期简介

clipboard.png

f847b38a-63fe-11e6-9c29-38e58d46f036.png

咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。

生命周期探究

对于执行顺序和什么时候执行,看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。

ps:下面代码可以直接复制出去执行
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" data-original="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

create 和 mounted 相关

咱们在chrome浏览器里打开,F12console就能发现

beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted :完成挂载

另外在标红处,我们能发现el还是 {{message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

clipboard.png

update 相关

这里我们在 chrome console里执行以下命令

app.message= 'yes !! I do';

下面就能看到data里的值被修改后,将会触发update的操作。

clipboard.png

destroy 相关

有关于销毁,暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后,我们再重新改变message的值,vue不再对此动作进行响应了。但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。

app.$destroy();

clipboard.png

生命周期总结

这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈。

beforecreate : 举个栗子:可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestroy: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容

当然,还有更多,继续探索中......

写在最后

本文是一个vue的生命周期的理解,如有错误还请大牛指正,让小子也有得进步。
如果对你有所帮助,那是我最大的荣幸。

对了,兄台,对你有帮助的话不妨点个收藏或者推荐再走。

3477288873-5808ad0a8d62c_articlex

参考文献

https://segmentfault.com/q/10...
http://www.cnblogs.com/gagag/...

感谢上面几位兄台的文章和提问。

另外新写了篇 vuex 的文章,欢迎各位给点意见。传送门:Vue2.0 探索之路——vuex入门教程和思考
新写了篇 vue-router的文章,也欢迎各位给点意见。传送门:Vue2.0 探索之路——vue-router入门教程和总结

最近更新文章:
Less 函数巧妙解决白天和夜间模式
Node环境变量 process.env 的那些事儿

查看原文

赞 1039 收藏 1348 评论 125

六块腹肌的长者 赞了回答 · 2019-05-31

vue2,传入的props参数比较大时,在created等各生命周期引用时为空怎么解决?

其实一个很简单的做法就是,当larger获取到数据之后,再开始渲染子组件my-editor
做法就是在my-editor上加v-if

<template>
    <my-editor v-if="larger.length" :lesser="lesser" :larger="larger"></my-editor>
</template>

关注 10 回答 8

六块腹肌的长者 赞了回答 · 2019-05-31

vue2,传入的props参数比较大时,在created等各生命周期引用时为空怎么解决?

1.首先子组件定义created阶段,父组件已经调用过了created阶段,这时,proper属性,data属性,method属性已初始化完成。
2.父子组件的初始化周期,从创建到挂载,是从外到内,再从内到外,且mixins的钩子函数总是在当前组件之前执行。
所以,父组件异步传值,子组件mounted阶段,也不一定能取得值。
因此,建议确定父组件异步获取值之后,再渲染子组件

关注 10 回答 8

六块腹肌的长者 赞了文章 · 2019-05-21

Vue2.0 探索之路——生命周期和钩子函数的一些理解

前言

在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的。放大之,对vue的生命周期不甚了解。只知道简单的使用,而不知道为什么,这对后面的踩坑是相当不利的。

因为我们有时候会在几个钩子函数里做一些事情,什么时候做,在哪个函数里做,我们不清楚。

于是我开始先去搜索,发现vue2.0的生命周期没啥文章。大多是1.0的版本介绍。最后还是找到一篇不错的(会放在最后)

vue生命周期简介

clipboard.png

f847b38a-63fe-11e6-9c29-38e58d46f036.png

咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了。

生命周期探究

对于执行顺序和什么时候执行,看上面两个图基本有个了解了。下面我们将结合代码去看看钩子函数的执行。

ps:下面代码可以直接复制出去执行
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" data-original="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

create 和 mounted 相关

咱们在chrome浏览器里打开,F12console就能发现

beforecreated:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted :完成挂载

另外在标红处,我们能发现el还是 {{message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

clipboard.png

update 相关

这里我们在 chrome console里执行以下命令

app.message= 'yes !! I do';

下面就能看到data里的值被修改后,将会触发update的操作。

clipboard.png

destroy 相关

有关于销毁,暂时还不是很清楚。我们在console里执行下命令对 vue实例进行销毁。销毁完成后,我们再重新改变message的值,vue不再对此动作进行响应了。但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了。

app.$destroy();

clipboard.png

生命周期总结

这么多钩子函数,我们怎么用呢,我想大家可能有这样的疑问吧,我也有,哈哈哈。

beforecreate : 举个栗子:可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情
beforeDestroy: 你确认删除XX吗? destroyed :当前组件已被删除,清空相关内容

当然,还有更多,继续探索中......

写在最后

本文是一个vue的生命周期的理解,如有错误还请大牛指正,让小子也有得进步。
如果对你有所帮助,那是我最大的荣幸。

对了,兄台,对你有帮助的话不妨点个收藏或者推荐再走。

3477288873-5808ad0a8d62c_articlex

参考文献

https://segmentfault.com/q/10...
http://www.cnblogs.com/gagag/...

感谢上面几位兄台的文章和提问。

另外新写了篇 vuex 的文章,欢迎各位给点意见。传送门:Vue2.0 探索之路——vuex入门教程和思考
新写了篇 vue-router的文章,也欢迎各位给点意见。传送门:Vue2.0 探索之路——vue-router入门教程和总结

最近更新文章:
Less 函数巧妙解决白天和夜间模式
Node环境变量 process.env 的那些事儿

查看原文

赞 1039 收藏 1348 评论 125

六块腹肌的长者 关注了问题 · 2019-05-08

解决iframe 跨域,有没办法获取 iframe子页面元素

比如 我自己的网站 www.aaa.com, 用iframe 引入了 www.bb.com (是别人的网站,我不能控制),
这种情况,可以获取到吗

关注 3 回答 1

认证与成就

  • 获得 17 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-01-05
个人主页被 556 人浏览