随笔分类 - 尚硅谷Vue全家桶学习笔记
摘要：Vue封装的过渡与动画 在插入、更新或移除 DOM 元素时，在合适的时候给元素添加样式类名 transition 讲解 transition 是 vue 内置的一个组件，我们可以直接使用。 <transition> 元素作为单个元素 / 组件的过渡效果。<transition> 只会把过渡效果应用到
阅读全文
摘要：this.$nextTick（十分常用的功能） 语法：this.$nextTick(回调函数) 作用：在下一次 DOM 更新结束后执行其指定的回调 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行 案例：使用 $nextTick 优化 Tod
阅读全文
摘要：通过生活中报纸的订阅与发布，引出本节内容：消息订阅与发布 报纸订阅与发布 1）订阅报纸：住址 2）邮递员送报纸：报纸 消息订阅与发布 1）订阅消息：消息名 2）发布消息：消息内容 上述App中，组件C中的数据想要传递给组件A（A是接收数据的，C是提供数据的），在A中订阅一个消息，消息名为demo，回
阅读全文
摘要：全局事件总线（GlobalEventBus） 1. 一种组件间通信的方式，适用于任意组件间通信 2. 安装全局事件总线 new Vue({ ... // 生命周期 beforeCreate 这时vue还未解析模板，初始化的数据监测、数据代理还未开始 beforeCreate() { // 安装全局事
阅读全文
摘要：组件的自定义事件 1.一种组件间通信的方式，适用于 子组件 > 父组件（这里也可以使用 props 传递数据进行实现） 2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中） 3.绑定自定义事件： 1）第一种方式，在父组件中 <!--通过父组件给子
阅读全文
摘要：什么是网络存储 在HTML5之前，开发人员一般是通过使用Cookie在客户端保存一些简单的信息的。 在HTML5发布后，提供了一种新的客户端本地保存数据的方法，那就是Web Storage，存储内容大小一般支持5MB左右（不同浏览器可能还不一样），它允许 Web 应用程序在用户浏览器中实现本地存储机
阅读全文
摘要：Todo-list 案例 组件化编码流程（通用） 1.拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突，如下所示 2.实现动态组件：要考虑好数据的存放位置，数据是要一个组件在用，还是一些组件在用 一个组件在用：放在组件自身即可 一些组件在用：放在他们共同的父组件上 3.实现交互：从绑定
阅读全文
摘要：我们先思考一个问题，如果对School 和 Student应用样式的话，一般是使用如下方式： src/components/School.vue <template> <div class="demo"> <h2>学校名称：{{name}}</h2> <h2>学校地址：{{address}}</h2
阅读全文
摘要：plugin插件 功能：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。 src/plugins.js（定义插件） // 定义插件(默认暴露) export default { install(Vue){ conso
阅读全文
摘要：mixin 混入 功能：可以把多个组件共用的配置提取成一个混入对象 使用混合： 1）第一步，定义混入 新建一个JS文件，比如mixin.js src/mixin.js // 分别暴露 export const hunhe1 = { methods:{ showName(){ alert(this.n
阅读全文
摘要：props配置项 props 让组件接收外部传过来的数据 1）传递数据 这里需要注意，通过 age = "18"的方式，传递进去的数据是字符类型的，通过动态绑定 :age = "26" 的方式，传递进去的数据是整型类型 <!--这里需要注意，:age="26" 代表 v-bind动态绑定，传入的ag
阅读全文
摘要：ref 属性 ref 被用来给元素或子组件注册引用信息（id的代替者） 1）应用在 html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象vc（VueComponent） 2）使用方式 打标识：<h1 ref="xxx"></h1> 或 <School ref=''xxx'></
阅读全文
摘要：将 24-Vue组件化编程-单文件组件 放到使用Vue脚手架创建的vue_test项目中 脚手架文件结构 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存
阅读全文
摘要：Vue脚手架 Vue脚手架是Vue官方提供的标准化开发工具（开发平台）,官方文档：Home | Vue CLI (vuejs.org) 提前准备工作 这里，我首先安装了一个nvm（node的版本管理工具），可以通过nvm管理多个版本的node.js，解决node.js各种版本存在不兼容的问题 参考链
阅读全文
摘要：单文件组件一个文件中只包含有1个组件 组件名的注意事项 一个单词组成： 1）第一种写法（首字母小写）：school 2）第二种写法（首字母大写）：School，推荐 多个单词组成： 1）第一种写法（kebab-case命名）：my-school 2）第二种写法（CamelCase命名）：MyScho
阅读全文
摘要：非单文件组件 一个文件中包含有n个组件 非单文件组件的特点 1）模板编写没有提示 2）没有构建过程，无法将ES6转换成ES5 3）不支持组件的CSS 4）真正开发中几乎不用 Vue中使用组件的三大步骤 1. 定义组件（也就是创建组件） 2. 注册组件（这里有局部注册和全局注册） 3. 使用组件（编写
阅读全文
摘要：使用传统的方式编写应用 传统的方式，一般离不开前端的三大件（HTML、CSS、JS） HTML：HTML是超文本标记语言（Hyper Text Markup Language）是用来描述网页的一种语言，负责网页的架构 CSS：CSS是一种层叠样式表(级联样式表、样式表)，是⼀种标记语⾔，负责网页的样
阅读全文
摘要：生命周期 生命周期又名生命周期回调函数、生命周期函数、生命周期钩子 什么是生命周期 Vue在关键时刻帮我们调用的一些特殊名称的函数。 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 生命周期函数中的 this 指向是 vm 或 组件实例对象。 通过一个小案例，标签实现逐渐透明化
阅读全文
摘要：回顾一下前面学习的，Vue模板语法 1)插值语法 功能：用于解析标签体内容 写法：{{xxx}},xxx是js表达式，并且可以直接读取到data中的所有属性 2)指令语法 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...） 举例：v-bind:href="xxx" 或 :href="x
阅读全文
摘要：目前为止，我们学过的指令： v-bind：单向绑定解析表达式，可以简写为 :xxx v-model：双向数据绑定 v-for：遍历数组 / 对象 / 字符串 v-on：绑定事件监听，可以简写为 @ v-if：条件渲染（动态控制节点是否存在） v-else：条件渲染（动态控制节点是否存在） v-sho
阅读全文
