vue知识点总汇

时间: 2019-08-21阅读: 615标签: 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


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)

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

事件修饰符

<!-- 阻止单击事件继续传播 -->
<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>
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/4821

关闭

Vue组件的三种调用方式

主要讲Vue三种方式调用组件:v-model或者.sync显式控制组件显示隐藏,通过js代码调用,通过Vue指令调用,在写组件的时候很多写法、灵感来自于element-ui

基于Vue实现后台系统权限控制

用Vue/React这类双向绑定框架做后台系统再适合不过,那么如何在一个Vue应用中实现权限控制呢?下面是我的一点经验。

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

vue去掉#,history模式

现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大的障碍。vue把#当做自己的根目录,静态资源,去掉#后,要采用相对路径去引用,如果图片引用是在js内,则要采用require()方法进行引用。

Vue组件中prop属性使用说明

props 把数据传给子组件!prop是组件数据的一个字段,期望从父作用域传下来。子组件需要显式地用 props 选项。props的大小写、静态的和动态的 Prop、传入一个数字、传入一个布尔值、Vue的组件中的props属性单向数据流

Vue的理解:Vue.js新手入门指南

从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

Vue.js中 watch 的高级用法

上面的代码的效果是,当我们输入firstName后,wacth监听每次修改变化的新值,然后计算输出fullName。app.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了

Vue.js中的computed工作原理_深入理解 Vue的Computed计算属性

Computed 计算属性是 Vue 中常用的一个功能,但你理解它是怎么工作的吗?我们通过实现一个简单版的和Vue中computed具有相同功能的函数来了解computed是如何工作的。

vue watch监听对象的使用_实现首次不触发、深度监听

vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据。这篇文章介绍:vue如何实现首次不触发watch,vue如何实现数据的深度监听?

vue混入

混入是一种分发Vue组件中可复用功能非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!