Vue 学习笔记
关注
分享
扫一扫
容景
这个作者很懒，什么都没留下…
展开
-
Vue 插槽—— Vue 学习笔记（十一）
插槽一般情况下，html 中的组件之间的内容会被抛弃，例如：效果：对于这种情况，我们可以使用 <slot> 在 <box></box> 内添加内容：效果：即：当组件渲染的时候，<slot></slot> 将会被替换为 "<p>content</p>"，插槽内可以包含任何模板代码，即使是其他组件。编译作用域我们可以在插槽中访问来自 Vue 实例的 property：效.原创 2020-11-21 20:58:26 · 179 阅读 · 0 评论 -
父子组件通信（props 与 $emit）——Vue 学习笔记（十）
父组件传递数据给子组件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>父组件传值给子组件</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app".原创 2020-11-16 22:14:06 · 162 阅读 · 0 评论 -
组件注册 —— Vue 学习笔记（九）
组件是可复用的 Vue 实例，我们可以在一个通过 new Vue 创建的根实例当中，使用根实例创建之前注册的组件。因为组件是 Vue 实例，所以它们与 new Vue 接受相同的选项，例如：data、computed、watch、methods 以及生命周期钩子等，仅有的例外是像 el 这样根实例特有的选项。全局注册组件<!DOCTYPE html><html> <head> <meta charset="utf-8"> <原创 2020-11-16 09:30:29 · 157 阅读 · 0 评论 -
Vue 表单输入绑定（v-model 双向数据绑定）——Vue 学习笔记（八）
v-model我们可以使用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。v-model 本质上只是语法糖。它负责监听用户的输入事件以及更新数据，并对一些极端场景进行一些特殊处理。v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源：不使用 v.原创 2020-11-14 17:03:31 · 553 阅读 · 0 评论 -
使用 Vue + Flex 编写一个简易的购物车
页面布局采用 flex 布局，元素渲染、用户操作采用 Vue。（1）首先我们将商品信息放在数组中，并将该数组保存在 Vue 实例的数据对象中。商品信息包括：id、图片 url、商品名、商品单价、库存、当前选择数量。let shopArr = [ {id: 1, url: './img/1.jpg', title: '大豆家 方头奶奶鞋', money: 118, num: 20, need: 0}, {id: 2, url: './img/2.jpg', title: '家宝路转角水槽原创 2020-11-13 18:31:46 · 364 阅读 · 0 评论 -
Vue 列表渲染（v-for）——Vue 学习笔记（七）
v-for 基本语法我们可以用 v-for 指令基于一个数组来渲染一个列表，v-for 指令需要使用 item in items（item of items 也可以）形式的语法，其中 items 是源数据数组，而 item 是被迭代的数组元素的别名：结果：在 v-for 块中，我们可以访问所有父作用域的 property，v-for 还支持一个可选的第二参数，即当前项的索引：结果：v-for 也可以遍历对象：...原创 2020-11-13 13:17:33 · 844 阅读 · 0 评论 -
Vue 条件渲染（v-if 与 v-show）——Vue 学习笔记（六）
v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。例如:不推荐同时使用 v-if 和 v-for，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。（1）在 <template> 元素上使用 v-if 条件渲染分组因为 v-if 是一个指令，所以必须将它添加到一个元素上。如果想渲染多个元素，可以把一个 <template> 元素当作不可见的包裹元素，并在上面.原创 2020-11-12 18:54:14 · 472 阅读 · 1 评论 -
Class 与 Style 绑定——Vue 学习笔记（五）
Class 绑定（1）字符串方法绑定（2）对象语法我们可以传给 v-bind:class 一个对象，以动态地切换 class：同时，v-bind:class 指令也可以与普通的 class attribute 共存，例如：绑定的数据对象不必内联定义在模板里：效果和上面的例子一模一样。我们也可以在这里绑定一个返回对象的计算属性：依旧可以正常运行。（3）数组语法：我们可以把一个数组传给 v-bind:class，以应用一个 .原创 2020-11-12 13:09:12 · 980 阅读 · 3 评论 -
Vue 计算属性和侦听器（computed 与 watch）——Vue 学习笔记（四）
计算属性：结果：在上面的例子中我们声明了一个计算属性 reversedMsg 。我们可以像绑定普通 property 一样在模板中绑定计算属性，Vue 知道 vm.reversedMsg 依赖于 vm.msg，因此当 vm.msg 发生改变时，所有依赖于 vm.reversedMsg 的绑定也会更新。计算属性缓存 VS 方法我们通过方法同样可以达到上面例子的效果。不同的是：计算属性是基于它们的响应式依赖进行缓存的。只在相关依赖发生改变时，它们才会重新求值。这意.原创 2020-11-11 22:18:20 · 180 阅读 · 2 评论 -
Vue 模板语法——Vue 学习笔记（三）
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。插值：（1）文本：数据绑定最常见的形式就是使用双大括号（{{}}）的文本插值：{{msg}} 将会被替换为对应数据对原创 2020-11-11 15:57:17 · 1519 阅读 · 8 评论 -
Vue 数据双向绑定原理——Vue 学习笔记（二）
vue.js 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter 和 getter，在数据变化时发布消息给订阅者，触发相应的监听回调。也就是说数据和视图同步，数据发生变化，视图跟着变化，反之亦然。Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。此方法接受三个参数：要操作的对象、要定义或修改的对象属性名、属性描述符。发布者-订阅者模式：订阅者依原创 2020-11-10 21:03:53 · 199 阅读 · 1 评论 -
Vue 生命周期与钩子函数—— Vue 学习笔记（一）
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 DOM、渲染—更新—渲染、卸载等一系列过程。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。同时在这个过程，也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。生命周期钩子的 this 指向调用它的 Vue 实例。<!DOCTYPE html><html> <head> <meta charset="utf-8" />原创 2020-11-09 23:49:55 · 202 阅读 · 0 评论