随笔分类 - Vue.js
摘要：v-on后面接一个对象，但是不支持事件修饰符。 <template> <div v-on:{click:a,dblclick:b}></div> </template> <script> methods:{ a(){ alert(1) }, b(){ alert(2) } } </script>
阅读全文
摘要：.lazy 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步： <!-- 在“change”时而非“input”时更新 --> <input v-mode
阅读全文
摘要：@click="handleOpen" 默认第一个参数传入event对象; @click="handleOpen(0, $event)",如果自己需要传入参数和event对象，则需要使用$event来获取event对象并传入handleOpen。
阅读全文
摘要：动态组件 <component :is="componentName"></component>， componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。 is的用法 有些HTML元素，诸
阅读全文
摘要：Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： <!-- 在双花括号中 --> {{ message | c
阅读全文
摘要：vue实现数据双向绑定有这么一个过程：当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty() 把这些属性全部转为getter/setter。每个组件实例都有相应的 watcher 实例对象
阅读全文
摘要：需求 因为某些原因，某个页面的加载需要很长时间。为了不让用户重新加载，再次等待很长时间，决定当从这个页面跳转其他页面时，打开一个新窗口。 编程时导航 使用路由对象的resolve方法解析路由，可以得到location、router、href等目标路由的信息。得到href就可以使用window.ope
阅读全文
摘要：scrollBehavior (to, from, savedPosition) { if (savedPosition) { //保持原先的滚动位置 return savedPosition } else { //滚动到顶部 return { x: 0, y: 0 } } } 使用前端路由，当切换
阅读全文
摘要：什么是单页面应用(SPA)? 首先我们需要了解一下前置的基础知识——SPA(单页面应用)。互联网是一步一步发展到今天的，用一个普通用户能够觉察到的衡量因素——上网速度，来观察互联网的发展。由一开始的拨号上网，到宽带上网，再到如今的百兆光纤等等。信息的高速公路逐渐发展应用于全球的各个方面。而对于web
阅读全文
摘要：路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个
阅读全文
摘要：store的结构： city模块： 在各模块使用了命名空间的情况下，即 namespaced: true 时： 组件中访问模块里的state 传统方法： this.$store.state['模块名']['属性名'] 例如：this.$store.state.city.list。 控制台输出 thi
阅读全文
摘要：当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会导致出错。 <input v-model="obj.message"> 假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象，在用户输入时，v-model 会试图直接修改 obj.
阅读全文
摘要：一、state 1.1 引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.St
阅读全文
摘要：有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数： computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } 如果有
阅读全文
摘要：mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符 (opens new window)，我们可以极大地简化写法： computed: { l
阅读全文
摘要：如图所示，上面这个列表我们使用下标 (index) 作为 key 值，其对应关系如图。此时页面显示是没有问题的, 控制台也不会报错. 但是——假设此时我们删除 List 中的第 2 项内容 (虚拟 DOM 很简单). 我们来看看会有什么效果? 当我们删除了原来 list 中的下标为 1 的数据 (虚
阅读全文
摘要：Vue 的双向数据绑定，使得修改数据后，视图就会跟着发生更新，比如对数组进行增加元素、切割等操作。然而直接通过下标修改数组内容后，视图却不发生变化。那么，在保留原有的数组响应方式下，为什么 Vue 不增加对数组下标的响应式监听呢？ arr[index] = val 不是响应式的 在 Vue 官网的
阅读全文
摘要：一、为什么要使用路由懒加载 为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。 二、定义 懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。 三、使用 常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import（及require.ensure） 1、未用懒
阅读全文
摘要：这篇文章试着聊明白这一堆看起来挺复杂的东西。在聊之前，大家要始终记得一句话：一切前端概念，都是纸老虎。 不管是Vue，还是 React，都需要管理状态（state），比如组件之间都有共享状态的需要。什么是共享状态？比如一个组件需要使用另一个组件的状态，或者一个组件需要改变另一个组件的状态，都是共享状
阅读全文
摘要：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。 1. 当同一组件内部，有多处ref引用值相同的情况时，this.$refs[ref名称]指向文档流中靠下的
阅读全文
浙公网安备 33010602011771号