vue知识点记录
VUE前期知识点
MVC概念
- MVC是一种分层开发模式,让业务更加清晰，并不会减小业代码量，可能会更多,减小模块的耦合度
- MVC是站在整个项目的角度对项目进行分层
- 1.M(数据链接层---数据库)
- 2.V(视图层)--前端页面
- 3.C(业务层----路由那一块)
框架和库的区别
+ 框架：是一套完整的解决方案，对项目的侵入性较大，项目若是须要更换框架，那就须要从新架构整个项目。
+ 库： 提供某一个功能，对项目侵入较小，在项目中也容易切换库进行开发。
复制代码
MVVM的理解
至关于MVC模式中的V层，把V层分层了MVVM三层，在请求-处理-响应中，也就是V层-C层-M层（大体）。
复制代码
MVVM是前端视图层的分层开发思想，主要把每一个页面分层M/V/VM,其中VM是MVVM思想的核心，它是M和V之间的调度者。VM提供了数据的双向绑定。css
- M ---保持的是每一个页面中单独的数据
- V --- 视图，也就是页面的HTml结构。
- VM -- M渲染到V层 须要VM的调度,V到M也须要VM的调度。
注意点
+ 在函数内要注意this 的指向,好比定时器之类的,有时可使用箭头函数。
复制代码
什么是vue.js
- 是一套构建用户界面的框架, 只关注视图层,能够和其余类库整合。
- vue语法能够进行手机APP开发，须要借助weex。
- 用户不在操做DOM元素，双向数据的绑定，程序员只须要关心数据的业务逻辑，以及组件系统。
- 目前最火的前端框架
- 引入MVVM 设计模式
- 简单、轻量、快捷的快捷
单页面应用(spa)
单页面应用（SinglePage Web Application，SPA）---多页面应用（MultiPage Application，MPA）的比较html
-
组成---- 一个外壳页面和多个页面片断组成 ------------------- 多个完整页面构成前端
-
资源共用(css,js)----- 共用，只需在外壳部分加载 ------------------- 不共用，每一个页面都须要加载vue
-
刷新方式---- 页面局部刷新或更改 ------------------- 整页刷新node
-
url 模式---- a.com/#/pageone a.com/#/pagetwo ------------------- a.com/pageone.htm… a.com/pagetwo.htm…webpack
-
用户体验---- 页面片断间的切换快，用户体验良好 -------------------页面切换加载缓慢，流畅度不够，用户体验比较差ios
-
转场动画---- 容易实现 ------------------- 没法实现程序员
-
数据传递---- 容易 ------------------- 依赖 url传参、或者cookie 、localStorage等web
-
搜索引擎优化(SEO)---- 须要单独方案、实现较为困难、不利于 SEO检索 可利用服务器端渲染(SSR)优化 ------------------- 实现方法简易ajax
-
试用范围---- 高要求的体验度、追求界面流畅的应用------------------- 适用于追求高度支持搜索引擎的应用
-
开发成本---- 较高，常需借助专业的框架 ------------------- 较低 ，但页面重复代码多
-
维护成本---- 相对容易 ------------------- 相对复杂
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布尔值
-
- 对象的形式
在Vue中只须要关注数据的改变，而无需关心DOM操做。在Vue中已经实现了数据的双休绑定，每当咱们修改data的数据时，就会自动监听数据的变化，应用到页面上。
复制代码
过滤器
- 用做常见的文本格式化
- 用在差值表达式 {{}} 和 v-bind 属性里
- 语法： 1.
定义全局的过滤器- {{ name | 过滤器名称}}
- Vue.filter('过滤器的名称',function(data){ })
- 能够屡次调用过滤器,一直 | (管道符)下去
定义vue实例的私有过滤器
- 在Vue实例里，写 filters: {}
- 使用的时候以查找私有过滤器为先,没有则查找全局过滤器。
填充字符串
- padStart(length,str)
- padEnd(length,str)
按键修饰符
vue自带的修饰符
- enter --键盘码至关于13
- table
- up
- down
- ....
- 键盘码
用法： @keyup.enter = "function" 或者 @keyup.13 = "function" -------
复制代码
自定义键盘修饰符
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实例建立、运行、到销毁期间，老是伴随各类各样的事件，这些事件(函数)，统称为生命周期
- 建立期间的生命周期函数：
- beforeCreate：实例刚在内存中被建立出来，此时，尚未初始化好 data 和 methods 属性
- created：实例已经在内存中建立OK，此时 data 和 methods 已经建立OK，此时尚未开始 编译模板。
能够在这里获取 ajax 数据。 - beforeMount：此时已经完成了模板的编译，可是尚未挂载到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。是Vue实例建立的最后一个函数,实例也即将进入运行阶段。
最先此处能够进行 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 合用。
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模板写在一块儿；
- 子组件的数据和父组件的区别 ：
子组件传值给父组件
- 相似一个 回调函数。
- 一、在渲染的子组件上使用 v-on 绑定要传递的函数
- 二、在渲染的子组件中使用 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.
router
- this.$route 是路由参数对象，全部路由中的参数，params,query等等都属于他
- this.$router 是一个路由导航对象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等须要 loader2. 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项目
-
- -D 表示通常安装项目所需的工具,放在package.json中的devDependencies 如css-loader 、less
-
- -S 表示项目所需的依赖文件 dependencies 如vue JQuery
-
- -g 表示全局文件
vue学习的几个点以及其余，可自行扩展
js的一些东西变量的声明方式
数组的扩展，对象的扩展，函数的扩展
代理、反射、promise、class、模块化
promise
-
- 就是单纯的解决 回调地狱 的问题，也就是多层嵌套，好比ajax里面还有ajax。
-
- 代码量不必定减小。
-
重要概念
-
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的需求
-
- 在一连串的 .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进行公共页面的布局。
- 1. Vue经常使用知识点记录
- 2. 知识点记录
- 3. class --- ES6知识点记录
- 4. HTML知识点记录
- 5. android 小知识点记录
- 6. 知识点文章记录
- 7. 零碎知识点记录
- 8. GCC知识点记录
- 9. Cocos Creator 知识点记录
- 10. Android知识点记录
- 更多相关文章...
- • ADO 添加记录 - ADO 教程
- • ADO 更新记录 - ADO 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Vue经常使用知识点记录
- 2. 知识点记录
- 3. class --- ES6知识点记录
- 4. HTML知识点记录
- 5. android 小知识点记录
- 6. 知识点文章记录
- 7. 零碎知识点记录
- 8. GCC知识点记录
- 9. Cocos Creator 知识点记录
- 10. Android知识点记录