1. Vue
是什么?
渐进式 JavaScript 框架。
2. 为什么要学习 Vue?
主流三大前端框架:Angular ( 谷歌) 、react ( Facebook) 和 Vue
3. 预备知识:html
、css 、javascript
html: 标签,属性,页面结构与行业标准。
css: 样式规则,布局
javaScript: 对象,数组、表达式,函数,闭包。
watch : {
username : function ( newVal, oldVal ) {
this . userList. forEach ( ( value ) => {
if ( newVal === value) {
alter ( '该用户已经存在!' )
document. getElementByTagName ( 'input' ) . focus ( )
}
} )
}
}
watch: {
username : {
handler ( newVal, oldVal ) {
this . userList. forEach ( ( value ) => {
if ( newVal === value) {
alter ( '该用户已经存在!' )
document. getElementByTagName ( 'input' ) . focus ( )
}
} )
}
}
}
4. 计算属性 computed
和 计算方法属性 methods
之间的区别
相同: 计算属性和方法属性可以完成相同的功能
不同: 计算属性依赖缓存, 只有相关依赖数据发生变化才会重新计算, 性能更好。
方法属性动态性更强, 只要重新渲染, 方法总会被调用, 实时性更好。
5. v-if
和 v-show
之间的区别
v-if 控制模板元素的存在或移除, 移除是真正的删除了该元素( 删除的是 DOM 元素)
v-show 控制模板元素的显示和隐藏, 隐藏仅仅是用 css 控制显示( dispaly: none)
switch ( 变量) {
case 变量值1 :
break ;
case 变量值2 :
break ;
...
default :
break ;
}
父组件中的数据传递给子组件通过 props 属性。props 是一个数组, 每个元素对应一个组件变量。在挂载点的组件模板上, 使用 v- bind 指令进行绑定。
例如:v- bind: 变量名 = '父组件中要绑定的数据变量名'
< Son : child= "parent" > < / Son>
data ( ) {
return {
parent : '我是父组件中的数据'
}
}
props : [ 'child' ]
this . $emit ( 'sendDataToParent' , '我是子组件中的数据' )
< Son @getDataChild= "sendDataToParent" > < / Son>
methods : {
getDataChild ( data ) {
console. log ( data)
}
}
import Vue from 'Vue'
export default new Vue
import Bus from '../bus/bus.js'
methods : {
send ( ) {
Bus. $emit ( 'sendDataToMiddle' , '组件1中的数据发送给中间组件' )
}
}
import Bus from '../bus/bus.js'
create ( ) {
Bus. $on ( 'sendDataToMiddle' , ( data ) => {
console. log ( data)
} )
}
6. 插槽的用法 slot
插槽就是一个预留的占位符, 最终会被组件中的指定内容所替换。
< style>
[ v- cloak] {
display : none
}
< / style>
< span v- cloak> { { name } } < / span>
. stop - > 调用 event. stopPropagation ( )
. prevent - > 调用 event. prevenDefault ( )
. capture - > 添加事件侦听器绑定的元素本身触发时才触发回调
. self - > 只当事件是从侦听器绑定的元素本身触发时才触发回调
. { keyCode | keyAlias } - > 只当事件是从特定键触发时才触发回调
. native - > 监听组件根元素的原生事件
. one - > 只触发一次回调
. left 只当点击鼠标左键时触发
. right 只当点击鼠标右键时触发
. middle 只当点击鼠标中键时触发
. passive 以 { passive: true } 模式添加侦听器
7. v-pre
指令
v- pre 指令跳过这个元素和它的子元素的编译。
< span> { { this will not be compiled} } < / span>
< span v- pre> { { msg} } < / span> 即使data里面定义了msg这里仍然是显示的{ { msg} }
8 v-text
指令
v-text指令和{ { } } 一样,唯一的区别是: { { } } 会造成闪烁问题(网上慢)。v-text 不会有闪烁问题。
如果还想用 { { } } 又不想有闪烁问题,则使用 v-cloak 来处理。
9. 指令
v-html
v-show 条件显示和隐藏(dispaly: none)
v-if 真正的条件渲染(操作 DOM 创建与销毁)
v-else
v-else-if
v-for
v-on
v-bind
v-model
v-pre
10. 计算属性computed
和方法methods
的区别
( 1 ) 使用方法可以把复杂逻辑封装起来, 每使用一次就调用一次, 重复使用效率不高。
( 2 ) 计算属性不要让模板逻辑太重, 解决性能问题。
( 3 ) 计算属性当属性来使用,方法当方法来调用
( 4 ) 计算属性会缓存计算的结果, 多次使用也只调用一次
( 5 ) 计算属性不能当作方法使用,所有不能用于事件处理函数,事件处理函数还是使用 methods方法
computed : {
事件名:{
get ( ) {
要执行的代码段。
} ,
set ( ) {
}
}
}
11. localStorage
本地存储
localStorage : 本地存储;H5 新增的本地存储,有两个最重要的API 。是一个对象,提供两个方法:
( 1 ) localStorage. getItem用来获取值
( 2 ) localStorage. setItem用来修改值(赋值)
( 3 ) localStorage. removeItem用来删除值
12. watch
监听
watch 监听数据变化
监听数据或者对象需配置深度监听watch : deep: true
watch : {
监听对象: {
handler ( newVal, oldVal ) {
} ,
deep : true
immediate : true
}
}
window. onhashchange = function ( ) {
console. log ( window. location. hash. substr ( 1 ) )
}
string. substr ( ) : 将在字符串 string 中抽取并返回一个子字符串,原字符串不变。
13. 自定义指令
Vue. directive ( '指令名称' , {
bind : ( el, binding ) => {
} ,
inserted : ( el, binding ) => {
} ,
update : ( el, binding ) => {
} ,
componentUpdated : ( el, binding ) => {
} ,
unbind : ( el, binding ) => {
}
} )
directives : {
focus : {
inserted : ( el, binding ) => {
el. focus ( )
}
}
}
< input v- focus>
< input v- focus/ >
Vue. directive ( 'focus' , {
inserted : ( el ) => {
el. focus ( )
}
} )
14. 全局组件和局部组件
组件的定义方式分为两种, 全局组件和局部组件
全局组件定义在全局,在任意组件中都可以直接使用。
局部组件定义在组件内部, 只能在当前组件使用。
1. 单文件组件由三个部分组成:
1. tempalte ( html部分、结构) 只能存在一个更元素
2. script ( javascript部分、行为)
3. style ( css部分、样式) scoped样式只在当前组件内生效
2. 子父组件之间的交互 ( 数据传递)
父 - > 子 props提供一个带有验证需求的对象, 而不是一个字符串数组。props的验证
数据传递类型限制 ( 验证)
( 1 ) 数据类型验证 ( string, number... . )
( 2 ) 多数据类型验证 ( 是个数组,例如: [ String, Number] )
( 3 ) 必选项 ( required)
( 4 ) 默认值 ( default )
( 5 ) 对象, 数组类型的默认值 ( default 是个函数)
子 - > 父 $emit
子组件中需要通过 this . $emit ( '事件名' , 要发送的数据) 发送数据。
父组件中需要在子组件标签中绑定事件 @
3. 插槽slot ( 插槽就是一个预留的占位符, 最终会被组件中的指定内容所替换)
单个插槽< slot> < / slot>
具名插槽 < slot name= "s1" > < / slot> 在标签中引用 slot= "s1"
作用域插槽 数据是子传父。父组件中用 slot- scoped = "接收数据" ; 子组件通过 v- bind 绑定属性发送数据。
4. 动态组件
< component : is= "" > < / component>
kenp- alive: 组件缓存
5. vue. js 是一套构建用户界面 ( UI ) 的渐进式 javascript 框架
6. MVVM 的介绍
MVC :
M : model数据模型 ( 专门用来操作数据的)
V : View 视图 ( 对于前端就是页面)
C : Controller 控制器 ( 视图和数据模型沟通的桥梁, 用于处理业务逻辑)
MVVC :
M : model数据模型
V : view视图
VM : ViewModel 视图模型
7. insertBefore ( ) 方法可在已有的子节点前插入一个新的子节点
15. scss
的使用
npm install stylus -save
npm install stylus-loader -save
16. 技术
vue
vue- router
vuex
mint- ui, element- ui
vue- lazyload
vue- scroller、 better- scroll、swiper
moment、date- fns
17. 项目结构分析
build: webpack 相关的配置文件夹( 基本上不需要修改)
config: webpack 相关的配置文件夹( 基本上不需要修改)
index.js: 指定的后台服务的端口号和静态资源文件夹
node_modules
src: 源码文件夹
main.js: 应用入口js
static: 静态资源文件夹
.babelrc: babel的配置文件
.editorconfig: 通用编辑器的编码/格式进行一定的配置
.eslintignore: eslint 检查忽略的配置
.eslintrc.js: eslint 检查的配置
index.html: 主页面文件
package.json: 应用包配置文件
README.md: 应用描述说明的 readme 文件
18. 项目源码目录设计
src
api: 与后台交互模块文件夹
common: 通用资源文件夹, 如: fonts/img/stylus
components: 非路由组件文件夹
filters: 自定义过滤器模块文件夹
mock: 模拟数据接口文件夹
pages:路由组件文件夹
router: 路由器文件夹
store: vuex 相关模块文件夹
app.vue: 应用组件
main.js: 入口文件
19. 安装 stylus
依赖包
npm install stylus stylus- loader -- save- dev
< style lang= "stylus" scoped> < / style>
20. 移动端
< meta name= "viewport" content= "
width = "device-width" ,
initial- scale = 1.0 ,
maximum- scale = 1.0 ,
minimum- scale = 1.0 ,
user- scalable = no
">
< script
src= "https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js" >
< / script>
< script>
if ( 'addEventListener' in document) {
document. addEventListener ( 'DOMContentLoaded' , function ( ) {
FastClick. attach ( document. body)
} , false )
}
< / script>
21. 引用 vue-router
// 1 . 安装
npm install vue-router --save-dev
22. 箭头函数
箭头函数中 this 指向 父级作用域的 this。 是通过查找作用域链确定 this 的值,也就是说,看的是上下文的 this, 指向的是定义它的对象,而不是使用时所在的对象。
普通函数中 this 指向的是 它的直接调用者,.
23. 闭包
闭包是一个函数,两个函数彼此嵌套, 内部函数就是闭包。
闭包形成的条件:内部函数需要通过 return 给返回出来
eg: function func ( ) {
return function func ( ) {
}
}
24. 预编译
预编译: 其实就是当你写一段代码, 系统会在代码执行的前一刻自动扫描一遍你的代码, 检查代码是否出现了低级的语法错误, 找到你所定义的全局变量以及函数。
25. 缓存
HTTP Cache 是我们开发中接触最多的缓存, 它分为强缓存和协商缓存
强缓存: 直接从本地副本比对读取, 不去请求服务器, 返回的状态码 200
协商缓存: 会去服务器比对, 若没有改变才直接读取本地缓存, 返回的状态码 304
26. 节流
function debounce ( func, wait ) {
let timeout
return function ( ) {
let context = this
let args = arguments
if ( timeout) {
clearTimeout ( timeout)
}
timeout = setTimeout ( ( ) => {
func . apply ( context, args)
} , wait)
}
}
27. 防抖
function throttle ( func, wait ) {
let timeout
return function ( ) {
let context = this
let args = arguments
if ( ! timeout) {
timeout = setTimeout ( ( ) => {
timeout = null
func . apply ( context, args)
} , wait)
}
}
}
28. 原型链
原型链是由一些用来继承和共享属性的对象组成的( 有限的) 对象链, 原型对象也是普通的对象, 是对象一个自带隐式的 __proto__ 属性。
29. 单页面
1. 用户体验好、快、内容改变不需要重新加载整个页面, 基于这个点对服务器压力较小。
2. 前后端分离
3. 页面效果会比较炫酷
1. 不利于 seo
2. 导航不可用, 如果一定要导航需要自行实现前进、后退
3. 初次加载时耗时多
4. 页面复杂度提高很多
20. 对象创建方式
20.1 工厂模式
工厂模式: 在一个函数中创建好对象, 然后把对象返回
eg : function createPerson ( name, age, job ) {
let obj = new Object ( )
obj. name = name
obj. age = age
obj. job = job
obj. sayName = function ( ) {
console. log ( 'this.name' )
}
return obj
}
let person1 = createPerson ( 'Nicholas' , 29 , 'software Engineer' )
20.2 构造函数模式
function Person ( name, age, job ) {
this . name = name
this . age = age
this . job = job
this . sayName = function ( ) {
console. log ( this . name)
}
}
let person1 = new Person ( 'Nicholas' , 29 , 'software Engineer' )
20.3 原型模式
function Person ( ) {
}
Person . prototype. name = "Nicholas"
Person . prototype. age = 29
Person . prototype. job = "software Engineer"
Person . prototype. sayName = function ( ) {
console. log ( this . name)
}
function ( ) {
}
Person . prototype = {
name : 'Nicholas' ,
age : 29 ,
job : 'software Engineer'
sayName : function ( ) {
console. log ( this . name)
}
}
常用: 用一个包含所有属性和方法的对象字面量来重写整个原型对象, 并设置 constructor 属性
20.4 组合使用构造函数和原型
function Person ( name, age, job ) {
this . name = name
this . age = age
this . job = job
}
Person . prototype. sayName = function ( ) {
console. log ( this . name)
}
21. Javascript
继承
21.1 原型链式继承
function SuperClass ( ) {
this . books = [ 'css' , 'js' , 'html' ]
}
function SubClass ( ) {
}
SubClass . prototype = new SuperClass ( )
var obj1 = new SubClass ( )
var obj2 = new SubClass ( )
console. log ( obj2. books)
obj1. books. push ( '设计模式' )
console. log ( obj2. books)
( 1 ) 由于子类通过其原型 prototype 对父类实例化, 继承了父类。如果父类中的共有属性要是引用类型, 就会在子类中被所有实例共用, 因此子类的实例更改由父类构造函数中继承来的共有属性就会直接影响到其他子类。
( 2 ) 子类实现的继承是靠其原型 prototype 对父类的实例化实现的, 因此咋创建父类的时候, 是无法向父类传递参数的, 因而在实例化父类的时候也无法对父类构造函数内的属性进行初始化。
21.2 构造函数继承
function SuperClass ( price ) {
this . books = [ 'css' , 'js' , 'html' ]
this . price = price
}
SuperClass . prototype. sayBooks = function () {
console. log ( this . price)
}
function SubClass ( price ) {
SuperClass . call ( this , price)
}
var obj1 = new SubClass ( 50 )
var obj2 = new SubClass ( 60 )
console. log ( obj2. books)
obj1. books. push ( '设计模式' )
console. log ( obj2. books)
obj2. sayBooks ( )
21.3 类式继承和构造函数继承结合
function SuperClass ( price ) {
this . books = [ 'css' , 'js' , 'html' ]
this . price = price
}
SuperClass . prototype. sayBooks = function ( ) {
console. log ( this . price)
}
function SubClass ( price ) {
SuperClass . call ( this , price)
}
SubClass . prototype = new SuperClass ( )
var obj1 = new SubClass ( 50 )
var obj2 = new SubClass ( 60 )
console. log ( obj2. books)
obj1. books. push ( '设计模式' )
console. log ( obj2. books)
obj2. sayBooks ( )
22. 同源策略
同协议同域名同端口, 是一个安全策略。
同协议: http 或者 https
同域名: www. baidu. com
同端口:8080
同源策略是浏览器的一个安全功能, 不同源的客户端脚本在没有明确授权的请求下, 不能读写对方资源。 ( 也就是跨域)
23. 解决跨域问题
( 1 ) 降域:用 document.domain, 此方式的特点:只能在父域名和子域名之间使用, 存在安全性问题, 当一个站点被攻击后, 另一个站点会引起安全漏洞。这种方法只适用于 Cookie 和 iframe 窗口。
( 2 ) JSONP跨域, 基本原理是:通过动态的创建 script 标签, 然后利用 src 属性进行跨域。
存在问题:使用这种方法, 只要是个网站都可以拿到 b.com 里的数据.
存在安全性问题; 只能是 GET, 不能是 POST; 可以被注入恶意代码, 篡改页面内容, 可以采用字符串过滤来规避此问题。
( 3 ) CORS 是一个 W3C 标准, 全称是 "跨域资源共享" ( Cross-origin resource sharing) .
大致流程: 浏览器向服务器发送 XMLHTTPRequest 请求, 添加响应头声明 Access-Control-Allow-Origin
( 4 ) CORS 和 JSONP, 或者后端设置代理。
24. Cookie
的弊端
IE6 或者更低版本最多 20 个 cookie
IE7 和之后的版本最多可以有 50 个cookie
Firefox 最多 50 个cookie
chrome 和 Safari 没有强硬限制
25. position
的 absolute
与 fixed
共同点与不同点?
1 ) 共同点
1 . 改变行内元素的呈现方式, display 被设置为 block
2 . 让元素脱离普通文档流, 不占据空间
3 . 默认会覆盖到非定位元素上
2 ) 不同点
absolute 的根元素是可以设置的, 而 fixed 的根元素固定为浏览器窗口
当你滚动网页, fixed 元素与浏览器窗口之间距离不变的
26. JSON
JSON 是一种轻量级的数据交换格式, 它是基于 JavaScript 的一个子集。数据格式简单, 易于读写, 占用带宽小。
JSON.stringify( )
JSON.parse( )
27. call()
和 apply()
的区别和作用
作用: 动态改变某个类的方法的运行环境。