Vue.js
vue
草莓味的狮子座leo
这个作者很懒,什么都没留下…
展开
-
vue生命周期详解
知乎beforeCreatecreatedbeforeMount此时的$el为虚拟的dom节点mounted创建真实的dom元素beforeUpdateupdatedupdate是指mounted的数据修改updated对所有数据的变化统一处理watch对具体某个数据变化做统一处理nextTick对某个数据的某次变化进行处理beforeDestroy实例依旧有效destroyedbeforeDestroy和destroyed只能通过手动触原创 2020-12-23 16:19:25 · 99 阅读 · 0 评论 -
Vue生命周期相关的实例方法
Vue实例方法/生命周期vm.$forceUpdate(1)作用强迫Vue.js实例重新渲染,仅仅影响实例本身以及插槽内容的子组件,而不是所有的子组件`(2)实现步骤Vue.prototype.$forceUpdate = function(){ const vm = this; if(vm._watcher){ vm._watcher.update(); }}执行watcher.update()方法,重新渲染实例Vue每个实例都有一个watcher,当组件内依赖的数据原创 2020-12-23 15:16:02 · 175 阅读 · 0 评论 -
v-on 、v-bind 、v-model
v-on绑定html事件v-on:click 缩写为 @click<!-- 完整语法 --><a v-on:click="doSomething(tmp)">123</a><!-- 缩写 --><a @click="doSomething(tmp)">123</a>new Vue({ ... methods:{ doSomething(tmp){ }}})v-bind设置html属性v-bind:hr原创 2020-12-23 14:27:46 · 310 阅读 · 0 评论 -
Vue事件处理机制v-on
一、vue绑定事件vue事件绑定v-on原生的dom事件组件自定义事件#绑定原生dom事件<div id="app"> <button v-on:click="handle">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p></div>#绑定自定义事件,通过组件内部 $emit('myEvent')触发&原创 2020-12-23 14:17:25 · 350 阅读 · 0 评论 -
Vue事件相关的实例方法
Vue.js提供了四个事件API,分别为$on,$once,$off,$emit初始化事件// 在vue实例上创建一个_events对象,存放事件{ eventName: [func1, func2, func3]}存放事件名以及对应执行方法。/*初始化事件*/export function initEvents (vm: Component) { /*在vm上创建一个_events对象,用来存放事件。*/ vm._events = Object.create(null)原创 2020-12-23 13:57:17 · 146 阅读 · 0 评论 -
Vnode节点
VNode类源码export default class VNode { tag: string | void; data: VNodeData | void; children: ?Array<VNode>; text: string | void; elm: Node | void; ns: string | void; context: Component | void; // rendered in this component's scope func原创 2020-12-23 11:13:07 · 178 阅读 · 1 评论 -
Vue虚拟dom-patch算法
虚拟dom最核心的就是patch算法,将vnode渲染成真实的dom,对比新旧vnode之间的差异;patch的目的是修改dom节点,更新视图对现有的dom进行修改需要做三件事:创建新增的dom删除已废弃的节点一个节点只在oldVnode存在,则需要从dom中删除修改需要更新的节点...原创 2020-12-23 11:03:38 · 157 阅读 · 0 评论 -
Vnode创建与处理
Vue中的Vnode创建与处理原创 2020-12-23 10:57:46 · 119 阅读 · 0 评论 -
Vue-Vnode类型
Vnode的类型1.注释节点 export const createEmptyVNode = text => { const node = new VNode() node.text = text; node.isComment = true; return node }// 一个注释节点只有两个有效属性` text `和 `isComment`2.文本节点 export function createT原创 2020-12-23 10:54:52 · 1232 阅读 · 0 评论 -
Vue虚拟dom源码解析
Vue源码解析:虚拟dom比较原理patch()函数 function patch(oldVnode,vnode){ var elm,parent if(sameVnode(oldVnode,vnode)){ // 新旧节点相同 就去打补丁(增删改) patchVnode(oldVnode,vnode) }else{ // 新旧节点不相同 则整个覆盖 elm = oldVnode.elm parent = api.parentNode(elm)原创 2020-12-23 10:19:10 · 239 阅读 · 0 评论 -
Vue虚拟dom的优化
虚拟节点vnode包含以下属性{ tag:'div' //标签名 data:{...} // 属性数据 attrs、props、event、style、class children:[...] // 子节点数据,vnode结构 text: undefined // 文本 elm: undefined // 真实dom key: undefined // 节点标识 }Vue的优化策略尝试几种可能的变化,快速查找差异,减少不必要的循环…前:子节点列表中所有未处理的..原创 2020-12-22 10:27:29 · 583 阅读 · 0 评论 -
Vue虚拟DOM
1.什么是虚拟dom模板转换成视图的过程1.Vue.js将tetmplate模板编译为渲染函数Render,执行渲染函数生成一棵虚拟dom树2.在对Model操作时,触发对应Dep中的Watcher对象,Watcher对象会调用对应的update更新视图渲染函数:用来生成虚拟树vnode虚拟节点:代表一个真实的dom节点,通过createElement方法将vnode渲染成dom节点patch虚拟dom最核心部分,可以将vnode渲染成真实的dom,整个过程就是对比新旧虚拟节点的不同,原创 2020-12-22 09:56:26 · 261 阅读 · 0 评论 -
Vue计算属性和侦听属性
计算属性computed计算属性自动监听依赖值的变化,动态返回内容;在监听的值发生变化时,触发回调函数1.数据可以逻辑处理2.对计算属性中的数据进行监视3.依赖固定数据类型(响应式数据)计算属性由两部分组成get和set,分别用来获取和设置计算属性;默认只有get,set设置计算属性,修改属性依赖并不直接修改计算属性computed:{ fullName:{ //getter get:function(){...return } //setter set:functio.原创 2020-12-20 12:36:43 · 256 阅读 · 2 评论 -
Vuex_demo
1.在src目录中新建store文件,store文件夹中新建index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)// new Vuex.Store 创建对象export default new Vuex.Store({ state:{ ...共享的数据 count:0 }, // 对state中的数据进行处理,不会修改 getters:{ ...方法 showNum(count){ ..原创 2020-12-18 22:21:09 · 389 阅读 · 1 评论 -
深入学习Vuex
一、 引言组件间的通信$emit和$on通过一个空的Vue实例作为事件中心,用它来触发事件或监听事件,实现任何组件之间的通信,包括父子、兄弟、跨级;项目较大时考虑vuex具体实现方式 // 定义一个事件中心 var eventHub = new Vue() Vue.component('tagName',{ data:'...' template:'...' methods:{原创 2020-12-18 21:52:59 · 139 阅读 · 2 评论 -
Vue深入响应式原理
Vue响应式:数据发生变化,会重新渲染页面完成这个过程,我们需要:侦查数据的变化 数据劫持 / 数据代理收集视图依赖的数据 依赖收集数据变化时,自动通知需要更新的视图部分进行更新 发布-订阅模式一、如何侦查数据的变化 - 数据劫持使用Object.defineProperty和Proxy数据模型是普通的js对象,把一个普通的js对象传入Vue实例当作data选项,Vue会遍历此对象的property,并使用Object.defineProperty把property全部转为ge原创 2020-12-18 19:44:02 · 561 阅读 · 1 评论 -
Vue插件
插件通常用来为Vue添加全局功能添加全局方法或者 property。如:vue-custom-element添加全局资源:指令/过滤器/过渡等。如vue-touch通过全局混入来添加一些组件选项。如 vue-router添加 Vue 实例方法,通过把它们添加到 Vue.prototype上实现。一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router使用插件通过全局方法Vue.use()使用插件Vue.use(plugins)new Vue({...组件原创 2020-12-18 15:01:00 · 65 阅读 · 0 评论 -
Vue.filter过滤器
Vue.filter( id, [definition] )参数id:string[definition]:functiotn注册或获取全局过滤器// 注册Vue.filter('my-filter',function(value){ //返回处理后的值}// getter 返回已注册的过滤器var filter = Vue.filter('my-filter')过滤器可以用在双花括号和v-bind表达式 // 双花括号 {{message | capita原创 2020-12-18 10:24:38 · 109 阅读 · 0 评论 -
Vue.js全局API
Vue.extend( options )注册组件,创建一个扩展子例构造器var cpn1 = Vue.extend({ template:'...', data:function(){return ...} methods:{...}})Vue.componenet('my-cpn1',cpn1 )参考:组件Vue.nextTick( [callback, context] )在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后..原创 2020-12-18 10:09:44 · 98 阅读 · 0 评论 -
Vue组件间的通信
1.props父子组件<div id=app> <父组件把message值传递给子组件> <my-cpn1 :content="message"></my-cpn1></div><script> var cpn1 = { // 使用props接收父组件传递过来的数据 props:['content'] template:'<div>{{ content }}</div>', }原创 2020-12-17 17:26:16 · 54 阅读 · 0 评论 -
Vue组件注册
一、全局组件注册1.Vue.component直接注册Vue.component(tagName, option)tagName命名规则:1)短横线 如:button-counter2)首字母大写 如:ButtonCounteroption:template、methods、data data必须为函数为什么data为函数?(官方文档)当一个组件被定义时,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实列。如果data仍然是一个纯粹的对象,则所有的实列将共享引原创 2020-12-17 16:27:15 · 186 阅读 · 0 评论 -
Vue组件化基础
Vue就是一个个组件构成的组件分类1.页面级别的组件通常是pages目录下的.vue组件,一般没有对外接口 pages ├─ About.vue └─ Home.vue2.业务可复用的基础组件通常在业务中被各个页面复用的组件,components目录下,然后各页面通过import调用,实现某个业务功能,会涉及到props和slot,自定义事件 components └─ userLogin.vue3.与业务无关的独立组件基础组件,在各个页面或业务组件被使用,比较流原创 2020-12-17 16:09:34 · 95 阅读 · 0 评论 -
列表渲染和事件监听v-on
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div i原创 2020-12-17 14:06:55 · 95 阅读 · 0 评论 -
Vue.js2.0基础-vue指令
v-text='' 设置文本 v-html 设置元素的innerHTML v-on 为元素绑定事件 v-on:事件名='方法' 等于 @事件名 v-show 根据表达式的真假 切换元素的隐藏与显示 v-show='表达式' v-if 操作dom元素 v-bind 绑定title class 可省略,直接:方法='' v-for (item,index) in 根据数据生成列表结构 v-model 双向数据绑定 获取和设置表单元...原创 2020-12-17 11:47:14 · 111 阅读 · 0 评论 -
Proxy 与 Object.defineProperty
Proxy对象 与 Object.defineProperty()常用来做数据劫持数据劫持 在访问或修改对象的某个属性时,通过代码拦截这一行为,并进行额外的数据处理然后返回此结果一、Object.defineProperty监听属性缺点:不能监听数组的变化Vue将原来数组方法定义为变异方法,(push、pop、shift、unshift、splice、sort、reverce)非变异方法:fliter、concat、slice,返回一个新数组,不会修改原始数组必须遍历对象的每个属性原创 2020-12-15 20:55:11 · 175 阅读 · 1 评论 -
Vue2.x和Vue3.x
MVVMModel(数据模型)——ViewModel——View(UI组件)数据绑定到ViewModel并自动渲染至页面View,视图变化时通知viewModel层更新Model数据一、Vue2.x双向绑定原理Vue双向绑定:数据变化更新视图,视图变化更新数据视图变化更新数据:事件监听数据变化更新视图:1.一个普通的js对象传入vue实例作为data属性,vue遍历此对象所有的property,并使用Object.defineProperty 把这些 property 全部转为.原创 2020-12-15 16:29:31 · 98 阅读 · 0 评论 -
vue-router有两种模式:hash和history
hash模式url中带有#符号,如http://www.abc.com/#/hello,hash值为hello特点:hash不会包括在http请求中,改变hash不会重新加载页面hash模式依靠onhashchange()事件去监听location.hash的改变history模式利用了 HTML5 History Interface 中新增的 pushState()和replaceState() 方法pushState()改变url地址且不会发送请求replaceState原创 2020-11-27 21:45:05 · 132 阅读 · 0 评论 -
Vue路由实例
1.App.vue<template> <div id="app"> <div> <!-- router-link导航,通过to属性指定链接,默认渲染一个a标签 --> <router-link to="/page1">Page1</router-link> <router-link to="/page2">Page2</router-link> // 路由占原创 2020-11-27 17:52:44 · 338 阅读 · 0 评论 -
Vue中的nextTick
<div id="app"> <div ref='msgDiv'>{{msg}}</div> <div v-if='msg1'>Message get outside $nextTick: {{msg1}}</div> <div v-if='msg2'>Message get outside $nextTick: {{msg2}}</div> <div v原创 2020-11-26 21:53:00 · 78 阅读 · 0 评论 -
Vue单文件组件
单文件组件的基本结构1)template:组件的模板区域2)script:业务逻辑区域3)style:样式区域webpack中配置vue组件的加载器1、运行 npm i vue-loader vue-template-compiler -D 命令2、在 webpack.config.js 配置中,添加 vue-loader 配置项如下const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = { mo原创 2020-09-30 22:25:41 · 96 阅读 · 0 评论 -
Vue-循环引用
一、递归组件组件在自身的模板中调用自身的,通过name选项例如:name:‘unique-name-of-my-component’使用Vue.component注册全局组件时,全局的id会自动设置为该组件的name选项Vue.component('unique-name-of-my-component', { // ...})二、组件之间的循环引用组件在渲染树中护卫对方的后代/祖先——一个悖论;先把两个组件设为A和B,模块系统发现需要A,但是A依赖于B,B又依赖于A,如此往原创 2020-11-25 16:36:45 · 863 阅读 · 0 评论 -
Prop
Prop的大小写Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>'})<!-- 在 HTML 中是 kebab-case 的 --><blog-post post-title="hello!"></blog-post>// 使用字符.原创 2020-11-25 15:15:58 · 102 阅读 · 0 评论 -
Element-UI
Element-UI:基于Vue 2.0的桌面端组件库原创 2020-11-25 09:14:49 · 67 阅读 · 0 评论 -
vue脚手架vue-cli
vue 脚手架 用于快速生成vue项目基础架构1)安装npm install -g @vue/cli2)创建vue项目原创 2020-11-24 16:09:53 · 64 阅读 · 0 评论 -
vue单文件组件
webpack 打包发布1)修改package.json文件中的script"build": "webpack -p",2)运行命令npm run build原创 2020-11-24 15:33:15 · 92 阅读 · 0 评论 -
vue模块化
一、 CommonJSCommonJS适用于服务器端的javascript模块化1)模块分为单文件模块和包2)模块成员导出:module.exports和exports3)模块导入require(模块标识符)二、 ES6模块化规范1)每个js文件都是一个独立的模块2)导入模块成员:import3)暴露模块成员:exportnode.js通过babel体验ES6模块化默认导出:export default 唯一默认导入:import from...原创 2020-11-24 09:53:50 · 304 阅读 · 0 评论 -
vue-router基础
1、路由的基本概念与原理1.1后端路由概念:根据不同的url请求,响应返回不同的内容本质:用户url请求和服务器资源1.2 SPA1.3前端路由概念:根据不同的用户事件,显示不同的页面内容本质:用户事件和事件处理函数之间的对应关系2、vue-router的基本使用2.1基本使用步骤1.引入相关的库文件<!-- 导入 vue 文件 为全局window对象挂载vue构造函数--> <script src="./lib/vue_2.5.22.原创 2020-11-23 19:35:48 · 130 阅读 · 0 评论 -
接口调用fetch
接口调用FetchGET请求app.get('/books', (req, res) => { res.send('传统的url传递参数' + req.query.id)})app.get('/books/:id', (req, res) => { res.send('Restful的url传递参数' + req.params.id)})POST请求 fetch('http://localhost:3000/books', {原创 2020-11-23 11:06:17 · 181 阅读 · 0 评论 -
axios
接口调用axiosaxios是一个基于Promise用于浏览器和node.js的http客户端axios基本用法<script type="text/javascript" src="js/axios.js"></script>axios.get('http://localhost:3000/adata') .then(function(ret) { console.log(ret) // data属性是固定的用法,获取后台响应的实际数据 // conso原创 2020-11-23 11:04:15 · 289 阅读 · 0 评论 -
vue前端交互
一、前后端交互模式1.1接口调用方式原生ajax基于jQuery的ajaxfetchaxios1.2 URL地址格式http://host:port/path?uname=lisi&age=12#fragmenthttp、https:协议host:域名或ip地址port:端口path:路径fragment:锚点(hash),定位页面的某个位置1.3 Restful形式的urlhttp请求方式:delete、get、post、put1)GET:http://www.he原创 2020-11-23 11:03:47 · 124 阅读 · 0 评论