文章分类 - vue教程
摘要：module 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。 st
阅读全文
摘要：Action 先引用官方文档的说法 Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 实现上是没问题，action 调用 mutation，但关于异步要放到 action 的说法，个人观点是没有这
阅读全文
摘要：Vuex——Mutation 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件，每个 mutation 的方法都会有一个 state 的参数在 commit 的时候当回调形参传过来，该形参就是 store.state Mut
阅读全文
摘要：getter getters 可以理解为 vuex 中的 computed，和 vue 中的 computed 类似，都是用来计算 state 然后生成新的数据 ( 状态 ) 的。 在上面的案例当中，如果想得到的 state 最终为一个带了币种的金额，只要给一个统一的出口，返回统一的数据模式。 简单
阅读全文
摘要：Vuex——state访问 方法一、直接获取 方法二、通过 computed 的计算属性直接赋值 方法三、通过 mapState 的计算属性直接赋值 方法四、通过 mapState 的数组来赋值 方法五、对象展开运算符
阅读全文
摘要：Vuex 在介绍 Vuex 之前，我先抛出一个问题，如下图(点击图片可查看大图) 请原谅并忽略手绘图的粗糙，主要描述的结构是： 组件A 组件B + 组件B1 事件：Event1 事件：Event2 事件：Event3 + 组件B2 事件：Event1 事件：Event2 事件：Event3 组件C
阅读全文
摘要：路由 通过 URL 映射到对应的功能实现，Vue 的路由使用要先引入 vue router.js 基本路由入门 定义 component 定义路由规则 使用 html Hello VueRouter <! 使用 router link 组件来导航. <! 通过传入 属性指定链接. <! <route
阅读全文
摘要：过渡效果 SPA 中组件的切换有一种生硬的隐藏显示感觉，为了更好的用户体验，让组件切换时淡出淡入，Vue 提供了专门的组件 transition。 过滤效果应用场景 条件渲染 (使用 v if) 条件展示 (使用 v show) 动态组件 组件根节点 过渡状态 enter：定义进入过渡的开始状态。在
阅读全文
摘要：自定义指令 在某些情况下，Vue 提供给我们的指令是非常不够的，比如有一个输入框需要在点击的时候能弹出日期控件，这个功能 Vue 并不支持，但 Vue 支持我们自定义指令。 自定义指令和定义组件的方式很类式，也是有全局指令和局部指令之分 全局指令 局部指令 "效果预览" 钩子函数 钩子函数可以理解成
阅读全文
摘要：组件 组件（Component）是前端在单页面应用（SPA）上最好的一种实现方式，把所有功能模块拆解成单独的组件，每个组件都有独立的作用域，且还可以相互通信 认识单页面应用（SPA） 在传统的页面之间跳转，是通过刷新，重新渲染一个页面而实现，在渲染的过程中势必要加载外部资源文件，页面在服务器中渲染出
阅读全文
摘要：组件通信 本教程只讲 Vue 本身的组件通信，不涉及借用第三方如 Vuex 之类的插件。组件通信主要分为三个部分： 父组件向子组件通信：父组件向子组件传参或者是父组件调用子组件的方法 子组件向父组件通信：子组件向父组件传参或者是子组件调用父组件的方法 兄弟组件通信：兄弟组件之间相互传参或调用 建议不
阅读全文
摘要：事件修饰符 对事件添加一些通用的限制，比如阻止事件冒泡，Vue 对这种事件的限制提供了特定的写法，称之为修饰符 用法：v on:事件.修饰符 "事件修饰符效果预览" 按键修饰符 "按键修饰符效果预览" 表单修饰符 "表单修饰符效果预览"
阅读全文
摘要：实例元素 el 实例元素指的是 Vue 实例化时编译的容器元素，或者说是 Vue 作用的元素容器 也可以为实例元素指定其它选择器 可以有多个实例元素 如果有多个相同的实例元素则只有第一个起效 也可以在实例化的时候不指定实例元素，后面用 $mount() 手动进行挂载 可以通过实例获取实例元素 数据对
阅读全文
摘要：绑定 class 对象语法 v bind:class="{样式名: 结果为 boolean 的表达式}"，表达式结果为 true，则元素 class="样式名"，否则元素 class="" 渲染结果 也可以写成 渲染结果 还可以通过计算属性的方式 渲染结果 数组语法 v bind:class="[]
阅读全文
摘要：模版语法 模版语法已成为前端在数据驱动模式上 V 层最好的实现。 插值 "插值效果预览" 缩写 v bind 缩写 v on 缩写 指令 指令（Directive），换句话说就是元素的自定义属性，在 Vue 中是以 v 为前缀的自定义属性，属性值为对象或 js 表达式 指令类型用法 v textst
阅读全文
摘要：认识 Vue 关于 Vue 的描述有不少，不外乎都会拿来与 Angular 和 React 对比，同样头顶 MVVM 双向数据驱动设计模式光环的 Angular 自然被对比的最多，但到目前为止，Angular 在热度上已明显不及 Vue，性能已成为最大的诟病。 在我看来，Vue 和 Angular
阅读全文
浙公网安备 33010602011771号