Vue学习
关注
分享
扫一扫
才疏学浅的小缘同学
知足且上进，温柔而坚定。
展开
-
Vue学习——scoped样式
作用：让样式在局部生效，防止冲突写法：<style scoped>总结：可以防止在两个组件中使用了相同名字的style样式而导致后面引入的样式覆盖了前面的样式的冲突，但在App.vue文件中最好不要使用，因为App.vue通常存放所有的style样式，大多数情况都是用来在全局使用的。此外可以使用npm view webpack versions命令查看webpack的历史版本，使用npm iless-loader@版本号配置less-loader，当ledd-loader版本高于we..原创 2022-03-28 11:26:00 · 1740 阅读 · 0 评论 -
Vue学习——插件
功能：用于增强Vue本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。定义： 对象.install = function (Vue,options) { Vue.xxx Vue.xxx ... }使用：Vue.use()总结：其主要方法的使用是创建一个插件js文件，里面暴露出一个install方法并传入Vue参数，可以实现很多自定义的Vue方法，包括过滤器、mixin...原创 2022-03-28 10:52:06 · 1118 阅读 · 0 评论 -
Vue学习——mixin混入
功能：可以把多个组件共用的配置提取成一个混入对象使用方式： 1.定义混合，例如： { data(){....}, methods:{....} .... } 2.使用混入，例如： 全局混入：Vue.mixin(xxx) 局部混入：mixins:['xxx']Blogger.vue<template> <div class="blogger">...原创 2022-03-25 16:47:51 · 1210 阅读 · 0 评论 -
Vue学习——props配置
功能：让组件接收传递过来的数据1.传递数据： <Demo name="xxx"/>2.接收数据: 第一种方式(只接收)： props:['name'] 第二种方式(限制类型): props:{ name:Number } 第三种方式(限制类型、限制必要性、指定默认值) props:{ name:{ type:St...原创 2022-03-25 15:20:43 · 554 阅读 · 0 评论 -
Vue学习——ref属性
1.被用来给元素或子组件注册引用信息（id的代替者）2.应用在html标签上获得的是真实DOM元素，应用在组件标签上是组件实例对象(vc)3.使用方式： 打标识： <h1 ref="xxx">.....</h1> 或<Blogger ref="xxx"></Blogger> 获取：this.$refs.xxx<template> <div class="blogger"> <h...原创 2022-03-25 14:22:52 · 705 阅读 · 0 评论 -
尚硅谷Vue学习——一个重要的内置对象
一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype 为什么有这个内置关系？ 让组件实例对象（vc）可以访问到Vue原型上的属性和方法。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" c...原创 2022-03-23 14:37:36 · 765 阅读 · 0 评论 -
Vue学习——VueComponent解析
关于VueComponent： 1.school组件本质就是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。 2.我们只需要写<school>或<school></school>，Vue解析时会帮我们创建school组件的实例对象。即Vue会帮我们执行new VueComponent(options)。3.每次调用Vue.extend，返回的都是一个全新的VueComponent。4.关于this指向：...原创 2022-03-23 13:42:16 · 1327 阅读 · 0 评论 -
Vue学习——组件嵌套
可以在定义一个组件的时候使用components标签在其里面定义一个子组件，实现组件嵌套。如下面代码所示，在company组件中定义一个子组件student。 const company = Vue.extend({ components:{ study }<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...原创 2022-03-23 11:08:37 · 1021 阅读 · 0 评论 -
尚硅谷Vue学习——组件的几个注意点
1.关于组件名： 一个单词组成： 第一种写法（首字母小写）：study 第二种写法（首字母大写）：Study 多个单词组成： 第一种写法（Kebab-case命名）：my-study 第二种写法（CamelCase命名）：MyStudy（需要Vue脚手架支持） 备注： 组件名尽可能回避HTML中已有的元素名。例如：h2、H2等。 可以使用name配置项指定组件周期开发者工具中呈现的名字。...原创 2022-03-23 10:39:38 · 136 阅读 · 0 评论 -
尚硅谷Vue学习——非单文件组件
Vue使用组件的三大步骤： 一、定义组件（创建组件） 二、注册组件 三、使用组件（写组件标签）一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但区别如下： el不要写。因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器 data必须写成函数。避免组件被复用时，数据存在引用关系。 备注：使用template可以...原创 2022-03-21 14:45:09 · 606 阅读 · 0 评论 -
尚硅谷Vue学习——生命周期总结
常见生命周期钩子： mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。 beforeDestroy：清除定时器，解绑在定义事件、取消订阅消息等【收尾工作】。关于销毁Vue实例： 销毁后借助Vue开发者工具看不到任何信息。 销毁后自定义事件会失效，但原生DOM依然有效。 一般不会在beforeDestroy操作数据，因为此时操作了数据也不会再触发更新流程了。总结：生命周期钩子共有八个，包括beforeCreate、c...原创 2022-03-21 10:20:50 · 766 阅读 · 0 评论 -
尚硅谷Vue学习——生命周期
生命周期： 又名：生命周期回调函数、生命周期函数、生命周期钩子。 含义：Vue在关键时期帮我们调用的一些特殊名称的函数。 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。 生命周期函数中的this指向是vm或组件实例对象。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e...原创 2022-03-18 16:27:57 · 682 阅读 · 0 评论 -
尚硅谷Vue学习——自定义指令总结
目录一、定义语法二、配置对象中常用的3个回调三、备注一、定义语法 1.局部指令： new Vue({ directives:{指令名：配置对象或回调函数} }) 2.全局指令： vue.directive(指令名，配置对象或回调函数)二、配置对象中常用的3个回调 bind：指令与元素成功绑定时调用 inserted：指令所在元素被插入页面时调用 update：指令所在模...原创 2022-03-18 15:02:19 · 195 阅读 · 0 评论 -
尚硅谷Vue学习——自定义指令：对象式
需求：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wi原创 2022-03-18 14:33:47 · 351 阅读 · 0 评论 -
尚硅谷Vue学习——自定义指令：函数式
需求：定义一个v-big指令，功能和v-text功能类似，会把绑定的数值放大6倍。自定义函数的格式为directives:{ 自定义指令名(element,binding){ element.函数方法 = binding 对数据进行的操作}}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...原创 2022-03-18 11:15:51 · 155 阅读 · 0 评论 -
尚硅谷Vue学习——v-pre指令
作用：跳过其所在节点的编译过程。 可利用它跳过没有使用指令语法、没有使用插值语法的节点，会加快编译。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width.原创 2022-03-17 12:03:10 · 437 阅读 · 0 评论 -
尚硅谷Vue学习——v-once指令
作用：可以将一个会被改变的值变为在页面上不变的，实现初始数据与改变之后数据的比较。特点：v-once所在节点在初次动态渲染后，就视为静态内容了。 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont.原创 2022-03-17 11:09:34 · 146 阅读 · 0 评论 -
Vue学习——v-cloak指令
v-cloak指令(没有值) 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。 使用css配合v-cloak可以解决网速慢时页面展示出没有被渲染的数据(如{{xxx}})的问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte...原创 2022-03-17 10:59:29 · 1145 阅读 · 0 评论 -
尚硅谷Vue学习——v-html指令
1.作用：向指定节点中渲染包含html结构的内容。2.与插值语法的区别： v-html会替换掉节点中所有的内容，{{xx}}则不会 v-html可以识别html结构3.注意：v-html有安全性问题 在网站上动态渲染任意HTML非常危险，容易导致XSS攻击。 一定要在可信的内容上使用v-html，不要用在用户提交的内容上。<!DOCTYPE html><html lang="en"><head> <met...原创 2022-03-17 10:40:22 · 650 阅读 · 0 评论 -
尚硅谷Vue学习——v-text指令
目录已经学习的Vue指令：v-text指令已经学习的Vue指令：v-bind： 单向绑定解析表达式，可简写为：xxx v-model： 双向数据绑定 v-for： 遍历数组、对象和字符串 v-on： 绑定条件监听，可简写为@ v-if： 条件渲染（动态控制节点是否存在） v-else： 条件渲染（动态控制节点是否存在） v-show： 条件渲染（动态控制节点是否展示） v-text指令...原创 2022-03-16 17:01:59 · 205 阅读 · 0 评论 -
尚硅谷Vue学习——过滤器
定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。语法： 注册过滤器：Vue.filter(name,callback)或new Vue{filters:{}} 使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"备注： 过滤器也可以接收额外参数，多个过滤器能够串联。 并没有改变原本的数据，是产生新的对应的数据。<!DOCTYPE html><html lang="en"...原创 2022-03-16 16:42:48 · 113 阅读 · 0 评论 -
尚硅谷Vue学习——收集表单数据
若<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 若<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 若<input type="checkbox"/> 没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，布尔值) 配置了input的value属性 v-model的初始值是非...原创 2022-03-16 14:18:59 · 718 阅读 · 0 评论 -
尚硅谷Vue学习——数据监测
目录1.Vue会监视data中所有层次的数据。2.如何监测对象中的数据?3.如何监测数组中的数据？4.在Vue修改数组中的某个元素时一定要使用如下方法：Vue数据监测的原理1.Vue会监视data中所有层次的数据。2.如何监测对象中的数据? 通过setter实现监视，且要在new Vue时就传入要监测的数据。 对象中后追加的属性，Vue默认不做响应式处理。 如需给后添加的属性做响应式，请使用如下API： Vu...原创 2022-03-16 00:34:45 · 687 阅读 · 0 评论 -
尚硅谷Vue学习——列表过滤及排序
实现效果：升序后降序后列表过滤实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i...原创 2022-03-15 15:34:49 · 1042 阅读 · 0 评论 -
尚硅谷Vue学习——key的原理
目录react、vue中的key有什么用？(key的内部原理)1.虚拟DOM中key的作用2.对比规则旧虚拟DOM找到了与新虚拟DOM相同的key旧虚拟DOM中未找到与新虚拟DOM相同的key3.用index作为key可能会引发的问题若对数据进行：逆序添加、逆序删除等破坏顺序操作如果结构中还包含输入类的DOM4.开发中如何选keyreact、vue中的key有什么用？(key的内部原理)1.虚拟DOM中key的作用key是虚拟DOM对象的标识，当状态中的数据原创 2022-03-14 16:35:14 · 929 阅读 · 0 评论 -
尚硅谷Vue学习——列表渲染：基本列表
v-for指令 1.用于展示列表数据 2.语法：v-for="(item, index) in xxx" :key="yyy" 3.可遍历：数组、对象、字符串、指定次数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...原创 2022-03-14 15:24:01 · 113 阅读 · 0 评论 -
尚硅谷Vue学习——条件渲染
目录1.v-if2.v-show1.v-if 写法： v-if="表达式" v-else-if="表达式" v-else="表达式" 适用于：切换频率比较低的场景 特点：不展示的DOM元素直接被移除 注意：v-if可以和v-else-if、v-else一起使用，但结构不能被打断。2.v-show 写法：v-show="表达式" 适用于：切换频率较高的场景 特点：不能展示的DOM元素未被移除，仅...原创 2022-03-14 14:11:10 · 695 阅读 · 0 评论 -
尚硅谷Vue学习——绑定class和style样式
绑定样式：1.class样式 写法：class="xxx" xxx可以是字符串、对象、数组。 对象写法适用于：要绑定多个样式，个数不确定、名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。2.style样式 :style="{fontSize:xxx}"其中xxx是动态的 :style="[a,b]"其中a，b是样式对象<!DOCTYPE html><html lang="en"...原创 2022-03-14 11:05:06 · 609 阅读 · 0 评论 -
尚硅谷Vue学习——watch与computed的区别
computed与watch之间的区别： computed能完成的功能，watch都可以完成。 watch能完成的功能，computed不一定能完成。例如：watch可以进行异步操作。两个重要的小原则： 所有被Vue管理的函数，最好写成普通函数，这样this指向才是vm或者组件实例对象。 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等）最好写成箭头函数，这样this的指向才是vm或组件实例对象。<!DOCTYPE html>...原创 2022-03-11 14:34:57 · 476 阅读 · 0 评论 -
尚硅谷Vue学习——深度监视
深度监视： Vue中的watch默认监测对象内部值的改变(一层) 配置deep:true可以监测对象内部值的改变(多层)备注： Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以 使用watch时根据数据的具体结构，决定是否采用深度监视<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...原创 2022-03-11 11:23:44 · 242 阅读 · 0 评论 -
尚硅谷Vue学习——监视属性
监视属性watch 当被监视的属性变化时，回调函数自动调用，进行相关操作。 监视的属性必须存在，才能进行监视。 监视的两种方法：new Vue时传入watch配置 通过vm.$watch配置<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=...原创 2022-03-11 00:01:38 · 69 阅读 · 0 评论 -
尚硅谷Vue学习——计算属性
1.定义：要用的属性不存在，要通过已有属性计算得来。2.原理：底层借助了Pbject.defineproperty方法提供的getter和setter。3.get函数什么时候执行？ 初次读取时会执行一次。 当依赖的数据产生变化时会再次调用4.优势：与methods方法相比，内部具有缓存的机制，效率更高，调试方便5.备注： 计算属性最终会出现在vm上，直接读取使用即可。 如果计算属性需要被修改，则必须去写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。...原创 2022-03-10 18:02:03 · 528 阅读 · 0 评论 -
尚硅谷Vue学习——键盘事件
1.Vue中常用的按键别名： 回车 =》 enter 删除 =》 delete (捕获删除和退格键) 退出 =》 esc 空格 =》 space 换行 =》 tab （特殊，必须配合keydown使用） 上 =》 up 下 =》 down 左 =》 left 右 =》 right2.Vue提供别名的按键，可以使用按键原始的key值去绑定，但注意要专为kebab-case（短横线命名）3.系统修饰键（用法特殊）：...原创 2022-03-09 14:39:06 · 120 阅读 · 0 评论 -
尚硅谷Vue学习——事件修饰符
Vue中的事件修饰符： 1.prevent:阻止默认事件 2.stop：组织事件冒泡 3.once：事件只触发一次 4.capture：使用事件的捕获模式 5.self：只有event.target是当前操作的元素才触发事件。 6.passive：事件的默认行为立即执行，无序等待事件回调执行完毕<!DOCTYPE html><html lang="en"><head> <meta charset=...原创 2022-03-09 13:44:13 · 265 阅读 · 0 评论 -
尚硅谷Vue学习——事件的基本使用
1.使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名。2.事件的回调需要配置在methods对象中，最终会在vm上。3.methods中配置的函数不要用箭头函数，否则this不是vm。4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。5.@click="demo"和@click="demo(event)"效果一致，但后者可以传参。<!DOCTYPE html><html lang="en"><h.原创 2022-03-08 15:17:16 · 190 阅读 · 0 评论 -
尚硅谷Vue学习——数据代理
1.Vue中的数据代理：通过vm对象来代理data对象总属性的操作(读/写)2.Vue中数据代理的好处：更加方便的操作data中的数据3.基本原理：通过Object.defineProperty()把data对象中所有的属性添加到vm上。为每一个添加到vm上的属性都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。回顾Object.defineProperty方法<!DOCTYPE html><html .原创 2022-03-08 00:16:58 · 319 阅读 · 0 评论 -
尚硅谷Vue学习——理解MVVM
M：模型（Model）：对应data中的数据V：视图（view） ：模板VM：视图模型（ViewModel）：Vue实例对象总结发现1.data中的所有属性，最后都出现在了vm身上。2.vm身上所有的属性，及Vue原型上的所有属性在Vue模板中都可以直接使用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X.原创 2022-03-04 11:03:52 · 73 阅读 · 0 评论 -
尚硅谷Vue学习——el与data的两种写法
el与data有两种写法1.el的两种写法 new Vue时配置el属性 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值2.data的两种写法 对象式 函数式 如何选择：学习到组件时，data必须使用函数式，否则会报错。3.重要原则 有Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。<!DOCTYPE html><html lang="en">...原创 2022-03-03 10:16:30 · 368 阅读 · 0 评论 -
VS Code快捷生成用户代码片段操作，以vue为例
今天学习Vue看到别人创建代码块的时候一下子就完成了，才知道VS Code里也有和IDEA一样的快捷生成代码的功能，于是去设置了一下，以后省了不少时间，下面是操作：首先打开VS Code左下角的设置，选择里面的用户代码片段。接着选择vue.json或者新建全局代码片段文件，名字为vue.json打开后编辑你想要快捷生成的内容，格式与下面差不多"Print to console": { "prefix": "vue", "body": [ "new ...原创 2022-03-03 09:43:04 · 1383 阅读 · 0 评论 -
尚硅谷Vue学习——数据绑定
Vue中有两种数据绑定的方式： 1.单向绑定(v-bind)：数据只能从data流向页面。 2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。 备注： 1.双向绑定一般都应用在表单类元素上。如input、select等。 2.v-model：value 可以简写为 v-model，因为v-model默认收集的就是value值。代码示例：<!DOCTYPE html><html la...原创 2022-03-01 14:37:35 · 98 阅读 · 0 评论