qq_44704740的博客

原味ajax复习// get请求var xhr = new XMLHttpRequest;xhr.open("get", "08.php?name=hucc");xhr.send(null); // get 请求没有请求体所有未null// post 请求var xhr = new XMLHttpRequest;xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");xhr.send("name=hu

相同点使用 Virtual DOM提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。不同点运行时性能在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得

router/index.jsimport Vue from 'vue'import Router from 'vue-router'import store from '@/store'import routes from '../router.config.js'Vue.use(Router)const createRoute = (routes) => {// 数组的reduce方法，累加得出路由信息 return routes.reduce((processedRout

data、methods、computed、watch、生命周期钩子原写法<template> <div class="helloworld"> <h1>{{ msg }}</h1> <h2 v-text="msg"></h2> <h3>{{length}}</h3> ...

封装的抽屉组件需要一个滑入滑出效果，因此在封装的时候使用的css3的transform: translate()，通过插槽的显示插入div，但此时div内的h3和p标签的字体偶尔会出现模糊效果。出现原因：h3和p的margin-bottom默认为奇数解决办法：保证装字体的容器（盒子）宽高为正整数并为偶数<Drawer isArrow :isVisible="isVisibl...

在使用ant-design-vue的tree组件的时候，需要拖拽树的子节点到地图组件上，但是一旦超出tree的盒子范围鼠标样式会不对，是一个圆圈加/的鼠标样式，这个鼠标样式给用户传达的信息是不可拖拽，因此要改变鼠标样式解决办法：在装地图组件的父盒子上使用注册一个@dragover="dragover"事件，并且阻止默认行为。相关知识点：在drag&drop API中提供了...

项目打包的说明项目是写完了, 项目需要打包才能上线~打包命令: yarn build打包完目录文件的说明带 chunk-vendors 的都是 第三方的依赖包我们写的内容在 app.css / app.js打完包的代码, 可以直接于服务器环境 根目录 运行~ 不需要额外配置​ 插件: live-server 全局安装: npm i live-ser...

vuex基本使用步骤基本使用安装yarn add vuex引包 <!-- 引包 --> <script src="./node_modules/vue/dist/vue.js"></script> <script src="./node_modules/vuex/dist/vuex.js"></script>...

1、v-if 和 v-show 区分使用场景v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show  就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。所以，...

服务端渲染：DOM树在服务端生成，然后返回给前端。例：用nodeJS开发的程序就利用了服务端渲染客户端渲染（SSR）：前端去后端取数据生成DOM树。例：用vue或者react等框架开发的单页面应用程序就利用了客户端渲染服务端渲染的优点：1、尽量不占用前端的资源，前端这块耗时少，速度快。2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。服务端渲染的缺点：1、不...

目录别名的配置导入组件路径麻烦, 可以配置别名原文配置路径别名，方便引用，不用写那么长配置前:import Test from '../components/Test.vue'配置后(不用再关心文件层级关系):import Test from 'components/Test.vue'import Test from '@/components/Test.vue'配置 vu...

响应式数据的说明响应式数据: 把data中的数据挂到vm身上，vm身上的这个数据其实就是响应式的一旦数据发生了改变，页面中的内容也会跟着改变动态添加的数据是无效的以及$set的使用data中的数据一定要先声明，再使用，动态给对象添加的属性不是响应式的<div id="app"> <p>{{person.name}}---{{person.age}}...

数据劫持: 利用 Object.defineProperty 可以修饰对象的属性, 进行对象属性的 获取 和 设置的劫持<input type="text"><h4></h4>// 1. 视图改变，数据跟着改变// 2. 数据改变，视图跟着改变let h4 = document.querySelector('h4')let input = do...

模块化与组件化如果没有模块化 ? 之前所有的 js 代码, 都写到了一个文件中, 不好维护模块化: 一个js文件, 都可以当成一个模块, 需要的时候, 就可以导入模块化, 是对于 js 功能的 封装 或者 拆分, 可以大大提升代码的可维护性, 和功能的复用性模块化, 只是对于 js 层面的拆分和封装组件化: 可以将页面拆分成一个一个独立的组件, 每个组件有着自己的 html结构 css...

经典布局：header、aside、main。左侧固定，右侧自适应，这里我用的是flex布局主要是考察css和vue路由html,body { height: 100%;}* { margin: 0; padding: 0;}#app { height: 100%; overflow: hidden;}.header { height: 100px; back...

很久很久以前，跟着做vue官网做demo的时候，尽管安装了devtools，但是它不亮，也就是说用不了。提示说：Vue.js not detected查了一下：解决办法如下：进入到 manifest.json 这个文件，修改 persistent变量的值为true;文件路径如下。然后重新打开页面就好了。目录：C:\Users\Administrator\AppData\Local\Goog...

vuex基本概念vuex是vue的状态管理工具，状态即数据。 状态管理就是集中管理vue中通用的一些数据注意：不是所有的场景都适用于vuex，只有在必要的时候才使用vuex使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度Vuex就像近视眼镜, 你自然会知道什么时候需要用它~vuex的优点vuex用于解决组件通讯的问题vuex可以集中的管理vue项目中用到的所有数...

axiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。vue1.x的时候vue提供了一个包，vue-resource 专门用于发送ajax请求，但是vue2.x的时候，vue的作者的自己发了一个文章，推荐大家都使用axios库来发送ajax请求。vue自身没有提供发送ajax请求的工具Axios 是一个基于 promise 的 HTT...

路由介绍路由 : 是浏览器 URL 中的哈希值( # hash) 与 展示视图内容 之间的对应规则简单来说,路由就是一套映射规则(一对一的对应规则), 由开发人员制定规则.-当 URL 中的哈希值( # hash) 发生改变后,路由会根据制定好的规则, 展示对应的视图内容(组件)为什么要学习路由?渐进式 =>vue => vuer-router (管理组件之间的跳转...

vue动画Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。专门用于处理 转场动画, 实现进入 和 离开的动画效果的基本使用Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)...

自定义指令有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。比如：获取文本框的焦点自定义指令- 自定义一个指令- 使用一个自定义指令定义一个全局的指令// 注册一个全局自定义指令 `v-focus`// 参数1：指令的名称// 参数2：指令的配置项（钩子函数）Vue.directive('focus', { // 当被绑定的元素插入到 ...

过滤器 filter作用：文本数据格式化两种过滤器：1 全局过滤器 2 局部过滤器全局过滤器说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用Vue.filter('filterName', function(value) { // value 表示要过滤的内容})示例：<div>{{ dateStr | date }}</div&...

使用场景不同：watch 监听某个数据的变化（监听完调用什么函数） 一个数据影响多个数据 （比如：浏览器自适应、监控路由对象、监控自身属性变化）computed 计算后返回新 一个数据受多个数据影响（比如：计算总价格、过滤某些数据）计算属性computed :支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化com...

计算属性: 就是对于一个属性计算过程的封装如果模板中出现了大量的逻辑代码, 请将其封装到 计算属性中计算属性不能与data中的属性同名，因为无论是data中的属性还是计算属性，最终都是挂载到vm上的计算属性, 写法上是一个函数, 但是实质是一个属性计算属性, 本质上是将属性计算的过程, 进行了封装, 真正属性的值, 就是函数执行的结果计算属性优点:可维护性高, 将属性的计算逻辑封...

如果想要监视data中数据的变化 请使用watch 进行监视默认 watch 只用于监视简单类型的数据的变化, watch不能直接监视对象的属性变化注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this ...

vue处理class和styley样式使用方式：v-bind:class="expression" or :style="expression"表达式的类型：字符串、数组、对象（重点）语法：class<!-- 1 --><div v-bind:class="{ active: true }"></div> ===><div clas...

数据劫持: 利用 Object.defineProperty 可以修饰对象的属性, 进行对象属性的 获取 和 设置的劫持<input type="text"><h4></h4>// 1. 视图改变，数据跟着改变// 2. 数据改变，视图跟着改变let h4 = document.querySelector('h4')let input = do...

同：v-show 和 v-if 都是控制盒子的显示隐藏的都接受布尔类型的值来控制视图异：原理v-show : v-show是控制盒子css的 display的切换 (none/block)v-if : v-if是动态的创建 或者 删除元素，操作DOM使用场景:如果是频繁的需要切换显示隐藏的情况, 用v-show如果是要么显示, 要么隐藏, 不用频繁切换的情况, 推荐使用 ...

slot插槽当组件中某一项需要单独定义，那么就应该使用soltVue 实现了一套内容分发的 API，将 <slot>元素作为承载分发内容的出口。单个slot（匿名插槽）除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃 ,当子组件模板只有一个没有属性的 slot 时，父组件整个内容片段将插入到 slot 所在的 DOM 位置，并替换掉 ...

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头v-textv-htmlv-showv-if/v-else/v-else-ifv-forv-bindv-modulev-showv-prev-cloakv-once作用：指令提供了一些特殊的功能，当指向绑定到标签上时，可以给标签增加一些特殊的行为v-text、v-html、v-cloak指令...

什么是Vue.jsVue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第...