vue知识点记录

• MVC是一种分层开发模式,让业务更加清晰，并不会减少业代码量，可能会更多,减少模块的耦合度
• MVC是站在整个项目的角度对项目进行分层
• 1.M(数据连接层---数据库)
• 2.V(视图层)--前端页面
• 3.C(业务层----路由那一块)

cookie和session

• cookie 存在客户端，安全性很低
• session 存在服务端，里面也使用了cookie，安全性较高，数据也不容易丢失。

框架和库的区别

+ 框架：是一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，那就需要重新架构整个项目。
  + 库： 提供某一个功能，对项目侵入较小，在项目中也容易切换库进行开发。

复制代码

MVVM的理解

相当于MVC模式中的V层，把V层分层了MVVM三层，在请求-处理-响应中，也就是V层-C层-M层（大致）。
复制代码

MVVM是前端视图层的分层开发思想，主要把每个页面分层M/V/VM,其中VM是MVVM思想的核心，它是M和V之间的调度者。VM提供了数据的双向绑定。

• M ---保持的是每个页面中单独的数据
• V --- 视图，也就是页面的HTml结构。
• VM -- M渲染到V层 需要VM的调度,V到M也需要VM的调度。

注意点

+ 在函数内要注意this 的指向,比如定时器之类的,有时可以使用箭头函数。

复制代码

什么是vue.js

• 16年底火了起来
• 是一套构建用户界面的框架, 只关注视图层 ,可以和其他类库整合。
• vue语法可以进行手机APP开发，需要借助weex。
• 用户不在操作DOM元素，双向数据的绑定，程序员只需要关心数据的业务逻辑，以及组件系统。
• 目前最火的前端框架
• 引入MVVM 设计模式
• 简单、轻量、快捷的快捷

单页面应用(spa)

单页面应用（SinglePage Web Application，SPA）---多页面应用（MultiPage Application，MPA）

• 组成---- 一个外壳页面和多个页面片段组成 ------------------- 多个完整页面构成

• 资源共用(css,js)----- 共用，只需在外壳部分加载 ------------------- 不共用，每个页面都需要加载

• 刷新方式---- 页面局部刷新或更改 ------------------- 整页刷新

• url 模式----a.com/#/pageone a.com/#/pagetwo -------------------a.com/pageone.htm… a.com/pagetwo.htm…

• 用户体验---- 页面片段间的切换快，用户体验良好 -------------------页面切换加载缓慢，流畅度不够，用户体验比较差

• 转场动画---- 容易实现 ------------------- 无法实现

• 数据传递---- 容易 ------------------- 依赖 url传参、或者cookie 、localStorage等

• 搜索引擎优化(SEO)---- 需要单独方案、实现较为困难、不利于 SEO检索 可利用服务器端渲染(SSR)优化 ------------------- 实现方法简易

• 试用范围---- 高要求的体验度、追求界面流畅的应用------------------- 适用于追求高度支持搜索引擎的应用

• 开发成本---- 较高，常需借助专业的框架 ------------------- 较低 ，但页面重复代码多

• 维护成本---- 相对容易 ------------------- 相对复杂

vue的指令

v-cloak和{{}} 插值表达式

• 在插值表达式里 网速比较慢的时候,vue包还没有加载完成的时候会在页面显示{{msg}},加载完了后才渲染出数据,就会产生闪烁问题。此时需要在css中写 [v-cloak] {display:none} ,切插值的元素写 v-cloak 属性。
• 实现原理 1:通过[v-cloak] 给指定的元素执行添加 隐藏样式 2：当vue引入完毕，则把此属性删除掉

v-text和 v-html

• v-text: 解析成字符串,没有闪烁问题但会覆盖原来的文本内容
• v-html： 可以解析html标签,没有闪烁问题但会覆盖原来的文本内容

v-bind、v-on

• v-bind: 可以直接简写成 : ,且v-bind可以写合法的js代码及表达式
• 只能实现数据的单向绑定,从M到V层。

v-model 数据的双向绑定

• 针对表单元素 Input、select、checkbox以及还有 组件上 component 等等,可以和用户进行交互。
• vue中唯一一个双向数据绑定的指令。

v-for的使用

• 循环数组 v-for="item in arr" --- "(val,i) in arr"
• 循环对象
• 迭代数字 v-for="count in 10" -----count从1开始
• 要保证循环每一项的唯一性,M和V层的一一对应,需要添加 :key属性。
• key 且必须是一个 string/number 的类型数据,数据也要保证唯一性。index的值不建议作为key值。

v-if、v-show、v-else

• v-if
  • 直接删除,为true则需要重绘，DOM操作
• v-show
  • 类似于display: none; 切换比较频繁的可以使用v-show

事件的修饰符

• .stop -------阻止事件冒泡
• .prevent ----阻止默认行为。<a href="baidu.com" @click.prevent="add">
• .capture(捕获机制)----- .once(只执行一次)------.self(只执行自己) -事件修饰符可以连用

vue中设置class类、使用v-bind进行属性绑定

• 数组的形式

  • 属性绑定的形式

• 数组中添加三元表达式
• 数组中对象来代替三元表达式

  • 属性绑定的形式，在data中定义flag布尔值

• 对象的形式

day2

在Vue中只需要关注数据的改变，而无需关心DOM操作。在Vue中已经实现了数据的双休绑定，每当我们修改data的数据时，就会自动监听数据的变化，应用到页面上。
复制代码

过滤器

• 用作常见的文本格式化
• 用在差值表达式 {{}} 和 v-bind 属性里
• 语法： 1. 定义全局的过滤器
  • {{ name | 过滤器名称}}
  • Vue.filter('过滤器的名称',function(data){ })
  • 可以多次调用过滤器,一直 | (管道符)下去
  2. 定义vue实例的私有过滤器
  • 在Vue实例里，写 filters: {}
  • 使用的时候以查找 私有过滤器 为先,没有则查找 全局过滤器 。

填充字符串

• padStart(length,str)
• padEnd(length,str)

按键修饰符

vue自带的修饰符

• enter --键盘码相当于13
• table
• up
• down
• ....
• 键盘码

用法： @keyup.enter = "function" 或者  @keyup.13 = "add" ------- 
复制代码

自定义键盘修饰符

Vue.config.keyCodes.enter = 13; //两者一一对应

@keyup.enter = "function"
复制代码

指令的自定义 ----类似于 v-focus(系统没有这个指令)

注： 在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 1.定义全局的指令 //定义的时候,指令的名称前面，不需要加 v- 前缀。在调用的时候，必须在名称前添加 v- 前缀来进行调用。 //其中：参数1 是指令的名称。 // 参数2 是一个对象包裹的钩子函数。

• Vue.directive('focus',{ //注意： 在每一个函数中，第一个参数只能是 el ,表示被绑定的元素的原生的js对象，可以进行DOM操作。

  bind: function(el){},//表示指令绑定到元素上的时候，会立即执行 bind 函数，只执行一次。bind表示还没有挂载到DOM树上去。故有些方法建议在inserted函数上调用。 //样式操作，在这里进行。

  inserted: function(){}, // 表示元素插入到 DOM 中的时候，会执行此函数，只执行一次。 // JS操作在这里

  updated: function(){}, })

生命周期函数

• 从Vue实例创建、运行、到销毁期间，总是伴随各种各样的事件，这些事件(函数)，统称为 生命周期
• 创建期间的生命周期函数：

  可以在这里获取 ajax 数据。
  最早此处可以进行 DOM 操作
  

• 运行期间的生命周期函数：
  • beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
  • updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
• 销毁期间的生命周期函数：
  • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
  • destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

vue-resource vue里面的请求数据

• .then()-------后面第一个参数为成功的回调函数，第二个为失败的回调函数(失败的可以省略)。
• 通过result.body 拿到请求的数据。
• 手动发起的 POST 请求，默认没有表单格式，即没有设置 application/x-www-form-urlencoded,有的服务器处理不了。需要重新设置 {emulateJSON: true}

day3

vue动画

• 使用 transition 设置动画，把需要动画的元素包裹起来。 // //

  {{ 这是需要动画的元素，需要被transition包裹起来 }}

  //

• v-enter 表示一个时间点，是进入之前元素的起始状态

• v-leave-to 表示终止状态。

• 且包含的 元素(h3) 支持显示隐藏。

• 在 transition 标签里面添加name 属性可以把V- 前缀换成自己定义的。 v-enter 变成 my-enter

• vue 动画可以和 animate.css 合用。---参见 vue day3-8节

transition-group 组合列表动画标签

• .v-move 和.v-leave-active 要一起使用

• 初始化动画需要加 appear

• 设置渲染成的标签 tag=""

• 半场动画的实现

• @before-enter

• @enter

  • 手动刷新 offsetWidth --offset系列
  • done() ------触发after-enter 函数

• @after-enter

组件的出现

• 组件的出现就是为了拆分Vue实例的代码量，防止一个vue实例代码量过多。
• 组件化：从UI界面的角度进行划分的，方便组件复用
• 模块化：从代码逻辑的角度的划分的，方便代码分层开发，让每个功能模块职能单一。
• 组件也有自己的生命周期函数

组件上的data数据

• data 是一个函数，且返回一个 对象.这样可以使得每个组件都有一个私有的data数据域。

多个组件的切换

• 使用

组件渲染的几种方式

• 直接以组件的名称作为标签渲染
• 用 component 标签渲染 但是需要添加 :is 属性来添加组件名称。

在组件中操作DOM，如 ref，

• 在一个组件中可以操作页面上所有的元素。
  • 即在子组件中也可以获取父组件的DOM元素
  • 配合 getBoundingClientRect() 获取偏移距离。

关于watch

• 使用这个属性，可以监听 data 中指定数据的变化，然后触发函数。此函数有两个参数。 参1 新数据 ； 参2 旧数据。
• watch最主要是用来监听路由的变化 。

关于 computed

• 在 computed 中，可以定义一些 属性，这些属性，叫做 【计算属性】， 计算属性的，本质，就是 一个方法，只不过，我们在使用 这些计算属性的时候，是把 它们的 名称，直接当作 属性来使用的；并不会把 计算属性，当作方法去调用；
• 计算属性的求值结果，会被缓存起来，方便下次直接使用；
• 需要 return 一个值。

父组件向子组件传值

• 原理：父组件通过属性绑定 (v-bind/v-on)的形式，把数据(data/methods)绑定到子组件标签上，子组件就可以通过属性名获取父组件的数据，并且子组件需要添加 props 属性接收 绑定的属性名 获取数据。
• props 中的数据 是只读的,和template模板写在一起；
• 子组件的数据和父组件的区别 ：

子组件传值给父组件

• 类似一个 回调函数。
• 1、在渲染的子组件上使用 v-on 绑定要传递的函数
• 2、在渲染的子组件中使用 this.$emit('函数名',参数)

ref 获取DOM和组件

• Vue不建议操作DOM,故提供了ref操作DOM
• 1.在需要操作的元素或组件上添加 ref=""
• 2.可以在函数调用 this.$refs.str。
• 调用子组件的data和methods.

路由

什么是路由： 路由是一种对应关系。

• 后端路由：是前端请求的URL和后端的处理函数的对应关系。
• 前端路由：是对于单页面，主要通过 hash (#)来实现不同页面之间的切换。在HTTP请求中，不会包含hash后面的内容

路由引入的两种方式

• script引入
• webpack 模块化

路由对象

• 每当创建一个路由对象，在全局中，就有了一个 路由的构造函数 VueRouter,传递一个配置对象。
• routes 表示【路由匹配规则】--是一个数组，每一项是对象
• 每一项匹配规则就是一个对象，必须带有两个属性：
  • path ------路径
  • component------路由跳转的组件
  • 如果有路由的嵌套，则添加第三个属性 children:[],在里面写路由的匹配规则。
• 将路由对象注册到vm实例上
• 在html上 放一个路由容器 router-view 标签

关于 vue-router

• router-link 默认是a标签，可以通过 tag='' 改为相应的标签。
• router-link 有一个选中样式属性 .router-link-active
• linkActiveClass: 'myactive' // 和激活相关的类,在路由实例里添加修改上面的类名。

路由的重定向

• {path:'/', redirect:'/login(重定向的路径)'}

路由传参

• 在路由中以 序列化 形式传递。

• 在路由规则中以 ** this.$route.query 对象拿取。** /模板中提取

• 在路由中以 / 的方式传递

• 在path匹配路径中添加 /:id

• 在组件中可以用 this.$route.params.id 提取

vue目前提供的标签

• template transition transition-group component

data

• 在Vue 中一般是自己组件中的私有数据。

在网页中有两种跳转形式

• 使用a标签的形式 叫做标签跳转
• 使用 window.location.href 的形式 叫做 编程式导航。

区分this. route

• this.$route 是路由参数对象，所有路由中的参数，params,query等等都属于他
• this.$route 是一个路由导航对象VueRouter，用它可以方便的 使用 JS代码，实现路由的前进和后退，跳转到新的 URL地址。

webpack 的主要内容

打包时候问题：
+ 1 只有添加了插件 webpack-dev-server 的时候 bundle.js文件才会在虚拟内存中挂载。
+ 2 使用var htmlWebpackPlugin = require('html-webpack-plugin')
+ 2 先看一下文档。 
复制代码

• WEBPACK是基于node构建的。

• npm run dev npm run build

• webpack-dev-server 1.把项目开启在服务器上，类似于一个node服务 2.把指定的 index.js 打包成 main.js ，并把 main.js 放入到内存中

• html-webpack-plugin 1.把 index.html 文件打包到内存中 2.把main.js自动添加到 index.html 中

• loader 1. webpack默认只能打包 js类型的文件。此时打包 css等需要 loader 2. less less-loader 先这两个包装包 (vue脚手架不提供less和sass，只提供css的)----装完包后 在页面上引入 即可使用less格式的css样式！ +

render方法(重点)

• render渲染组件会覆盖之前 #app里面的内容。
• render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指 定的 组件模板，渲染为 html 结构 return createElements(login) // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器 }

包的查找规则 import和require导入规则都一样。

• 1.在项目目录中查找 node_modules的文件夹
• 2.在node_modules的文件夹根据包名，查找对应的 Vue文件夹(以vue为例子)
• 3.在vue文件中查找 package.json的配置文件
• 4.在配置文件中 查找mian属性,此mian属性指定了包被加载的时候的入口文件。

如何在webpack中使用vue项目

• 1. -D 表示一般安装项目所需的工具,放在package.json中的devDependencies 如css-loader 、less
• 2. -S 表示项目所需的依赖文件 dependencies 如vue JQuery
• 3. -g 表示全局文件

vue学习的几个点以及其他

js东西就是变量的声明方式

数组的扩展，对象的扩展，函数的扩展

代理、反射、promise、class、模块化

promise

• 1. 就是单纯的解决 回调地狱 的问题，也就是多层嵌套，比如ajax里面还有ajax。
• 2. 代码量不一定减少。
• 3. 重要概念

  • Promise 是一个 构造函数 ,那么就可以 new Promise() 得到一个 Promise 实例.

  • Promise上有两个函数,分别是 resolve(成功之后的回调) 和 reject(失败回调)。

  • 在 Promise 的 prototype 属性上, 有一个 .then() 方法, 只要是Promise 构造出来的实例 都可以访问 .then() 方法。

  • Promise 表示一个 异步的操作，每new Promise的实例就表示一个具体的异步操作。

  • 既然 Promise 创建的实例是一个异步操作。那么，操作的结果只能是两种状态：

    • 异步执行成功---resolve(成功之后的回调)和异步执行失败---reject()。
    • 由于 Promise 的实例，是一个异步，所以，内部拿到操作的结果侯，无法使用 return 把操作的结果返回给调用者；这个时候，只能使用回调函数的形式，来把成功或失败的结果，返回给调用者。 // function(data,callback){ return data;---这是错的,而是下面这种。 return callback(data); }

  • 我们可以在 new 出来的 Promise 实例上，调用.then() 方法【预先】为这个 Promise 异步操作，指定成功resolve和失败reject 的回调函数。

  • // 注意：这里 new 出来的 promise， 只是代表 【形式上】的一个异步操作；

    • // 什么是形式上的异步操作：就是说，我们只知道它是一个异步操作，但是做什么具体的异步事 情，目前还不清楚 // var promise = new Promise()

  • // 这是一个具体的异步操作，其中，使用 function 指定一个具体的异步操作

    • var promise = new Promise(function(){ // 这个 function 内部写的就是具体的异步操作！！！ })

  • const fs = require('fs')

  • // 每当 new 一个 Promise 实例的时候，就会立即 执行这个 异步操作中的代码 // 也就是说，new 的时候，除了能够得到 一个 promise 实例之外，还会立即调用 我们为 Promise 构造函数传递的那个 function，执行这个 function 中的 异步操作代码； var promise = new Promise(function () { fs.readFile('./files/2.txt', 'utf-8', (err, dataStr) => { if (err) throw err console.log(dataStr) }) })

    • // 初衷： 给路径，返回读取到的内容。 且为了规避一new promise 就触发括号里面的function(){} 需要用一个函数把实例包裹起来 。 function getFileByPath(fpath) { return new Promise(function (resolve, reject) { fs.readFile(fpath, 'utf-8', (err, dataStr) => {

      if (err) return reject(err)
        resolve(dataStr)
      
      })
      复制代码

      }) }

promise的需求

• 1. 在一连串的 .then 中， 哪怕前面的Promise 执行失败了，但是，也不要影响后续 .then 的执行，此时， 我们可以单独为每个 Promise 通过失败的回调里 指定下一次的内容。 ----参照 Vue课程 day8-8节。
• catch 的作用 : 但是又有相反的需求，后续的Promise执行，和前面有关，一旦前面的报错，后续的不能执行。 catch 的作用就是前面的Promise执行失败，则立即终止所有Promise的执行，并马上进入catch去处理Promise中抛出的异常 catch(fn)。

axios的请求拦截和响应拦截有什么用，能做什么

关系vue

• 父子组件生命钩子加载的顺序
• 父子组件的通讯方案，兄弟组件的通讯方案
• 为什么不建议在子组件改变父组件传过来的值
• vue中的extend,extends,mixin的区别
• vue-router中的history模式和hash模式的区别，为什么history模式更好，怎么配置history模式
• vue-router的路由钩子可以用它做什么；

• 设置路由跳转的取消和成功

• 怎么利用vue-router进行公共页面的布局。