vue知识点总汇入门知识_vue小白攻略

1.vue的生命周期生命周期钩子描述beforeCreate在实例初始化前,数据观测和event/watcher事件配置之前被调用created实例被创建完成后调用。在这一步,实例已经完成以下配置:数据观测,属性和方法的运算,watcher/event事件的回调。挂载阶段还没开始,$el属性不可见beforeMount在挂载之前调用,相关的render首次被

vue知识点总汇入门知识

1.vue的生命周期

生命周期钩子描述
beforeCreate在实例初始化前,数据观测和event/watcher事件配置之前被调用
created实例被创建完成后调用。在这一步,实例已经完成以下配置:数据观测,属性和方法的运算,watcher/event事件的回调。挂载阶段还没开始,$el属性不可见
beforeMount在挂载之前调用,相关的render首次被调用
mountedel被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.el也在文档内
beforeUpdate数据更新时调用,发生在虚拟dom重新渲染和打补丁之前。你可以在这个钩子中进一步更改状态,不会触发重渲染过程
updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
activatedkeep-alive 组件激活时调用。
deactivatedkeep-alive 组件停用时调用。
beforeDestroy实例销毁之前调用。在这一步,实例仍然完全可用。
destroyedVue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

2.keep-alive

它是vue的内置组件,能在组件切换过程中将状态保存在内存中,防止重复渲染dom

vue知识点总汇入门知识_vue小白攻略

3.vue中的指令

  • v-if指令

    条件渲染指令,根据表达式真假来删除和插入元素

  • v-show指令

    与v-if的区别,不管条件成立与否,v-show都会渲染html,v-if只有为true才会渲染

  • v-eles指令

    与v-if或v-show同时使用,v-if条件不成立就会显示v-else

  • v-for指令

    基于一个数组渲染一个列表,与js的遍历相似

  • v-bind指令

    动态绑定一个或者多个特性,可简写为:class(原v-bind:class)

  • v-on指令

    用来监听dom事件,用法和v-bind类似

4.组件通信

父子组件通信主要是通过props和自定义事件,父组件通过props给子组件下发数据,子组件通过事件给父组件发出消息

5.双向数据绑定原理

vue内部通过object.defineProperty方法属性拦截的方式,把data对象的每个数据读写转化为getter/setter,当数据变化通知视图更新。

6.vue是什么

vue是一个构建数据驱动的web界面的渐进式框架

7.vue修饰符

.lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

.number(v-model)

将输入的输入值自动转化为数值类型

.trim(v-model)

过滤用户输入的首尾空白字符

事件修饰符

<span type="button" data-toggle="tooltip" data-placement="top" data-clipboard-text="

…” title=”” data-original-title=”复制”>

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
海计划公众号
(0)
上一篇 2020/03/24 05:45
下一篇 2020/03/24 05:45

您可能感兴趣的内容

  • Gizmodo使用攻略美国一个知名科技博客,主要报道一些全球最新的一些科技类产品

    Gizmodo菜鸟知识 官方网址:https://gizmodo.com/ 简介描述:美国一个知名科技博客,主要报道一些全球最新的一些科技类产品 Gizmodo,是美国一个知名科技…

    2020/03/06
  • 程序员十大段子:等我敲完这行代码,就和你离婚!攻略教程_段子基础入门

    ​工作是高端大气上档次,工资是低调奢华接地气!
    我们叫做“程序猿”,也叫“攻城狮”!
    但是往往城还没攻下来,我们的头发就先掉下来!
    我们最喜欢听的一句话就是段子一“等我敲完这行代码,就和你离婚!”他头也不抬的说听完之后,她心里暖暖的她想,这可能是最长情的承诺(因为深知永远敲不完代码)–2017年度十大感动故事奖段子二“等我敲完这行代码,就陪你去吃饭”听完之后

    2020/04/06
  • javascript如何判断浏览器类型?攻略教程_浏览器基础知识教程

    不同的浏览器有不同的属性,你知道怎么来判断浏览器的类型吗?下面我们来看一下如何使用JavaScript判断浏览器类型。使用浏览器的userAgent来判断,userAgent是navigator的属性方法,可以返回客户机发送服务器的头部信息。作用是返回当前用户所使用的什么浏览器。 var explorer = window.navigator.u

    2020/03/20
  • js监听浏览器返回,pushState,popstate 事件,window.history对象菜鸟教程_事件教程视频

    在WebApp或浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。 一、简单介绍 history 中的操作1.window.history.back(),后退2.window.history.forward(),前进3.windo

    2020/04/05
  • Redis 多方式实现计数器功能零基础入门_计数器入门知识

    计数器在很多网站中都进行了广泛的应用,比如文章的点赞数、页面的浏览数、网站的访客数、视频的播放数等等。在这篇文章里,我会使用 Redis 的三种数据类型,来分别实现计数器的功能。请跟随我一起来看看吧。使用字符串键下面代码演示了如何利用 Redis 中的字符串键来实现计数器功能。其中,incr() 方法用于累加计数,get_cnt() 方法用于获取当前的计数值

    2020/03/24
  • CSS:BFC规则的应用自适应两栏布局使用攻略_布局小白基础

    两栏布局是写页面时经常用到的,要想实现两栏布局,就需要明白BFC规则,Block formatting context,直译为“块级格式化上下文”,可以简单的理解它为一个独立的区域,把区域内部元素与外部元素区分开,两者互不干扰。它的规则:1.内部元素会在垂直方向一个接一个放置。2.属于同一个BFC的两个元素上下margin会重叠。3.独立的BFC的区域不会与

    2020/03/20
  • V8引擎-枚举入门攻略位运算实现参数配置入门教程_引擎

    基本上从初始化引擎,到Isolate、handleScope、Context一直到编译其实都有记录,但是实在是无从下手。虽说我的博客也没有什么教学意义,但是至少也需要有一个中心和结论。很遗憾,上述的每一步都并互有关联,也就是单独拿出来写毫无意义。而从整体架构来阐述,然后细化到这每一步,我又还没有到那个境界。因此,综合考虑下,决定先暂时放弃逐步解析,优先产出一

    2020/04/05
  • 前端学nodejs有什么用处?小白知识_node小白教程

    前端学nodejs有什么用处?小白知识 Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境,一个基于Chrome JavaScript运行时建立的…

    2020/03/19
  • CommonJS的模块加载小白知识_模块菜鸟教程下载

    叨叨一会CommonJSCommon这个英文单词的意思,相信大家都认识,我记得有一个词组common knowledge是常识的意思,那么CommonJS是不是也是类似于常识性的,大家都理解的意思呢?很明显不是,这个常识一点都不常识。我最初认为commonJS是一个开源的JS库,就是那种非常方便用的库,里面都是一些常用的前端方法,然而我错得离谱,Common

    2020/03/29
  • React Rouer 使用教程菜鸟教程下载_router菜鸟教程网

    前言作为 React 全家桶的一员,如果我们想要开发一个 React 应用,那么 react-router 基本上是我们绕不过去的基础。基于此,对它的了解和使用也是必不可少的一步本文将重点介绍实际应用中常用的一些 API 以及实践过程中遇到的一些问题,目标很简单:会用基于 react-router v5.0.1,WEB 应用程序安装国际惯例,首先我们需要安装

    2020/03/26
  • css模块化方案使用教程_模块化使用指南

    这篇文章主要介绍了css模块化方案,css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案,非常具有实用价值,需要的小伙伴可以参考下。css的模块化方案可能和js的一样多,下面简单介绍几种主要的模块方案。oocss面对对象的规则,主要的原则是两种:分离结构和外观,分离容器和内容。名词解释1、分离结构和外观:增加可重复的设计单元,同时去推进产品和

    2020/03/26
  • 用 Mongoose 插件记录Node.js API 日志入门百科_日志入门基础

    介绍随着程序的增长,日志记录成为跟踪所有内容的关键部分。它对于调试目的尤为重要。现在已经有了 npm 的日志记录模块。这些模块可以将日志存储在不同格式或级别的文件中。我们将使用流行的ORM Mongoose 讨论 Node.js Express 程序中的 API 日志记录。那么如何创建一个 Mongoose 插件,以更清洁的方式为你进行记录并简化 API 日

    2020/03/26
  • 尤雨溪:Vue Function-based API RFC【转】入门指南_Vue教程视频

    作者:尤雨溪链接:https://zhuanlan.zhihu.com/p/68477600译注:这是 3.0 最重要的 RFC,因此特意翻译成中文。 概要将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。基本例子import { value, computed, watch, onMounted } from ‘vue’const App

    2020/03/29
  • 微信小程序开发注意指南和优化实践菜鸟指南_小程序菜鸟知识

    前言转眼间已经参与过我厂好几个小程序的开发了,下面本妹子将开发中的那些注意点和各位小伙伴们分享下,妥妥的干货一枚。其中培训视频以上传到B站中,欢迎小伙伴们来围观评论^ ^ https://www.bilibili.com/video/av56083647一、WXML不要换行写,有空格不行微信开发者工具不会对代码进行trim操作,如果代码中换行,页面也直接换行

    2020/03/29
  • 前端必知的Emmet实用操作,大致了解了下Emmet这个神器使用攻略_神器基础入门

    这是一篇介绍Emmet的文章,Emmet是专为我们前端开发人员设计的一个工具,可以大大提高您的HTML和CSS工开发效率。可以说是前端开发的神器之一Emmet简介作为一个前端,你肯知道在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是

    2020/04/06
  • 什么是DOM及DOM操作?使用教程_dom基础教程

    什么是 DOM ?DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准。W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。DOM 分层节点DOM的分层节点一般被称作是DOM树,树中的

    2020/03/20