![](https://img-blog.csdnimg.cn/e09fb09c78374f90990f37c2444c68d1.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue2笔记
Vue笔记
我要学前端!
从零开始学前端
展开
-
Vue_路由
理解:一个路由(router)就是一组映射关系(key-value),多个路由需要路由器进行管理。前端路由:key是路径,value是组件。原创 2023-04-06 10:29:39 · 183 阅读 · 1 评论 -
Vuex_模块化和命名空间
1.目的:让代码更好维护,让多种数据分类更加明确。原创 2023-04-04 16:23:15 · 115 阅读 · 0 评论 -
Vuex_多组件共享数据
Vuex实现多组件数据共享的方法原创 2023-04-04 15:34:49 · 81 阅读 · 0 评论 -
Vuex中getters的使用
1.概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。原创 2023-04-03 17:53:48 · 130 阅读 · 0 评论 -
Vuex的工作原理、环境搭建和基本使用
在Vue中事件集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(度、写),也是一种组件间通信的方式,且适用于任意组件间通信。原创 2023-04-03 14:53:39 · 198 阅读 · 0 评论 -
Vue全局事件总线
①接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,4. 最好在beforeCreate钩子中,用$off去解绑。1. 一种组件间通信的方式,适用于任意组件间通信。事件的回调留在A组件自身。2. 安装全局事件总线。原创 2023-03-30 15:34:24 · 66 阅读 · 0 评论 -
组件的自定义事件
组件的自定义事件原创 2023-03-30 11:04:02 · 34 阅读 · 0 评论 -
web本地存储
web本地存储localStorage与sessionStorage总结原创 2023-03-29 16:13:14 · 65 阅读 · 0 评论 -
Vue cli中的mixin混入、插件、scoped样式
mixin 混入插件scoped样式原创 2023-03-28 17:01:40 · 46 阅读 · 0 评论 -
Vue中的配置项props
传递数据:App.vue中代码如下 接收数据:子组件MyStudent.vue中不使用配置项props第一种方式(只接收)第二种方式(限制类型)第三种方式(限制类型、限制必要性、指定默认值)如何修改呢?props不能直接修改,可以通过修改data中的数据进行修改。总结原创 2023-03-28 14:59:48 · 140 阅读 · 0 评论 -
Vue中的ref 属性
2. 应用在html标签上获取的是真实的DOM元素,应用在组件标签上是组件实例对象(vc).1. 被用来给元素或子组件注册引用信息(id的替代者)。原创 2023-03-28 09:41:06 · 188 阅读 · 0 评论 -
20_vue cli 脚手架
如果报错,可以先下载,再安装即可。用vue cli 创建一个vue项目vue_test打开所创建的vue_test文件夹如下 哪些文件或文件夹不想接收Git的管理,在此文件中配置好。ES6转ES5的配置文件。用于放一些静态资源,如.png图片,视频等。public文件夹favicon.ico:页签图标index.html:要展示的页面main.js中的render函数为什么要引入精简版vue,而不引入完整版? 打包的时候能够节省空间,所以用到render函数 总结Vue 脚手架隐原创 2023-03-27 17:29:33 · 74 阅读 · 0 评论 -
18_Vue非单文件组件
目录基本使用几个注意点 组件的嵌套Vuecomponent 构造函数原创 2023-03-24 18:02:11 · 28 阅读 · 0 评论 -
17_模块、组件、模块化、组件化
模块理解:向外提供特定功能的js 程序,一般就是一个js文件为什么: js 文件很多很复杂作用:复用js,简化js的编写,提高js运行效率组件理解:用来实现局部(特定)功能效果的代码集(html/css/js/image.....)为什么:一个界面的功能很复杂作用:复用编码,简化项目编码,提高运行效率模块化当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。组件化当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用。原创 2023-03-24 15:15:10 · 71 阅读 · 0 评论 -
16_Vue自定义指令
new Vue({directives:{指令名:配置对象}})或new Vue({directive{指令名:回调函数}})Vue.directive(指令名,配置对象)或Vue.directive(指令名,回调函数)需求:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍//big函数何时会被调用?1.指令与元素成功绑定时(一上来) 2.指令所在的模板被重新解析时-- 需求:定义一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍 -->原创 2023-03-23 12:06:57 · 103 阅读 · 0 评论 -
15_Vue内置指令
v-text指令1.作用:向其所在的节点中渲染文本内容2.与插值语法的区别:v-text会替换掉节点中的内容,插值语法{{xx}}则不会。v-html指令1.作用:向指定节点中渲染包含html结构的内容2.与插值语法的区别v-cloak指令v-once指令v-pre指令原创 2023-03-21 17:36:33 · 43 阅读 · 0 评论 -
15_Vue内置指令
v-text指令1.作用:向其所在的节点中渲染文本内容2.与插值语法的区别:v-text会替换掉节点中的内容,插值语法{{xx}}则不会。v-html指令v-cloak指令(没有值)v-once指令v-pre指令原创 2023-03-21 17:16:41 · 41 阅读 · 0 评论 -
14_Vue中的过滤器
过滤器定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。语法:1.注册过滤器: 全局注册:Vue.filter(name,callback) 或 局部注册:new Vue{filters:{ }};2.使用过滤器:{{ xxx | 过滤器名}}或 v-bind:属性 ="xxx |过滤器名"。备注:1.过滤器也可以接收额外参数、多个过滤器也可以串联;2.并没有改变原本的数据,是产生新的对应的数据。得到一个时间戳,显示格式后的时间计算属性实现、methods实现、过滤器实原创 2023-03-21 14:08:44 · 58 阅读 · 0 评论 -
13_Vue收集表单数据
收集表单数据若:,则v-model收集的是value值,用户输入的就是value值。若:,则v-model收集的是value值,且要给标签配置value值。若:,1.没有配置input的value属性,那么收集的就是checked (勾选 or 未勾选,是布尔值);2.配置input的value属性:(1)v-model的初始值是非数组,那么收集的就是checked原创 2023-03-21 10:13:09 · 32 阅读 · 0 评论 -
11_Vue条件渲染
Vue条件渲染1.V-if(1).v-if="表达式"(2).V-else-if="表达式"(3).V-else="表达式"适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意: v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。v-if可以搭配template使用,不会改变结构,template不能把和v-show搭配使用。2.V-show写法:v-show="表达式"适用于:切换频率较高的场景。特点:不展示的DOM元素未被移除,仅仅原创 2023-03-17 16:38:15 · 36 阅读 · 0 评论 -
10_Vue中class与style样式绑定
Vue中class与style样式绑定概述1. 在应用界面中,某个(些)元素的样式是变化的;2. class/style绑定就是专门用来实现永泰样式效果的技术。class 绑定1.class样式写法:class="xxx”xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。1 :class='xxx'2 表达式是字符串:'classA'原创 2023-03-17 15:37:54 · 216 阅读 · 0 评论 -
Vue中computed和watch之间的区别
computed和watch之间的区别1.computed能完成的功能,watch都可以完成。2.watch能完成的功能,computed不一定能完成,例如: watch可以进行异步操作。---两个重要的小原则1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数(箭头函数的this指向升级作用域的this),这样this的指向才是vm 或 组件实例对象。原创 2023-03-16 18:02:36 · 88 阅读 · 0 评论 -
09_Vue监视属性
Vue监视属性:监视属性watch1.当被监视的属性变化时,回调函数自动调用,进行相关操作;2.监视的属性必须存在,才能进行监视!!!3.监视的两种写法:(1)new Vue时传入watch配置(2)通过vm.$watch监视原创 2023-03-16 17:17:34 · 61 阅读 · 0 评论 -
08_Vue计算属性
Vue计算属性:什么是计算属性?计算属性的原理?计算属性的优势原创 2023-03-16 15:42:22 · 39 阅读 · 0 评论 -
07_Vue事件处理
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)” 效果一致,但后者可以传参。原创 2023-03-16 09:54:49 · 47 阅读 · 0 评论 -
06_Vue中的数据代理
更加方便的操作data中的数据(vm._data.name就可以直接写为vm.name)通过object.defineProperty()把data对象中所有属性添加到vm上。目前只需知道vm._data就是data数据对象即可,数据劫持以后再具体展开讲解。在getter/setter内部去操作 (读/写) data中对应的属性。为每一个添加到vm上的属性,都指定一个getter/setter。数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)通过vm对象来代理data对象中属性的操作(读/写)原创 2023-03-15 18:17:27 · 32 阅读 · 0 评论 -
05_MVVM模型-尚硅谷Vue笔记
MVVM模型原创 2023-03-15 15:43:59 · 44 阅读 · 0 评论 -
03_Vue数据绑定-尚硅谷Vue笔记
Vue中有2种数据绑定的方式:1.单向绑定(v-bind): 数据只能从data流向页面。2.双向绑定(v-model): 数据不仅能从data流向页面,还可以从页面流向data。备注:1.双向绑定一般都应用在表单类元素上(如: input、select等)。2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。原创 2023-03-15 14:25:20 · 46 阅读 · 0 评论 -
04_Vue中el与data的两种写法-尚硅谷笔记
Vue中el与data的两种写法原创 2023-03-15 15:12:23 · 61 阅读 · 0 评论 -
01_初识Vue-尚硅谷Vue笔记
尚硅谷笔记-初识Vue创建一个Vue实例原创 2023-03-15 10:43:02 · 97 阅读 · 0 评论 -
02_模板语法-尚硅谷Vue笔记
Vue 模板语法插值语法 和 指令语法原创 2023-03-15 12:01:13 · 68 阅读 · 0 评论