- 好好学习天天向上！
- sakana
随笔分类 - Vue
摘要：相关理解 vue-router 理解 vue的一个插件库，专门用来实现SPA应用。 对SPA应用的理解 单个Web应用(single page web application, SPA)。 整个应用只有一个完整的页面。 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。 数据需要通过ajax请
阅读全文
摘要：Vuex 概念 在Vue中实现集中式状态(数据)管理的一个Vue的插件，对Vue应用中多个组件的共享状态进行集中式管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间的通信。 使用场景 多个组件需要共享数据时。 搭建Vuex环境 ps：vue2只能使用Vuex3，Vue3只能使用Vue4 1
阅读全文
摘要：插槽 作用 让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件 => 子组件。 分类 默认插槽 具名插槽 作用域插槽 使用方法 默认插槽 //父组件中 <Category> <div>html结构</div> </Category> //子组件中 <template
阅读全文
摘要：Vue-cli配置代理 在前后端直接配置一个代理服务器，这个代理服务器和前端处于一个位置，当前端向后端请求数据的时候，不会直接访问后端，而是找这台代理，代理收到前端的请求，转发给后端，如果收到后端的响应数据，就把这些数据返回给前端。 方法一 在vue.config.js中添加如下配置： devSer
阅读全文
摘要：Vue封装的过渡与动画 作用 在插入、更新或移出DOM元素时，在合适的时候给元素添加样式类名。 css3实现动画 先来复习一下css3是如何实现的。 1.准备动画 @keyframes 动画名 { from { transform: translateX(-100%); } to { transfo
阅读全文
摘要：nextTick 语法 this.$nextTick(回调函数) 作用 在下一次DOM更新结束后执行其指定的回调。 使用场景 当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指的的回调函数中执行。 案例 当我们点击编辑按钮，想要使编辑框自动获取焦点 此时就可以使用nextTi
阅读全文
摘要：消息订阅与发布 一种组件间通信的方式，适用于任意组件间通信。 使用方法 1. 安装pubsub npm i pubsub-js@1.6 2. 引入 import pubsub from 'pubsub-js' 3. 接收数据 A组件想接收数据，则在A组件中订阅消息，订阅的回调在A自身。 **写法1：
阅读全文
摘要：全局事件总线（GlobalEventBus） 一种组件间通信的方式，适用于任意组件间通信。 使用方法 安装全局事件总线 在main.js里 new Vue({ ... beforeCreate() { Vue.prototype.$bus = this }, ... }) 使用全局事件总线 接收数据
阅读全文
摘要：组件自定义事件 组件自定义事件是一种组件间通信的方式，适用于：子组件 > 父组件 使用 使用场景 A是父组件，B是子组件，B想给A传数据。 1. 使用@或v-on 在这之前，我们是使用通过A给B传递函数类型的props实现B给A传数据。 //父组件 <School :getSchoolName="g
阅读全文
摘要：绑定样式 写法 :class="xxx"，xxx可以是字符串、数组、对象。 字符串写法：适用于类名不确定，需要动态获取。 数组写法：适用于要绑定多个样式，个数、类名都不确定。 对象写法： 适用于要绑定多个样式，个数、类名确定，但是不确定用不用。 style="[a, b]"，其中a、b是样式对象。
阅读全文
摘要：侦听属性的基本用法 watch监听属性 当被监听的属性发送变化时，回调函数自动调用，进行相关操作。 监听的属性必须是存在的，才能进行监听。 既可以监听data，也可以监听计算属性。 watch一般写在组件内，组件的注销watch也会随之注销。 watch的三个参数 handler：其值是一个回调函数
阅读全文
摘要：姓名案例 插值语法实现 <div id="room"> 姓：<input type="text" v-model="firstName"></br> 名： <input type="text" v-model="lastName"></br> 姓名：{{firstName}}-{{lastName}
阅读全文
摘要：事件的基本使用 使用v-on:xxx或者@xxx绑定事件，其中xxx是事件名 事件的回调需要配置在methods对象中，最终会在vm里面 methods中配置的函数，不要用箭头函数 ，否则使用this指的不是vm methods中配置的函数，都是被Vue所管理的函数，this指向的是vm或组件实例对
阅读全文
摘要：MVVM模型 观察发现 data中所有属性，最后都出现在vm身上 vm身上所有属性及Vue原型身上所有属性，在Vue模板中都可以直接使用 Vue中的数据代理 通过vm对象来代理data对象中属性的操作（读getter/写setter） Vue中数据代理的好处 更加方便地操作data中的数据 基本原理
阅读全文
摘要：el的两种写法 Vue初始化（被创建）后会判断有无el 有el：创建Vue实例对象的时候配置el属性 无el：通过vm.$mount('#root')指定el的值 data的两种写法 对象式：data: {} 函数式：data() {return {}} 一个重要原则 由Vue管理的函数，不要写成箭
阅读全文
摘要：模板语法 Vue模板语法包括两大类 插值语法 功能：用于解析标签体内容。 写法：{{xxx}}，xxx是js表达式，可以直接读取倒data中所有区域。 指令语法 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）。 举例：<a v-bind=href="xxx">或简写为<a :hre
阅读全文
摘要：Vue简介 介绍与描述 Vue是一套用来动态构建用户界面的渐进式JavaScript框架 - 构建用户界面：把数据通过某种办法变成用户界面 - 渐进式：Vue可以自底向上逐层地应用，简单应用只需要一个轻量小巧的核心库，复杂应用可以引入各式各样的Vue插件 Vue的特点 遵循MVVM模式 编码简洁，体
阅读全文
摘要：关于不同版本的Vue： vue.js与vue.runtime.xxx.js的区别： (1) vue.js是完整版的Vue，包含： 核心功能+模板解析器 (2) vue.runtime.xxx.js是运行版本的Vue，只包含核心功能，没有模板解析器 因为vue.runtime.xxx.js没有模板解析
阅读全文
