博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

2019年6月13日

摘要: 基础用法:v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 你应该通过 JavaScript 在组件的 data 选项中声明初始值,v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vu 阅读全文

posted @ 2019-06-13 19:34 追风0315 阅读(221) 评论(0) 推荐(0) 编辑

摘要: 监听事件: 事件处理方法:都放模板不行的 内联处理器中的方法 事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 阅读全文

posted @ 2019-06-13 18:59 追风0315 阅读(290) 评论(0) 推荐(0) 编辑

摘要: 1:用 v-for 把一个数组对应为一组元素 在 v-for 块中,我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数,即当前项的索引。 你也可以用 of 替代 in 作为分隔符,因为它更接近 JavaScript 迭代器的语法: 2:在 v-for 里使用对象,注:在遍历对象时 阅读全文

posted @ 2019-06-13 18:22 追风0315 阅读(301) 评论(0) 推荐(0) 编辑

摘要: v-if v-else:必须跟在v-if 或者v-else-if才会被识别 v-else-if:2.1.0 新增 也必须紧跟在带 v-if 或者 v-else-if 的元素之后 key 管理可复用的元素 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得 阅读全文

posted @ 2019-06-13 15:36 追风0315 阅读(2152) 评论(0) 推荐(0) 编辑

摘要: Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。 不过,字符串拼接麻烦且易错。 因此,在将 v-bind 用于 class 和 style 时,Vue.j 阅读全文

posted @ 2019-06-13 15:10 追风0315 阅读(215) 评论(0) 推荐(0) 编辑

摘要: 计算属性computed 场景:模板里面表达式,不应该太复杂;对于任何复杂逻辑,你都应当使用计算属性。 基本使用 这里我们声明了一个计算属性 reversedMessage。我们提供的函数将用作属性 vm.reversedMessage 的 getter 函数: Vue 知道 vm.reversed 阅读全文

posted @ 2019-06-13 14:46 追风0315 阅读(270) 评论(0) 推荐(0) 编辑

摘要: 先简单介绍一下debounce,从最简单的一个场景入手,当用户不断点击页面,短时间内频繁的触法点击事件,只有在用户触法事件后的ns时间内,没有再触法事件,真正的监听函数才会执行,如果在这段时间内再次触法了事件,就需要重新计算这个ns。 debounce最主要的作用是把多个触法事件的操作延迟到最后一次 阅读全文

posted @ 2019-06-13 14:43 追风0315 阅读(3997) 评论(0) 推荐(0) 编辑

摘要: 插值 1:文本 {{}}/一次性绑定 2:html 注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎 你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。 请只对可信内容使用 HTML 插值, 绝不要对用户提供的内容使用插值。 3 阅读全文

posted @ 2019-06-13 14:05 追风0315 阅读(375) 评论(0) 推荐(0) 编辑

摘要: 创建一个 Vue 实例 当创建一个 Vue 实例时,你可以传入一个选项对象。 这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。 作为参考,你也可以在 API 文档 中浏览完整的选项列表 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组 阅读全文

posted @ 2019-06-13 13:30 追风0315 阅读(238) 评论(0) 推荐(0) 编辑

摘要: 尝试 Vue.js 方法 1:使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。 2:也可以创建一个 .html 文件,然后通过如下方式引入 Vue:使用vue-devtools 得用开发环境版本 打开浏览器直接修改值,页面会变化! 阅读全文

posted @ 2019-06-13 13:14 追风0315 阅读(218) 评论(0) 推荐(0) 编辑

摘要: 网站:https://jsfiddle.net/chrisvfritz/50wL7mdz/ 阅读全文

posted @ 2019-06-13 12:40 追风0315 阅读(546) 评论(0) 推荐(0) 编辑

摘要: 1:直接在谷歌应用商店搜索: Vue.js devtools进行安装 2:用开发环境的CDN,不要用生产环境的CDN <!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <!-- 开发环境 阅读全文

posted @ 2019-06-13 12:38 追风0315 阅读(184) 评论(0) 推荐(0) 编辑

摘要: tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code) 它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。 新的 webpa 阅读全文

posted @ 2019-06-13 10:53 追风0315 阅读(734) 评论(0) 推荐(0) 编辑

摘要: 1:模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行完全刷新 2:HMR 不适用于生产环境,这意味着它应当只在开发环境使用 就是我改了文件,自动就刷新了! 启用 HMR 1:更新 webpack- 阅读全文

posted @ 2019-06-13 10:11 追风0315 阅读(754) 评论(1) 推荐(0) 编辑