随笔分类 - Vue
vue学习笔记
摘要：[TOC] 1.安装 2.引入 1. 全局引入 main.js中 2. 按需引入 全局引入会将所有的echarts图表打包，导致体积过大，最好还是按需引入 3. 使用 1. 画一个饼图 html js 2. 画一个中国地图数据 html js 这里地图数据原始数据是自己引入的，官方文档提示，ECha
阅读全文
摘要：[TOC] "官方文档" 1. State vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。 1.1. 最简单的获取store实例中状态的方法 // 创建一个 Counter 组件，在computed中返回。 const Counter = { template: , com
阅读全文
摘要：[TOC] 1. 导航守卫 正如其名，vue router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 有多种机会植入路由导航过程中： 全局的 , 单个路由独享的 , 或者 组件级的 。 记住参数或查询的改变并不会触发进入/离开的导航守卫 1.1. 全局守卫 你可以使用 router.be
阅读全文
摘要：[TOC] "官方文档" 1. 基本例子 html Hello App! <! 使用 router link 组件来导航. <! 通过传入 属性指定链接. <! <router link 默认会被渲染成一个 标签 Go to Foo Go to Bar <! 路由出口 <! 路由匹配到的组件将渲染在
阅读全文
摘要：首先要明确： 1. Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。 2. $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM 实例 参考 "理解 $next
阅读全文
摘要：[TOC] 1. 全局注册 2. 局部注册 3. dom模板和字符串模板 当使用dom模板时候要注意有些元素内包含的元素会受到限制 HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab case 当使用字符串
阅读全文
摘要：v on监听dom事件 //简单逻辑直接使用js代码，很方便 Add 1 The button above has been clicked {{ counter }} times. var example1 = new Vue({ el: ' example 1', data: { counter
阅读全文
摘要：[TOC] 1. v for 1.1 遍历数组 1.2 遍历对象 1.3 key 当 Vue.js 用 v for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略. 建议尽可能在使用 v for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
阅读全文
摘要：1. v if 实例 1. 基本使用 2. 如果想切换多个元素，可以使用template元素，渲染结构不包含template元素 3. 使用else 4. 使用v else if 2. 使用key管理可复用元素 不使用key，当切换登陆方式时候，input框中已经输入的内容不会变，只是placeho
阅读全文
摘要：[toc] 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v bind 处理 最简单的想法是，只需要通过表达式计算出字符串结果即可。 但是在v bind作用于class和style属性时，vue进行了专门的增强，字符串之外，还可以是对象或数组。 1
阅读全文
摘要：1. 计算属性 模板内的表达式非常便利，但在模板中放入太多的逻辑会让模板过重且难以维护，所有就有了计算属性 例子: //html代码 Original message: "{{ message }}" Computed reversed message: "{{ reversedMessage }}
阅读全文
摘要：[TOC] 模板，组件中template的内容？ 1. 插值 1.1. 文本 1.2. 原始HTML 双大括号会将数据解释为纯文本，如果想要输出纯html则需要使用v html 使用双大括号 样式生效则为红色 使用v html指令，文字显示为红色 样式生效则为红色 注意，使用v html的时候要注意
阅读全文
浙公网安备 33010602011771号