随笔分类 - Vue
摘要：vue-router官网：传送门 vue-router起步：传送门 vue-router路由：Vue.js官网推出的路由管理器，方便的构建单页应用 单页应用：Single Page Application简称SPA，只有一个web页面的应用，用户与应用交互时，动态更新该页面的内容 简单的来说，根据不
阅读全文
摘要：Vue特殊特性slot 传送门 有时候我们需要在自定义组件内书写一些内容，例如： <com-a> <h1>title</h1> </com-a> 如果想获取上面代码片段中h1标签的内容该怎么办呢？Vue提供了一个极为方便的内置组件<slot> Learn 一、使用solt分发内容 目录结构 【每个d
阅读全文
摘要：Vue单项数据流 传送门 Vue中不同的组件，即使不存在父子关系也可以相互通信，我们称为非父子关系通信 我们需要借助一个空Vue实例，在不同的组件中，使用相同的Vue实例来发送/监听事件，达到数据通信的目的 Learn 一、单项数据流 目录结构 【每个demo下方都存有html源码】 一、单项数据流
阅读全文
摘要：Vue单项数据流 传送门 单向数据流：父组件值的更新，会影响到子组件，反之则不行 修改子组件的值： 局部数据：在子组件中定义新的数据，将父组件传过来的值赋值给新定义的数据，之后操作这个新数据 如果对数据进行简单的操作，可以使用计算属性 修改子组件的prop，同步到父组件： 使用.sync修饰符 将要
阅读全文
摘要：Vue组件 传送门 子组件向父组件传值：子组件通过$.emit()方法以事件形式向父组件发送消息传值； 使用步骤： 1、定义组件：现有自定义组件com-a、com-b，com-a是com-b的父组件； 2、准备获取数据：父组件com-a要获取子组件data中的height属性； 3、在子组件com-
阅读全文
摘要：Vue组件 传送门 在Vue的组件内也可以定义组件，这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a，然后在component-a中定义了component-b，那他们的关系就是 Vue实例 -- 根组件 root component-a – 相对于root 这是子组件
阅读全文
摘要：keep-alive 传送门 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的
阅读全文
摘要：动态组件 传送门 在一个元素上挂载多个组件，根据不同状态进行切换的时候，可以使用动态组件 动态组件的使用：需要使用内置组件<component></component>，根据 :is 的值决定显示哪个组件，:is的值是要显示的组件id 目录结构 <!DOCTYPE html> <html> <hea
阅读全文
摘要：Vue组件 传送门 组件Component，可扩展HTML元素，封装可重用的代码。通俗的来说，组件将可重用的HTML元素封装成为标签方便复用； 组件的使用： 使用全局方法Vue.extend创建构造器； 再使用全局方法Vue.component注册组件； 在Vue.component里需要指明组件的
阅读全文
摘要：Vue.js进入/离开 & 列表过渡 传送门 进入/离开过渡效果：Vue在插入、更新或移除DOM时，可以设置一些动画效果； 过渡效果中也提供了对应的钩子函数，这些钩子函数需要在<transition>组件上绑定，然后再实现 Vue中的过渡效果也可以与其他第三方CSS动画库一起使用，例如Animate
阅读全文
摘要：Vue.js自定义指令 传送门 自定义指令：除了内置指令，Vue也允许用户自定义指令 注册指令：通过全局API Vue.directive可以注册自定义指令 自定义指令的钩子函数参数：自定义指令的钩子函数可以传递4个参数，分别是el、binding、vnode、oldVnode Learn 一、自定
阅读全文
摘要：Vue.js实例方法/生命周期 传送门 常用的实例方法 数据： 传送门 vm.$set：设置属性值 vm.$delete：删除属性值 vm.$watch：观测数据变化 生命周期 vm.$mount：手动挂载Vue实例 vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听 vm.$nex
阅读全文
摘要：Vue实例属性与方法中文文档 传送门 Vue实例属性：vue实例直接调用的属性 Learn 一、vm.$data：获取属性 二、vm.$el：获取实例挂载的元素 三、vm.$options：获取自定义选项/属性 四、vm.$refs：获取通过ref属性注册的DOM对象 项目结构 【每个demo下方都
阅读全文
摘要：Vue计算属性中文文档 传送门 Vue计算属性：更强大的属性声明方式，可以对定义的属性进行逻辑处理与数据监视; 注意：模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护 Learn 一、计算属性的基本使用 二、计算属性的getter和setter
阅读全文
摘要：Vue生命周期中文文档 传送门 Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期； Vue生命周期钩子：又称为Vue生命周期钩子方法/函数，是Vue为开发者提供的方法，我们可以通过这些方法在Vue实例创 建、挂载、数据更新、销毁等阶段做一些事情 Vue的生命周期钩子方法： befo
阅读全文
摘要：实现对商品的增加、删除、数量的修改功能 删除商品可选择直接删除当前商品、删除选中商品、删除所有商品 添加商品时会自动添加日期字段 商品的属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Gary商品管理</title> <s
阅读全文
摘要：Vue.js中文文档 传送门 Vue@事件绑定 v-show：通过切换元素的display CSS属性实现显示隐藏； v-if：根据表达式的真假实现显示隐藏，如果隐藏，它绑定的元素都会销毁，显示的时候再重建； v-else：与v-if配对使用； v-elseif：与v-if配对使用； v-bind：
阅读全文
摘要：Vue.js中文文档 传送门 Vue的指令：其实就是单个JavaScript表达式，一般来说是带有v-前缀 Vue指令： v-model：数据双向绑定； v-text：以纯文本方式显示数据； v-html：可以识别HTML标签； v-once：只渲染元素或组件一次； v-pre：不进行编译，直接显示
阅读全文