随笔分类 -  VUE深度学习

插槽
摘要：插槽内容 Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot>元素作为承载分发内容的出口。 它允许你像这样合成组件： <navigation-link url="/profile"> Your Profile </navigat 阅读全文
posted @ 2020-01-08 00:14 Mr_Riven 阅读(338) 评论(0) 推荐(0)
Prop
摘要：Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。 这意味着当你使用 DOM 中的模板时， camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命 阅读全文
posted @ 2020-01-03 23:02 Mr_Riven 阅读(470) 评论(0) 推荐(0)
组件注册
摘要：在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了： Vue.component('my-component-name', { /* ... */ }) 该组件名就是 Vue.component 的第一个参数。 你给予组件的名字可能依赖于你打算拿它来做什么。 当直接在 阅读全文
posted @ 2020-01-02 21:21 Mr_Riven 阅读(245) 评论(0) 推荐(0)
组件基础
摘要：这里有一个 Vue 组件的示例： // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:cl 阅读全文
posted @ 2019-12-31 03:42 Mr_Riven 阅读(255) 评论(0) 推荐(0)
表单输入绑定
摘要：你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v 阅读全文
posted @ 2019-12-29 06:04 Mr_Riven 阅读(298) 评论(1) 推荐(0)
事件处理
摘要：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 示例： <div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been c 阅读全文
posted @ 2019-12-28 03:33 Mr_Riven 阅读(177) 评论(0) 推荐(0)
列表渲染
摘要：用 v-for 把一个数组对应为一组元素 我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 <ul id="example-1"> <li v-f 阅读全文
posted @ 2019-12-27 03:31 Mr_Riven 阅读(368) 评论(0) 推荐(0)
7.条件渲染if
摘要：v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 <h1 v-if="awesome">Vue is awesome!</h1> 也可以用 v-else 添加一个“else 块”： <h1 v-if="awesome">Vue is a 阅读全文
posted @ 2019-12-26 01:40 Mr_Riven 阅读(273) 评论(0) 推荐(0)
6.Class 与 Style 绑定
摘要：操作元素的 class 列表和内联样式是数据绑定的一个常见需求。 因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。 不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。 表达式结果的 阅读全文
posted @ 2019-12-25 02:05 Mr_Riven 阅读(628) 评论(0) 推荐(0)
5.计算属性和侦听器
摘要：计算属性 所以，对于任何复杂逻辑，你都应当使用计算属性。 vm.reversedMessage 的值始终取决于 vm.message 的值。 计算属性缓存 vs 方法 你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果： 不同的是计算属性是基于它们的响应式依赖进行缓存的。 只在相关响应式 阅读全文
posted @ 2019-12-24 01:56 Mr_Riven 阅读(207) 评论(0) 推荐(0)
4.模板语法
摘要：Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统， Vue 能 阅读全文
posted @ 2019-12-24 00:44 Mr_Riven 阅读(241) 评论(0) 推荐(0)
3.Vue 实例
摘要：创建一个 Vue 实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm(ViewModel 的缩写) 这个变量名 阅读全文
posted @ 2019-12-22 23:24 Mr_Riven 阅读(679) 评论(0) 推荐(0)
2.Vue.js 是什么
摘要：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全 阅读全文
posted @ 2019-12-22 22:03 Mr_Riven 阅读(259) 评论(0) 推荐(0)
1. vue 的安装
摘要：兼容性 Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 安装： 1.直接用 <script> 引入 直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。 1. 阅读全文
posted @ 2019-12-22 19:36 Mr_Riven 阅读(328) 评论(0) 推荐(0)