Vue2江湖
文章平均质量分 89
Vue2 知识介绍,方便于己,惠及于人。
秋堂主
倚楼听风雨,淡看江湖路!
展开
-
第19集丨Vue 江湖 —— ref属性
ref属性1. 被用来给`元素`或`子组件`注册引用信息(`id`的替代者)2. 应用在`html`标签上获取的是`真实DOM元素`,应用在`组件标签`上是`组件实例对象(vc)`3. 使用方式: a. 打标识:`.....`或`` b. 获取使用:`this.$refs.xxx`原创 2023-08-21 19:11:52 · 139 阅读 · 0 评论 -
第18集丨Vue脚手架的默认配置
`Vue`脚手架隐藏了所有 `webpack` 相关的配置,若想查看具体的 `webpak` 配置,请执行:`vue inspect > output.js`原创 2023-08-20 12:20:09 · 230 阅读 · 0 评论 -
第17集丨Vue中的render函数
- `vue.js` 与`vue.runtime.xxx.js`的区别: (1). `vue.is`是完整版的`Vue`,包含:核心功能+模板解析 (2). `vue.runtime.xxx.js`是运行版的`Vue`,只包含:核心功能,没有模板解析器。- 因为`vue.runtime.xxx.js`没有模板解析器,所以不能使用`template`配置项,需要使用`render`函数接收到的`createElement`函数去指定具体内容。原创 2023-08-19 22:40:38 · 147 阅读 · 0 评论 -
第16集丨一起创建Vue脚手架吧
本节带你一起创建vue脚手架,并分析脚手架产生的目录结构。原创 2023-08-18 18:49:11 · 140 阅读 · 0 评论 -
第15集丨Vue中的组件基础概念
使用创建,其中options和时传入的那个options几乎一样但也有点区别。el不要写,为什么?—最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器。data必须写成函数,为什么?——避兔组件被复用时,数据存在引用关系(因为如果直接写一个对象,组件复用的时候共用一个对象,容易引起问题)。备注:使用template可以配置组件结构。原创 2023-08-16 23:08:03 · 140 阅读 · 0 评论 -
第14集丨Vue2 基础 —— 生命周期
每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。比如created钩子可以用来在一个实例被创建之后执行代码。也有一些其它的钩子,在实例生命周期的不同阶段被调用,如mountedupdated和destroyed。生命周期钩子的this上下文指向调用它的Vue实例。原创 2023-08-15 18:50:11 · 78 阅读 · 0 评论 -
第13集丨Vue 江湖 —— 自定义指令
`Vue`中,所谓的指令,其实就是把原生操作`dom`的过程进行了封装。需求:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍。需求:义一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素默认获取焦点。bigNumber,要使用连接,即要定义成。原创 2023-08-14 09:23:41 · 70 阅读 · 0 评论 -
第12集丨Vue 江湖 —— 内置指令
到本节为止,我们学过的指令:v-bind:单向绑定解析表达式。v-model:双向数据绑定。v-for:历数组/对象/字符串等v-on:绑定事件监听,可简写为`@`。v-if:条件渲染(动态控制节点是否存在)。v-else:条件渲染(动态控制节点是否存在)。v-show:条件渲染(动态控制节点是否展示)。原创 2023-08-13 12:35:41 · 107 阅读 · 0 评论 -
第11集丨Vue 江湖 —— 过滤器(filter)
过滤器:1. **定义**:对要显示的数据进行特定格式化后再显示(`适用于一些简单逻辑的处理`)。2. **语法**:a. 注册过滤器:全局过滤器`Vue.filter(name, callback)`或 局部过滤器`new Vue{filters:{}}` b. 使用过滤器:`{{ xxx | 过滤器名| 过滤器名}}` 或 `v-bind:属性= "xxx | 过滤器名"` 3. **备注**: a. 过滤器也可以接收额外参数、`多个过滤器也可以串联` b. 并`没有改变原本的数据。原创 2023-08-12 12:33:56 · 145 阅读 · 0 评论 -
第10集丨Vue 江湖 —— 表单输入绑定
则v-model收集的是value值,用户输入的就是value值。,则v-model收集的是value值,且要给标签置value值。a. 没有配置input的value属性,那么收集的就是checked(勾选or未勾选,是布尔值b. 若配置了input的valueⅰ. 【v-model】的初始值是【非数组】,那么收集的就是【checked】(勾选or未勾选,是布尔值)ⅱ. 【v-model】的初始值是数组,那么收集的的就是【value组成的数组】v-model的三个修饰符:a.lazy。原创 2023-08-11 09:11:51 · 81 阅读 · 0 评论 -
第9集丨Vue 江湖 —— 监测数据原理
`Vue`监测到`data`中的数据(`所有层次的数据`)发生变化,就会调用`setter`重新解析模板,解析引用的到的数据的值。`数据劫持`:在访问或修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作,如修改返回结果。`Vue 2.x` 使用的是 `Object.defineProperty()`,而 `Vue` 在 `3.x` 版本之后改用 `Proxy` 进行实现原创 2023-08-10 12:11:51 · 75 阅读 · 0 评论 -
第8集丨Vue 江湖 —— 列表渲染
v-for指令用于展示列表数据,语法格式:`v-for="(item, index) in/of xxx" :key="yyy"`。可遍历:数组、对象、字符串、指定次数。`key`是虚拟`DOM`对象的唯一标识- 当状态中的数据发生变化时,`Vue`会根据【`新数据`】生成【`新的虚拟DOM`】- 随后`Vue`进行【`新虚拟DOM`】与【`旧虚拟DOM`】的差异进行比较。原创 2023-08-09 08:52:56 · 88 阅读 · 0 评论 -
第7集丨Vue 江湖 —— 条件渲染
本节`条件渲染`所涉及到的指令有:`v-show`、 `v-if`、`v-else-if`、`v-else`。`v-if` 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 `true`值的时候被渲染。`v-if`可以和`v-else-if`、 `v-else` 一起使用, 但要求结构不能被**打断**,即用该指令的结构要挨在一起。原创 2023-08-08 08:52:24 · 74 阅读 · 0 评论 -
第6集丨Vue 江湖 —— Class 与 Style 样式绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是attribute,所以我们可以用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将v-bind用于class和style时,Vue.js做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。原创 2023-08-07 08:53:50 · 82 阅读 · 0 评论 -
第5集丨Vue 江湖 —— 监视属性/侦听属性
`Vue` 提供了一种更通用的方式来观察和响应 Vue实例上的数据变动:**侦听属性**,也成为`监视属性`。1. 当被监视的属性变化时,回调函数`handler`自动调用,进行相关操作。2. 监视的属性必须存在,才能进行监视。3. 监视的两种写法 a. `new Vue`时传入`watch`配置 b. 通过`vm.$watch`来动态实现监视原创 2023-08-06 10:29:31 · 196 阅读 · 0 评论 -
第4集丨Vue 江湖 —— 计算属性
所谓`计算属性`,就是要用的属性不存在,要通过已有的属性加工、计算生成一个全新的属性。对于`Vue`来说,`data`中配置的就是属性。`计算属性`与`data`中定义的属性分开。2. 原理:底层借助了`Object.defineProperty()`方法提供的`getter`和`setter`。3. `get`函数的作用 a. 当有程序读取`计算属性`时,`get`就会被调用,且返回值就作为`计算属性`的值。即`计算属性`是实时计算的属性。 b. `Vue`做了缓存,当所依赖的数据没有发生变化原创 2023-08-05 10:50:53 · 267 阅读 · 0 评论 -
第3集丨Vue 江湖 —— Vue中的事件
Vue事件的基本使用:1. 使用 `v-on:xxx` 或 `@xxx` 绑定事件,其中`xxx`是事件名2. 事件的回调需要配置在`methods`对象中,最终会在`vm`实例上,不会做数据代理。不要放在`data`中,否则也会为所增加的方法进行数据代理,设置`setter`和`getter`。3. `methods`中配置的函数,不要用箭头函数,否则`this`就是不是`vm`了。4. `methods`中配置的函数,都是被`Vue`所管理的函数,`this`的指向是`vm` 或 组件实例对象原创 2023-08-04 08:58:18 · 213 阅读 · 0 评论 -
第2集丨Vue 江湖 —— Vue中的一些必备概念
本节介绍:Vue中的模板语法、数据绑定、MVVM模型、数据代理、Object.defineProperty()等。Vue模板语法分为2类:插值语法、指令语法。`Vue` 中有2种数据绑定方式:单向绑定(`v-bind` ):数据只能从`data` 流向页面。双向绑定(`v-model`):数据不仅能从`data` 流向页面,还可以从页面流向`data`。`Object.defineProperty() `静态方法会直接在一个对象上定义一个新属性,或修改其现有属性。允许精确地添加或修改对象上的属性。默认情况下原创 2023-08-02 19:07:19 · 170 阅读 · 0 评论 -
第1集丨Vue 江湖 —— Hello Vue
Vue(读音 /vjuː/, 类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,VueVue是一套构建用户界面的渐进式框架。Vue只关注视图层, 采用自底向上增量开发的设计。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。原创 2023-08-01 08:55:15 · 112 阅读 · 0 评论