![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
weixin_44889992
这个作者很懒,什么都没留下…
展开
-
前端的开发规范
1.前端的开发规范1.目录构建的规范命名原则:简洁比如: src 源代码 img 图片资源 js JavaScript脚本 dep 第三方依赖包不使用复数比如: 不使用 imgs docs根目录(root)结构按职能划分比如:src 源代码(逻辑)doc 文档dep 第三方依赖包test 测试根据业务逻辑进行文件夹的划分srccommon 公共资...原创 2019-04-16 20:23:42 · 142 阅读 · 1 评论 -
组件生命周期
组件生命周期钩子函数,就是options里面的key, 它的值是函数钩子函数写在其他配置项的后面1. 组件的有哪几个阶段?初始化阶段运行中阶段销毁阶段2. 初始化阶段分为两个大阶段, 每一个大阶段包含两个生命周期钩子函数 ---- 生命周期 --》人的一声 钩子函数 --》 (人在某个阶段做得一些事情, 这些事情是自动触发)有那四个钩子函数呢?每个钩子函数有什么功能嗯?项目...原创 2019-04-25 14:07:54 · 142 阅读 · 0 评论 -
虚拟DOM( VDOM ) 和 diff算法
虚拟DOM( VDOM ) 和 diff算法总结:虚拟DOM 是什么?虚拟DOM是利用 了js的对象的Object的对象模型来模拟真实DOM, 那么它的结构是一个树形结构diff算法diff算法是用来比较两个或是多个文件, 返回值是文件的不同点diff算法是同级比较的diff思维也是来自后端diff算法的比较思维比较后会出现四种情况:1、此节点是否被移除 -> 添加新的...原创 2019-04-20 11:26:24 · 212 阅读 · 0 评论 -
列表渲染中的key的作用
列表渲染中的key的作用给VDOM添加标记如果没有key会产生的问题:VDOM是惰性的, 它有一个原则, 这个原则叫做’就地复用’ , 它认为我的第一个就是红色的, 删除了第二个之后, 第二个就变成了第一个, 它印象中第一个是红的, 所以就我们认为的第二个变成红的了解决: 使用key属性使用:<li v-for = " (item,index) in list " :key ...原创 2019-04-20 11:25:47 · 983 阅读 · 0 评论 -
mixins
概念:mixins; 混合 ,将 根实例或是组件中的配置项 抽离出来, 单独管理类型A:局部混入var mixin = {methods: {sum(){alert( 10*10 )}},}new Vue({el: '#app',data: {},watch: {},mixins: [mixin],computed: {}})注意:即使分离出去, 我们...原创 2019-04-20 11:25:10 · 292 阅读 · 0 评论 -
axios 和 fetch
axios fetch 数据请求vue 1.x 时我们使用的 vue-resourcevue 2.x之后使用axios 封装的第三方库fetch 原生相同点:都是 Promise前端原生提供了两种数据请求方式ajaxfetch切记:axios fetch post方法都是有坑的 , 一定要注意解决方法:设置请求头通过 new URLSearchParams() 来进行...原创 2019-04-20 11:24:37 · 152 阅读 · 1 评论 -
fetch
fetch请求例子<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA...原创 2019-04-20 11:24:08 · 167 阅读 · 0 评论 -
Axios
Axios总结 1.get方法 A: 无参数 axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error)) B: 有参数...原创 2019-04-20 11:23:32 · 164 阅读 · 0 评论 -
watch 和 computed
watch 和 computed/*业务:当我写好姓和名 , 全称自动显示目的: 对比 watch vs computed vs methodsmethods: 事件computed:有逻辑 2. 要像变量一样使用 , 这个时候选computedwatch:有异步操作 2. 开销较大*/案例<!DOCTYPE html><html lang="en"...原创 2019-04-20 11:22:56 · 180 阅读 · 0 评论 -
props属性验证
props属性验证常用形式: props: { key: keyType // key是从父组件获得的自定义属性, 值是我们期望得到的数据类型 }业务:我现在想要 > 1000 我才要, 没有 > 1000 我就不要解决: vue提供了一个 :validator props: { ...原创 2019-04-25 14:08:41 · 136 阅读 · 0 评论 -
过滤器
过滤器vue 1.x版本一共提供了10个过滤器, 但是不满足人们使用,vue2.x全部不提供了, 交给开发者自己写但是vue提供了定义过滤器的方式过滤器: 对数据进行格式化的一个函数过滤器可以用在两个地方:双花括号插值和 v-bind 表达式过滤器用给一个 ’ | ’ 表示, 我们称之为 ‘管道符’过滤器-局部<body> <div id="app...原创 2019-04-25 14:09:28 · 307 阅读 · 0 评论 -
vuex
vuex1. 什么是状态?用一条数据去管理一个视图或是视图中的一部分,那么我们就将这个数据称之为状态2. 什么是状态管理?用一条数据去管理一个视图或是视图中的一部分,那么我们就将这个数据称之为状态,这种管理的形式我们称之为 状态管理3. vuex是做什么的?(概念)vuex是一个集中式的存储仓库【状态】,类似于 本地存储、数据库,vuex是vue的状态管理工具,它的功能主要是...原创 2019-05-15 08:42:57 · 84 阅读 · 0 评论 -
vue的非响应式情况
vue的非响应式情况数组的下标<div id="app"> <button @click = "change"> 点击 </button> <ul> <li v-for = ' (item,index) in list ' :key = 'index'> <p&g...原创 2019-05-15 08:42:04 · 1134 阅读 · 0 评论 -
路由的使用
路由的使用命名路由给路由起个名字,这样可以方便我们在使用路由的时候, 简写路径命名视图给出了一级视图以外的其他视图起名字, 这样可以区分不同级别的路由使用不同级别的视图动态路由 & 路由传参 & 路由接参vue cli3 配置反向代理在根目录下面新建一个 vue.config.js// vue.config.js中可以默认直接使用 http-proxy-...原创 2019-05-15 08:41:26 · 86 阅读 · 0 评论 -
Router
Router基础vue 路由的mode(模式)有几种, 分别是什么?在那些环境下运行?hash: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。history: 依赖 HTML5 History API 和服务器配置。【需要后端支持】abstract: 支持所有 JavaScript 运行环境,如 Node.js 服务...原创 2019-05-15 08:39:15 · 215 阅读 · 0 评论 -
slot 插槽
<body> <div id="app"> <Hello> <div> 这是组件内直接写的 </div> </Hello> </div> <template id="hello"> &...原创 2019-04-25 14:12:48 · 77 阅读 · 0 评论 -
过渡 & 动画
过渡 & 动画过渡指的是 用 css3 的transition来实现动画效果动画指的是用 js来实现动画效果Vue中一共给了四种解决方案, 但是我们常用的只有一种在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库,如 Animate.css 【推荐】在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScr...原创 2019-04-25 14:11:42 · 167 阅读 · 0 评论 -
渲染函数 和 jsx
渲染函数 和 jsx渲染函数 render函数 — 》 createElmentjsx( javascript + xml )xml 就是一种标签化的数据格式jsx语法浏览器无法解析, 必须靠babel来解析jsx语法出现的原因是为了解决,render函数频繁使用createElement来创建节点<body> <div id="app"&g...原创 2019-04-25 14:10:54 · 277 阅读 · 0 评论 -
自定义指令
自定义指令全局自定义指令局部自定义指令指令的钩子函数(一共有5个)bind : 指令和元素第一次绑定的时候调用inserted : 指令绑定的元素插入父节点的时候调用update : 指令绑定的元素自身, 或是他的内容(子节点)发生改变的时候出发componentUpdated : 指令绑定的组件自身, 或是他的内容(子节点)发生改变的时候出发unbind : 指令和元素第一...原创 2019-04-25 14:10:19 · 118 阅读 · 0 评论 -
watch
watch作用:用来监听数据的变换, 当数据模型 (data选项 M)发生改变时, watch就会触发使用两种用法:key的value值是一个函数new Vue({watch: {key(value,oldvalue){}}})第一种用法的例子:<!DOCTYPE html><html lang="en"><head>&...原创 2019-04-20 11:22:27 · 471 阅读 · 0 评论 -
v-mode 双向数据绑定
v-mode 双向数据绑定效果数据改 , 视图更视图改, 数据更实现使用v-model实现缺点v-model默认绑定value属性, 所以v-model只能在表单使用原理为什么数据能直接在视图显示v-model默认绑定了DOM对象的value属性, 当它初次绑定的时候,就会触发getter,watcher就会触发, watcher通知Vue生成新的VDOM树,再通过ren...原创 2019-04-20 11:21:33 · 1697 阅读 · 0 评论 -
动态组件 is属性 keep-alive组件
动态组件动态组件就是 component组件 , 组件身上可以绑定一个is属性, 用来表示某一个组件is属性我们html中有一些标签是规定它的直接子元素的 , 比如 ul li ol li selector option table这类型标签不能直接用常规的组件使用方式, 必须在对应直接子元素上绑定 is属性<div id="app"><table&g...原创 2019-04-27 09:39:43 · 317 阅读 · 0 评论 -
组件通信
1. 父子组件通信绑定的是简单类型数据父组件中定义数据, 通过单向数据绑定的形式, 将数据绑定在子组件身上, 属性是自定义属性,子组件通过配置项中的props接收数据, props可以是一个数组,数组中放的是自定义属性名称那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用父组件中数据一旦修改, 子组件数据就会修改, 那么这也就是单项数据流<body>...原创 2019-04-22 19:56:39 · 71 阅读 · 0 评论 -
组件
组件组件化思维组件化针对的是页面中的整个完整的功能模块划分 (项目的分工)组件的概念( 一个文件 )组件是一个html、css、js、image等外链资源,这些部分组成的一个聚合体优点:代码复用,便于维护划分组件的原则:复用率高的,独立性强的组件命名建议使用两种方式使用 kebab-case举例Vue.component(‘header-title’,{})使用 Pasc...原创 2019-04-22 19:54:40 · 112 阅读 · 0 评论 -
vue--单向和双向数据绑定
单项 和 双向数据绑定单项数据绑定:概念;将数据和属性进行绑定, 也就是原生身上的属性的值就是数据格式v-bind:attr = data简写::attr = data数据更改 , 视图就更新<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><me...原创 2019-04-17 22:05:27 · 116 阅读 · 0 评论 -
vue--事件
事件基础内容:属性绑定function alert(){alert('hello vue.js')}2. js操作// 1. 获取数据var data = 'hello vue.js'// 2. 获取DOMvar app = document.querySelector('#app')// 3. 渲染数据app.innerHTML = data// 4. 添加事件a...原创 2019-04-17 22:04:53 · 77 阅读 · 0 评论 -
vue--条件渲染
条件渲染两种:v-if单路分支<p v-if = " f ">true</p>双路分支<p v-if = " f ">true</p><p v-else>false</p>多路分支<p v-if = " text === 'A'"> A </p><...原创 2019-04-17 22:04:09 · 73 阅读 · 0 评论 -
vue-- 列表渲染
列表渲染v-for指令v-for = " xxx in data "{{ xxx }}如果需要 索引 indexv-for = "(item,index) in data "{{ item }} — {{ index }}对象:v-for = “(index,item,key) in obj”** 例子 **<!DOCTYPE html><htm...原创 2019-04-17 22:03:31 · 66 阅读 · 0 评论 -
vue- 模板语法
1. 模板语法 1. alert console.log 不能用 2. if条件改成使用三元表达式 3. 方法一定要写在methods里面, 不要直接写在模板语法中 4. 模板语法中支持使用匿名函数可以直接写<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><...原创 2019-04-17 22:02:45 · 168 阅读 · 0 评论 -
异步组件
异步组件异步组件也是一个函数, 只不过这个函数使用Promise,函数有一个返回值<body> <div id="app"> <async-com></async-com> </div></body><script>var result = new Promise...原创 2019-04-27 09:40:16 · 175 阅读 · 0 评论 -
webpack
webpack前端的工程化工具grunt资源打包单元测试gulp流式操作工具资源打包browserify(webpack前身)webpack 【 主流 】资源打包工具, 比如 js文件打包压缩 , img 打包压缩 。。。可以自动解决模块化依赖问题es6模块化前端的环境开发环境 localhost:3000生产环境测试环境预发布环境...原创 2019-04-27 09:41:07 · 75 阅读 · 0 评论 -
vue-深入响应式原理
深入响应式原理:当视图模型(VM)中的数据模型(M)发生改变时, 视图(V)就会进行更新Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生改变的时候, 就会触发, 然后watcher就会触发, 告诉视图(V)进行重新渲染数据必须放在data选项中才能进行深入响应式底层原理:核心使用的是es5...原创 2019-04-20 11:20:51 · 296 阅读 · 0 评论 -
vue--Todolist(小项目)
todolistui库sui使用:引入第三方库: cdn业务:开关的切换点击编辑, 出现一个弹框, 当我们键盘回车的是将, 将input框中的内容展示在页面上当任务已完成时, 点击 删除 按钮 直接删除 , 当任务未完成时, 应该先出用户友好提示, 如果点击了确定, 在删除, 如果不点确定, 不能删除底部按钮拥有不同的类名底部按钮点谁 , 谁激活 — 》 加一个button...原创 2019-04-18 22:21:46 · 309 阅读 · 0 评论 -
vue--计算属性
计算属性为什么要有计算属性?直接模板语法中直接写逻辑 // 1.html结构不纯粹 2. 写起来不舒服方法运行 // 但是语义性不高计算属性是什么?计算属性是new Vue(options) options中的一个配置项, 用computed表示, 它的值是一个对象计算属性的值中存放的是方法computed vs methods同: 都是函数, 都可以书写逻辑...原创 2019-04-18 22:20:48 · 89 阅读 · 0 评论 -
vue--绑定样式
style为什么要绑定样式呢?A: 样式有几种使用形式style双标签嵌入样式(内联)行内样式外部引用@import(’./csss/…’)数据 --控制–样式—》 功能 效果样式 要和 数据 绑定–》 v-bind样式的绑定形式A: 对象<div :style = "{width:'50px'}"></div><div :st...原创 2019-04-18 22:20:13 · 81 阅读 · 0 评论 -
vue--绑定类名
class为什么要绑定类名?数据–驱动–》视图 数据–控制–》类名 -->样式类名 要和 数据 绑定 —使用 —》 v-bind类名的绑定方式A: 对象的形式<div :class = "{'size': classFlag,'bg': classFlag}"></div>注意: 对象中的key用字符表示B: 数组的形式<...原创 2019-04-18 22:19:40 · 814 阅读 · 0 评论 -
封装自定义插件库
封装自定义插件库定义一个组件就是一个单文件组件 Loading.vue注册组件import Loading from './components/Loading.vue'export const loading = {install () {Vue.component( 'Loading', Loading)}}使用组件import Loading from...原创 2019-04-27 09:45:39 · 282 阅读 · 0 评论 -
cli
clicli 别名: 脚手架npm < cnpm < yarn1. 作用:- 快速构建vue项目, 底层配置使用的就是webpack2. 版本cli2 cli33. 安装npm install @vue/cli -g cli3的版本npm install vue-cli -g cli2的版本yarn add @vue/cli global /报错:有的电...原创 2019-04-27 09:43:06 · 270 阅读 · 0 评论 -
webpack2
一、webpack 基础认识官网地址 官网: https://webpack.js.org/ 中文: https://www.webpackjs.com/ 前身: browserify &n...原创 2019-04-27 09:42:24 · 164 阅读 · 0 评论 -
服务端渲染
什么是服务端渲染概念:后端先调用数据库,获得数据之后,将数据和页面元素进行拼装,组合成完成的html页面,再直接返回给浏览器,以便用户浏览举例: 服务端渲染案例页面 什么是客户端渲染概念:数据由浏览器通过ajax动态取得,在通过js将数据填充到dom元素上最终展示到网页中,这样的过程叫做客户端渲染举例:客户端渲染案例页面服务端渲染 vs 客户端渲染服务器端渲染需要消耗更多的...原创 2019-05-15 08:44:09 · 272 阅读 · 0 评论