随笔分类 - 无分类链接博文
摘要：Vue 数据双向绑定主要是指： 数据变化更新视图 视图变化更新数据。 即： 输入框内容变化时，Data 中的数据同步变化。即 View => Data 的变化。 Data 中的数据变化时，文本节点的内容同步变化。即 Data => View 的变化。 其中，View 变化更新 Data ，可以通过事
阅读全文
摘要：如果被问到 Vue 怎么实现数据双向绑定，大家肯定都会回答 通过 Object.defineProperty() 对数据进行劫持，但是 Object.defineProperty() 只能对属性进行数据劫持，不能对整个对象进行劫持。同理无法对数组进行劫持，但是我们在使用 Vue 框架中都知道，Vue
阅读全文
摘要：这个router有两种模式：hash模式（默认）、history模式（需配置mode: 'history'） 然后，我们来研究下两者的原理： 我们先来认识下这位朋友#，这个#就是hash符号，中文名哈希符或锚点，当然这在我们前端领域姑且这么称呼。 然后哈希符后面的值，我们称之为哈希值。OK，接下来我
阅读全文
摘要：实际上存在三种模式： Hash: 使用URL的hash值来作为路由。支持所有浏览器。 History: 以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式 Abstract： 支持所有javascript运行模式。如果发现没有浏览器的API，路由会自动强制
阅读全文
摘要：先说下基本概念： ssr 的全称是 server side render，服务端渲染，vue ssr 的意思就是在服务端进行 vue 的渲染，直接对前端返回带有数据，并且是渲染好的HTML页面； 而不是返回一个空的HTML页面，再由vue 通过异步请求来获取数据，再重新补充到页面中。 这么做的最主要
阅读全文
摘要：父子通信 （1）父组件向子组件传值props <button-counter :title="send"></button-counter> Vue.component('button-counter', { props: ['title'], data: function() { return {
阅读全文
摘要：我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件： text 和 textarea 元素使用 value
阅读全文
摘要：如果两个实例引用同一个对象，当其中一个实例的属性发生改变时，另一个实例属性也随之改变,对象没有自己的作用域，只有当两个实例拥有自己的作用域时，才不会相互干扰。 这是因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象 组件中的data写成一个函数，
阅读全文
摘要：在做电商有关的项目中，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，防止二次渲染，这样会大大的节省性能。 keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重
阅读全文
摘要：比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现： // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit(
阅读全文
摘要：https://www.cnblogs.com/thinheader/p/9462125.html 参考连接 Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分： 加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCrea
阅读全文
摘要：生命周期是什么？ Vue 实例有一个完整的生命周期，也就是从 开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 各个生命周期的作用 生命周期描述 beforeCreate 组件实例被创建之初，组件的属性生效之前 creat
阅读全文
摘要：由于 JavaScript 的限制，Vue 不能检测到以下数组的变动： 当你利用索引直接设置一个数组项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length = newLength 为了解决第一个问题，Vue 提供了
阅读全文
摘要：computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值； watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
阅读全文
摘要：数据从父级组件传递给子组件，只能单向绑定。 子组件内部不能直接修改从父级传递过来的数据。 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。 这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解
阅读全文
摘要：Class 可以通过对象语法和数组语法进行动态绑定： 对象语法： <div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> data: { isActive: true, hasError: false } 数组
阅读全文
摘要：SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。 一旦页> 面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转； 取而代之的是利用路由机制实现 > HTML 内容的变换，UI 与用户的交互，避
阅读全文
摘要：Vuex 是一个专为 Vue.js 应用程序开发的状态（全局数据）管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。 （1）Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态
阅读全文
摘要：v-if 是真正的条件渲染，会控制这个 DOM 节点的存在与否。因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 就简单得多——不管初始条件是什么，元素总是会被渲染
阅读全文
浙公网安备 33010602011771号