vue知识点总结

作者: 椰果粒 | 来源:发表于2017-07-06 19:21 被阅读299次

持续更新中......

一:vue中的两个核心点
  1. 响应的数据绑定
    当数据发生改变时,自动更新视图
    为什么自动更新:利用Object.definedProperty中的getter/setter代理数据,监控对数据的操作。
    注意:由于Object.defineproperty是ES5出现的,所以vue不支持IE8
  2. 组合的视图组件
    UI界面映射为组件树
    划分组件可维护,可重用,可测试
二:渐进式框架

我们开发一个页面,组件,大型的单页面等,不需要全部应用,用到哪个用哪个就行

三:虚拟DOM
  1. 产生原因:运行js的速度是很快的,但大量的DOM操作就会使速度变慢。时常在更新数据后重新渲染页面,这就造成在没有改变数据的地方也重新渲染了DOM节点,在很大程度上造成了资源浪费
  2. 概念: 利用在内存中生成与真实DOM相对应的数据结构,这个在内存中生成的结构称之为虚拟DOM.
  3. 优点:在数据发生改变时,能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上,只重新渲染改变的元素就可以了。虚拟DOM计算之后,会以最小的代价将真实DOM渲染到页面上
四:MVVM模式

M:model数据模型
V:view视图模板
VM:view-model视图模型
M,V是相互独立的,通过VM连接起来

五:指令:特殊的自定义行间属性

职责:当表达式的值改变时,相应的将某些值应用到DOM上

六:内置指令的合集:
v-bind:绑定元素属性(:)
v-on:绑定事件监听器(@)
v-text:更新数据,覆盖已有结构
v-html:解析数据中的HTML结构
v-show:根据真值,切换display属性
v-if v-else-if v-else
v-for:基于源数据多次渲染元素或模板块
v-model:在表单控件元素上创建双向数据绑定
v-pre:跳过元素和子元素的编译过程
v-once:只渲染一次,随后数据更新不重新渲染
v-cloak:隐藏未编译的大胡子语法,CSS中设置[v-cloak]{display:none}
七:模板
  1. HTML模板
    HTML模板:基于DOM的模板,模板都是可解析的有效的HTML
    插值:{{}},原生HTML,属性,JavaScript表达式
  2. template模板:模板会替换挂载的元素,挂载元素的内容都将被忽略。根节点只能有一个。
  3. 模板-render函数
八 : 事件修饰符

.stop .prevent .capture .self .once
.enter .tab .delete .esc .space .up .down .left .right .ctrl .alt .shift .meta .按键(13)
@keyup.enter='addTodo(123,$event)':这里的$event是我们传递进去的事件对象,它是一个特殊的变量,代表事件对象

九:vue中组件:不支持片段化,每个组件必须有一个根元素
十:声明式和命令式渲染

声明式渲染:只需要声明在哪里,做什么,而无需关心如何实现
命令式渲染:需要以具体代码表达在哪里,做什么,如何实现

相关文章

  • 学习链接

    vue-router教程总结 vue生命周期和钩子函数 详解vue生命周期 Vue2.0八——知识点整理 vuex...

  • 无标题文章

    综和复习本月知识点总结: 一:微信小程序 二:vue复习 三:js复习 四:新知识点 一:微信小程序知识点总结 开...

  • 2021前端面试

    174道JavaScript 面试知识点总结(下) [Vue中文社区](javascript:void(0);) ...

  • 个人总结

    六月份月度总结 Vue知识点总结 首先我们本月对Vue进行了一个全面的复习,而且还学习了一些以前没有学习过的知识点...

  • Vue后台管理界面

    Vue后台管理项目 一、自我总结后台管理界面项目里的知识点 项目起始 初学vue使用https://panjiac...

  • 2020-05-24

    日常知识点总结(vue篇): 1、vue的生命周期: Vue实例从开始创建,初始化数据,编译模板,挂载Dom->渲...

  • Vue知识点

    本文主要总结了一些vue的知识点 , 可供面试和平时学习使用。 1. Vue的优点?Vue的缺点? 优点:渐进式,...

  • 03第一个Vue实例 2019-07-28

    一、知识点总结 1、VUE引入的方式 引入本地Vue文件 通过CDN文件的方式 2、将用