09 2023 档案
摘要：生命周期 生命周期又名生命周期回调函数、生命周期函数、生命周期钩子 什么是生命周期 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
阅读全文
摘要：过滤器（Vue3 已经移除） 定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理） 注册过滤器： // 全局过滤器 Vue.filter(name,callback) //局部过滤器 new Vue{filters:{}} 使用过滤器： {{ xxx | 过滤器名}} 或 v-bi
阅读全文
摘要：收集表单数据 1）若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值 <input type="text" id="account" placeholder="请输入账号信息" v-model="userInfo.accountData">
阅读全文
摘要：我们先探讨一个数据更新时的问题，假设在以下人员列表中，改变"马冬梅"的信息，可以通过什么方法 1）第一种方法（奏效） 数据更新时，方法奏效 this.persons[0].name = "马老师" this.persons[0].age = 50 this.persons[0].sex = "男"
阅读全文
摘要：列表过滤 1）监视属性，实现列表过滤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本列表</title> <!-- 引入Vue --> <script type="text/javascript" sr
阅读全文
摘要：使用 v-for 做列表渲染 我们可以用 v-for 指令基于一个数组来渲染一个列表，用于展示列表数据。 语法： v-for = "(item, index) in items" :key="xxx" 或者 v-for = "(item, index) of items" :key="xxx" 这里
阅读全文
摘要：使用 v-if 做条件渲染 写法： 1）v-if = "表达式" 2）v-else-if = "表达式" 3）v-else = "表达式" 或 简写为 v-else 适用于：切换频率较低的场景 特点：不展示的DOM元素直接被移除 注意：v-if 可以和 v-else-if 、v-else 一起使用，
阅读全文
摘要：class 与 style 绑定 1）在应用界面中，某个（些）元素的样式是变化的 2）class / style 绑定就是专门用来实现动态样式效果的技术 class 绑定样式 写法： v-bind:class = "xxx" 或 :class = "xxx" ，xxx 可以是字符串、对象、数组 1）
阅读全文
摘要：计算属性（computed） vs 监视属性（watch） 1) computed 能完成的功能，watch 都可以完成 2) watch 能完成的功能，computed 不一定能完成。例如 watch 可以进行异步操作。 两个重要的原则 1) 所有被 Vue 管理的函数，最好写成通函数，这样 th
阅读全文
摘要：我们通过实现一个天气案例，引出监视属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气案例</title> <!--引入Vue--> <script type="text/javascript" src
阅读全文
摘要：Computed 计算属性是 Vue 中常用的一个功能，那为什么要使用计算属性 我们假定一个前提情况，如果我们需要用到一个属性，但这个属性不存在，却可以通过其他属性计算得来，我们则可以通过以下几个方法进行实现： 1) 插值语法实现 2) methods实现 3) 计算属性实现 例：我们已知 姓、名属
阅读全文
摘要：事件的基本使用 1) 使用v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名 2) 事件的回调需要配置在 methods对象中，最终会在 vm实例对象上 3) methods中配置的函数，不要用箭头函数，否则 this 指向的就不是 vm实例对象了 4) methods中配置的函数，都
阅读全文
摘要：回顾Object.defineproperty方法 Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性 写法：Object.defineproperty(obj, prop, desc) 1) 第一个参数obj，在哪个对象身上添加或者修
阅读全文
摘要：每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的： const vm = new Vue({ // 选项 }) Vue 的设计虽然没有完全遵循 MVVM模型，但是也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
阅读全文
摘要：el与data的两种写法 el的两种写法 1) 创建 Vue 实例对象的时候配置 el 属性 2) 先创建 Vue 实例，随后再通过 v.$mount('#root) 指定 el 的值 // el的两种写法 const v = new Vue({ // el 第一种写法 // el:"#root",
阅读全文
摘要：Vue中有两种数据绑定的方式 1. 单向数据绑定 v-bind，数据只能从data流向页面 写法：<input type="text" v-bind:value="name"> 简写：<input type="text" :value="name"> 2. 双向数据绑定 v-model，数据不仅能从
阅读全文
摘要：Vue模板语法有2大类1)插值语法功能：用于解析标签体内容写法：{{xxx}},xxx是js表达式，并且可以直接读取到data中的所有属性2)指令语法功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）举例：v-bind:href="xxx" 或 :href="xxx"，xxx同样要写j
阅读全文
摘要：前置工作 1) 在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools，它允许你在一个更友好的界面中审查和调试 Vue 应用。 2) 直接下载开发版本的vue.js，并用 <script> 标签引入，Vue 会被注册为一个全局变量 3) 阻止 vue 在启动时生成生产提示 Vue.
阅读全文
摘要：中文官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org) Avue组件文档：表单组件事件 | Avue (avuejs.com) Vue介绍 Vue 是一套用于动态构建用户界面的渐进式JavaScript框架 什么是渐进式，就是Vue可以自底向上逐层的
阅读全文
摘要：基本数据类型：byte[1]、short[2]、int[4]、long[8]、float[4]、double[8]、char[2]、boolean[1] 引用类型：类（class）、接口（interface）、数组（[]） "==" 运算符 "=="运算符是一个比较运算符，既可以判断基本数据类型，又
阅读全文
摘要：多态参数 方法定义的形参类型为父类类型，实参类型允许为子类类型 员工类（父类）： public class Empolyee { private String name; private double salary; public Empolyee(String name, double salar
阅读全文
