Vue基础知识点
基础知识:
- vue的生命周期:
beforeCreate/created
、beforeMount/mounted
、beforeUpdate/updated
、beforeDestory/destoryed
- vue常用指令:
v-for
、v-bind
(缩写形式:prop
)、v-on
(缩写形式@click=’sss'
)、v-if/v-else/v-else-if
、v-model
、v-once
、v-html
、v-show
... - vue自定义组件:
Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘<li>{{ p1 }}</li>' })
- vue常用实例方法和属性:
data/$data
、methods/$methods
、$el
、computed
(计算属性)、$watch
、$set
、$event
、$emit
... - 如果需要更新的属性需要缓存,则使用计算属性的方式,否则可以使用
methods
里的方法来更新属性(methods
里的方法每次重新渲染都会执行) - 计算属性默认提供了
getter
,你还可以给它设置setter
- 当你数据变化是异步或者开销较大时,可以使用
watch
侦听器来响应数据的变化 v-bind:class
的值可以是一个对象,可实现类似react
中classnames
模块的功能- 自定义组件上的
class
会被渲染拼接到template
的根节点的class
属性上(自定义组件上可使用v-bind:class
来做class的判断显示逻辑) v-bind:style
可以用来绑定内联样式,这个内联样式的值可以由一个对象来定义(类似css in js的模式),且可以被定义为数组(多个样式对象)v-bind:style
可以使用多重值的形式:<div :style=“display:[‘-webkit-box’,’-ms-flexbox’, ‘flex']"></div>
v-if/v-else/v-else-if
的时候,可以用key来管理可复用的元素v-if
是’真正’的渲染,它会确保在切换条件过程中条件块内的元素的事件监听器和子组件适时的销毁和重建v-if
是惰性的,初始为假,什么也不做,直到为真的时候才渲染元素v-show
总是渲染元素,只是简单的进行切换v-if
的切换开销大,v-show
则是初始渲染开销大,频繁切换使用v-show
,运行时经常改变则使用v-if
v-if
和v-for
一起使用时,v-for
的优先级更高v-for
可遍历数组,第二个参数是索引v-for
可遍历对象,第二个参数是key
,第三个参数是索引v-for
和<template>
搭配可减少渲染次数v-for
和自定义组件使用时,需要使用props
来传递值- 尽可能的为遍历子元素加上
key
,获得渲染优化 - 数组变异方法:
push/pop/unshift/shift/splice/sort/reverse
改变原始数组 - 数组非变异方法:
filter/concat/slice
不改变原始数组,总是返回新数组 - Vue不能检测到数组索引赋值(使用
vm.$set
解决)和修改length
长度赋值(使用splice
解决)的情况 - Vue不能检测对象属性的添加和删除(使用
vm.$set
或Object.assign
) is=“todo-item”
这种属性的写法比较适合DOM模板- 事件修饰符,它们可串联使用:
.stop
、.prevent
、.capture
、.self
、.once
、.passive
(尤其适合移动端) .passive
不用同时和.prevent
使用,后者会被忽略- 按键修饰符:
.enter
、.tab
、.delete
、.esc
、.space
、.up
、.down
、.left
、.right
- 系统按键修饰符:
.ctrl
、.alt
、.shift
、.meta(⌘|⊞|◆)
、.exact
(允许精确控制系统修饰符组合键触发) - 鼠标修饰符:
.left
、.right
、.middle
v-model
会忽略表单元素的value
、checked
、selected
,仅仅使用实例中的数据作为数据源- 表单事件修饰符:
.lazy
、.number
、.trim
- 组件是可复用的vue实例,具有vue实例大多数属性和方法
- 组件可复用,每个组件有独立的空间
- 组件上的data必须是一个函数,这样做避免影响了其他组件
- 通过
Vue.component()
全局注册的组件可在其被注册后的任何通过new Vue()
创建的实例所使用,包含其组件树中的所有组件 - 通过插槽
<slot>
分发内容(其实就是类似于react的children) - 动态组件
<component>
配合属性is
来实现 - 解析DOM模板时需要注意下可能会有不生效的情况,需要使用is来传递组件
Vue组件
- 全局注册/局部注册
- 局部注册组件在子组件中不可用
- 全局注册的行为必须在根Vue实例创建之前发生
camelCase
的属性可以在组件中使用kebab-case
- 可以以对象的模式指定每一个
props
属性的类型 - 父级
props
的更新会向下流动,反之则不行 - 由于JavaScript对象和数组是引用传入的,所以当子组件对props的改变将会影响到父组件
- props类型校验可以是原生构造对象的中的任意一个,也可以自定义检验类型,通过
instanceof
检查 - 对于绝大多数特性来说,外部传入的值会替换掉组件内部设置好的值,如input的type属性,但有的属性则是会进行合并,如class
inhertAttrs:false
设置不希望根元素继承特性,可以使用$attrs
属性来设置继承的目标元素v-on
在设置事件监听器时,会把事件名全部转换成小写,推荐始终使用kebab-case
的事件名v-model
可以使用自定义组件中的model
属性自定义- 父组件模板的所有东西都会在父级作用域内编译,子组件的所有内容都会在子组件作用域内编译
- 插槽(
<slot></slot>
)/具名插槽(<slot name=“header"></slot>
)/作用域插槽(slot/slot-scope
) <keep-alive>
组件可用来缓存被切换后隐藏的组件的状态$root
访问根实例,$parent
访问父组件实例(不推荐)- 父组件访问子组件,使用
$refs
属性来获取设置了ref
属性的子组件 provide
属性允许我们指定要分享给后代组件使用的方法,然后后代组件使用inject
属性来获得祖先组件分享的方法(依赖注入)事件侦听器(
$emit
派发的事件)v-on
指令侦听$on
侦听一个事件$once
一次性侦听一个事件$off
停止侦听一个事件
- 慎用递归组件
- 尽量避免组件的循环引用
- 优先使用
template
来定义模板,而不是inline-template
$forceUpdate
来强制更新view- 组件包含大量静态内容时,可使用
v-once
来标记,缓存静态内容
Vue基础知识点的更多相关文章
- vue入门基础知识点测试
vue入门基础知识点测试 1.文本(值绑定){{var}}----控制<div></div>的值显示当前时间,且1秒更新一次.(可查阅 setinterval 函数,时间Dat ...
- TypeScript 基础知识点整理
一.TypeScript的特点 1.支持ES6规范 2.强大的IDE支持(集成开发环境) 允许为变量指定类型,减少你在开发阶段犯错误的几率. 语法提示,在IDE编写代码时,它会根据你所处的上下文把你能 ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
- Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- Vue基础系列(三)——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列(二)——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- Vue基础开发入门之简单语法知识梳理(思维导图详解)
基于个人写的以下关于Vue框架基础学习的三篇随笔,在此基础上,做一个阶段性的知识总结,以此来检验自己对Vue这一段时间学习的成果,内容不多,但很值得一看.(思维导图详解)
- fastclick 源码注解及一些基础知识点
在移动端,网页上的点击穿透问题导致了非常糟糕的用户体验.那么该如何解决这个问题呢? 问题产生的原因 移动端浏览器的点击事件存在300ms的延迟执行,这个延迟是由于移动端需要通过在这个时间段用户是否两次 ...
随机推荐
- webKit 内核浏览器 源码分析
如需转载,请注明出处! WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@gmail.com QQ: 457283 这是一篇自己写于一年前的工作文档,分享 ...
- 3、KOA模板引擎+访问静态资料中间件
一.Koa模板引擎初识1.安装中间件 : npm i --save koa-views2.安装ejs模板引擎 :npm i --save ejs3.编写模板:<%= title %> 是调 ...
- nyoj 115dijkstar求最短路
#include<stdio.h> #include<string.h> #define inf 0x3fffffff #define N 1100 int ma[N][N], ...
- [Office]PPT 2013如何设置图片为半透明?
PPT里面似乎无法直接为图片设置透明度属性.下面是一种变通的办法. 1,插入一个和图片大小一致的图形(矩形):2,右键插入的矩形,然后在属性设置里选择“图片填充”,选择以需要的图片填充到该矩形里:3, ...
- 【智能家居篇】wifi网络结构(上)
转载请注明出处:http://blog.csdn.net/Righthek 谢谢! WIFI是什么.相信大家都知道,这里就不作说明了. 我们须要做的是深入了解其工作原理,包含软硬件.网络结构等.先说明 ...
- MySql 基础学习笔记 1——概述与基本数据类型: 整型: 1)TINYINT 2)SMALLINT 3) MEDIUMINT 4)INT 5)BIGINT 主要是大小的差别 图 浮点型:命令
一.CMD中经常使用mysql相关命令 mysql -D, --database=name //打开数据库 --delimiter=name //指定分隔符 -h, --host=name // ...
- hdu4870 Rating (高斯消元或者dp)
Rating Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- SharePoint 2013 开启訪问请求
1.通常,我们进入SharePoint 2013网站,假设没权限会提示该网站未被共享,而没有切换账号或者申请訪问,实在是非常流氓:事实上,SharePoint为我们提供了訪问请求页面.可是可能须要手动 ...
- 【iOS开发系列】UIDevice设备信息
[1] 推断是否是横向屏: BOOL b=UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation); 获取设备uniqu ...
- Python+Django+SAE系列教程16-----cookie&session
本章我们来解说cookie和session ,这两个东西相信大家一定不陌生,概念就不多讲了,我们直接来看其使用方法,首先是cookie,我们在view中加入三个视图,一个是显示cookie的,一个是设 ...