随笔分类 - Vue / Vue 2.x
1
摘要：一些注意点 vue基础 vue-cli：工程化开发 vue-router：在Vue中实现前端路由 vuex：应用足够复杂时，用于保管数据 element-ui vue3 Angular ==》 React ==》 Vue 生命周期函数中的this都是vm 开发中自行向vm身上追加属性时【场景：比如m
阅读全文
摘要：Vue组件化编程 一、对组件的理解 什么是组件？ 组件的定义： 实现应用中局部【组件要拆的尽量细致】功能代码【对于前端来说，就是css+html+js】和资源【mp3、mp4、ttf、.zip...】的集合【组件是一个集合】 与传统方式编程相比，组件化编程有什么优势？ 依赖关系不混乱、好维护、代
阅读全文
摘要：生命周期[函数]🔥🔥🔥 js 不善于处理小数，0.1 + 0.2 不一定等于0.3，当通过js判断一个不断缩小的变量的值是否缩小到0时，可以通过<=0进行判断；如果直接判断 0，可能会出现递减的值取不到0的情况 mounted的执行时期：Vue完成模板的解析并把初始的真实DOM元素放入页面后（
阅读全文
摘要：自定义指令 从某种程度上来说，Vue中的自定义指令就是把原生DOM操作进行了一次封装 指令是不能脱离元素【标签】存在的 定义指令：big 使用指令：v-big 值的写法：对象【可以处理一些细节上的问题】和函数 定义指令可以通过两种方式，函数式和对象式 1. 函数式 指令名(真实DOM元素[eleme
阅读全文
摘要：内置指令 我们学过的指令： v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染（动态控制节点是否存存在） v-else : 条件渲染（动态控制节点是否存
阅读全文
摘要：过滤器 BootCDN：包含了一些免费、优秀的第三方类库 官网：https://www.bootcdn.cn/ moment.js：js的日期处理类库 dayjs：moment.js的轻量化解决方案，API同moment.js完全一致 引入dayjs，全局就多了一个dayjs()函数，dayjs()
阅读全文
摘要：收集表单数据 如何利用Vue提供的v-model收集一个表单中的数据 v-model配合不同的input标签有不同的技巧 hobby的初始值能够影响v-model收集回来的数据 hobby为字符串，收集到的是checked属性的值 hobby为数组，收集到的是自己定义的value属性的值 多选框【C
阅读全文
摘要：Vue监测数据的原理 思路：举例 ==》 监测对象数据原理 ==》 Vue.set() ==》 监测数组数据原理 ==》 说明前面例子中的现象 Vue监测数据改变的原理 Vue底层监测data中数据改变的原理和watch中监测数据的原理是一致的，watch是Vue提供给我们用于自行监视数据变化的配置
阅读全文
摘要：列表渲染 1. v-for指令 v-for指令: 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 3.可遍历：数组（用的最多）、对象、字符串（用的很少）、指定次数（用的很少） <body> <!-- 准备好一个容器--> <div id
阅读全文
摘要：条件渲染 符合某些条件，就给你渲染某些东西；不符合条件，要渲染的东西就不会显示 原生可以通过display:none;、visibility: hidden;、opacity: 0;几种方式实现 v-if和v-else-if、v-else需要作为一组指令使用，中间不允许被打断，v-else是不需要加
阅读全文
摘要：绑定样式 1. class样式 绑定样式： 1. class样式【不变的样式写在class、style中，变化的样式写在:class中，最终的样式为三者的并集】 写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式
阅读全文
摘要：监视/侦听属性【watch】 用于监视某一个属性的变化 监视属性watch： 1.当被监视的属性变化时, 回调函数【handler()】自动调用, 进行相关操作 2.监视的属性必须存在，才能进行监视！！【监视不存在的属性不会报错】 3.配置监视的两种写法： (1).new Vue时传入watch配置
阅读全文
摘要：计算属性【computed】 1. 姓名案例 1.1 {{}}插值语法版本 <body> <div id="root"> 姓：<input type="text" v-model="firstName"/> 名：<input type="text" v-model="lastName"/> <hr
阅读全文
摘要：事件处理 1. 事件的基本使用 模板只能用到对应Vue实例中的数据和方法，像这里的showInfo，模板中是调不到的 所有被Vue管理的函数【methods对象中的函数】不能写成箭头函数，只能写成普通函数，否则，函数中的this就不再是Vue实例，而是Window对象 只有配置在data中的内容才会
阅读全文
摘要：数据代理 1. Object.defineProperty【ES6中的知识点】 用于给一个对象添加/定义属性，可以对追加的属性进行很多高级的限制【比如控制属性是否可以枚举、修改、删除】 Object.defineProperty方法在Vue中的应用 数据劫持 数据代理 计算属性 Object.def
阅读全文
摘要：理解MVVM MVVM模型 1. M：模型(Model) ：data中的数据 2. V：视图(View) ：模板代码 3. VM：视图模型(ViewModel)：Vue实例 观察发现： 1.data中所有的属性，最后都出现在了vm身上。 2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板
阅读全文
摘要：数据绑定 Vue中有2种数据绑定的方式： 1.单向绑定(v-bind)：数据只能从data流向页面。 2.双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。【通俗：数据变，页面变；页面变，数据变】 备注： 1.双向绑定一般都应用在表单类【输入类，有value属性的标
阅读全文
摘要：模板语法 容器里的代码被称为【Vue模板】，模板语法就是指模板的代码中可以写哪些Vue语法【类似：{{name}}】 插值语法：把指定的值放在指定的位置。 插值语法往往用于指定标签体内容。 指令语法： Vue指令所在的属性值会作为JavaScript表达式执行 v-bind：用于给标签中的任意一个属
阅读全文
摘要：初识Vue 1. 搭建Vue开发环境 安装Vue 直接用引入 可能涉及到CDN加速，CDN加速会让标签的src引入的网络js文件加载速度更快。 npm+命令行 新建一个空文件夹，在空文件夹目录下执行 // npm初始化，想要使用npm安装vue必须先初始化，初始化后生成package.json np
阅读全文
摘要：Vue简介 1. Vue是什么？ 一套用于构建用户界面的渐进式JavaScript框架。 构建用户界面：将拿到的数据通过某种办法变成用户可以看到的界面。 渐进式：从一个轻量而又小巧的核心库逐渐递进到使用各式各样的Vue插件库【Vue可以自底向上逐层的应用】 2. 谁开发的？ React、An
阅读全文
1
