- 博客(141)
- 收藏
- 关注
RSS订阅原创 （三十七）vue 项目中常用的2个Ajax库
先看一个github搜索案例有一个搜索框，输入相关用户名，就能模糊搜索出用户，展现到下方第一步：我们用到了第三方样式库bootstrap，首先需要在public文件夹见一个css文件夹，放入样式库，然后在index.html页面进行引入第二步：拆分组件，搜索跟文本框为一个组件Search，展示用户为一个组件List。
2023-02-20 20:18:28
501
1
原创 （三十六）Vue解决Ajax跨域问题
我们知道vue脚手架默认是在localhost：8080这个端口运行，而我们需要访问上面两台服务器，一般来说请求会被CORS策略阻止。若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）其次准备两台服务器，这里使用node.js+express搭建。vue脚手架提供一种解决方案，那就是使用代理服务器代理发送请求。那么再次请求学生资源时就会优先匹配文件students的内容。vue跨域访问，被CORS策略阻止。启动服务器server1。启动服务器server2。
2023-02-18 22:54:35
2544
原创 （三十五）Vue之过渡与动画
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js。
2023-02-17 14:46:35
546
原创 （三十四）Vue之新生命周期钩子nextTick
首先先看这一个需求，给每个任务项新增一个编辑按钮当编辑按钮点击时，任务项就会变成文本框，并且自动获取焦点。
2023-02-16 23:34:14
277
原创 （三十三）Vue之消息订阅与发布
我们把给Item组件与App组件的交互从全局事件总线替换成消息订阅与发布。这种方式的思想与全局事件总线很相似，一种组件间通信的方式，适用于。第五步：App组件在beforeDestroy钩子中取消消息订阅。需要引入一个消息订阅与发布的第三方实现库: PubSubJ。第五步：在beforeDestroy钩子中取消消息订阅。第二步：在Item组件与App组件使用。把第三方实现库PubSubJ安装。第三步：Item组件接收数据。第四步：App组件提供数据。第二步：在用到的组件使用。
2023-02-15 15:03:56
1038
1
原创 （三十二）Vue之全局事件总线
，它不属于任何一个组件，跟任何组件都没关系，任何两个组件想传信息都需要通过这个组件，譬如组件A向组件B传递信息，首先组件B给组件X绑定自定义事件，这个事件的回调在组件B身上，然后在A组件去触发组件X身上的组件B绑定的自定义事件，把数据传过去，组件B的回调就收到了数据，这样就实现了任意组件的通信。我们给Item组件与App组件的交互改成全局事件总线，之前Item用App的数据通过props先传给List组件，List组件再传给Item组件进行使用。全局事件总线一种组件间通信的方式，适用于。
2023-01-06 20:39:27
729
原创 （三十一）Vue之自定义事件
自定义事件一种组件间通信的方式，适用于：子组件 ===> 父组件例如：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。我们把Footer组件与App组件的交互从props改为自定义事件第一步：在App组件里给Footer组件绑定自定义事件第二步：定义回调，这个回调之前已经定义好了，直接调用即可第三步：在Footer组件定义触发第四步：在App组件解绑。
2023-01-01 22:58:32
302
原创 （三十）Vue之回顾本地存储webStorage
我们可以考虑把数据存储在localStorage里，页面加载时读取localStorage里的数据，读取不到就赋给一个空数组，然后采用监视属性，对todos进行深度监视，当todos发生改变时，把数据重新写入localStorage里。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.用于长久保存整个网站的数据，保存的数据没有过期时间，需要手动清除才会消失。 该方法会清空存储中的所有数据。
2022-12-31 20:10:39
1684
原创 （二十九）Vue之组件化编码流程
先看一个需求：TodoList案例功能：添加任务；任务项可以勾选，表示已完成任务；鼠标移动到任务项高亮并显示删除按键，点击删除按键可以进行删除单个任务项；左下角展示已完成和全部的任务项数，有一个勾选框，勾选可以让任务项全部勾选上，有一个清除已完成任务的按钮，点击可以清除勾选的任务项。下面我们就来完成这个功能。
2022-12-30 23:23:01
645
原创 （二十八）Vue组件的样式
在vue开发过程中，当我们引入第三方组件库时(如使用element-ui)，需要在局部组件中修改第三方组件库样式，而又不想去除scoped属性造成组件之间的样式覆盖。），通过观察渲染的DOM结构可以发现，在DOM结构以及css样式上加了唯一的标识，使样式唯一且只作用于含有该属性的DOM。如果把App组件的scoped去掉：则会影响内部组件的样式，DOM节点不会给App组件里的内容添加标识。还有一个lang属性，是指定使用哪种语言作为样式语言，若未指定样式语言，默认使用CSS样式。
2022-12-29 12:17:00
580
原创 （二十七）Vue之插件
通过import引入后，然后在调用 new Vue() 之前通过 Vue.use(插件名) 注册插件；插件通常用来为 Vue 添加全局功能（增强Vue）。插件的功能范围没有严格的限制。一般会在这里面定义全局过滤器、全局指令、全局混入（合）、添加实例方法等等。需要实现什么功能只需要写在install里面即可。插件一个js文件，这个js文件就是插件文件，
2022-12-28 21:52:29
141
原创 （二十六）Vue之mixin混入/合
效果：同样是x的属性名相同以组件为主，影响注册之后所有创建的每个 Vue 实例，Student组件、School组件、App组件及Vue实例，所以输出4个666，并且通过vue开发者工具我们都能发现每个实例都有数据x和y。在有些业务逻辑中，发现在多个组件的功能业务逻辑一样，可以把多个组件共用的配置提取成一个混入对象，通过配置将这些混入对象配置进组件里，这些混入将会被合并到最终的选项中。使用Vue.mixin()配置，这种配置全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。
2022-12-27 17:46:12
334
原创 （二十五）Vue之props配置项
如果组件也对props进行修改，那么就会打破数据流的单一性，因为从组件来看没法确保这个值的生产过程是一致的，从而引入混乱，进而导致组件可能会变得很难维护，所以不建议组件本身去修改props，而是只读取props的值就好。约定props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么可以复制props的内容到data中一份，然后去修改data中的数据。当然，要传值的时候是数字类型，要使用v-bind的形式。父组件：使用在组件标签里使用。
2022-12-26 22:26:18
527
原创 （二十四）Vue之ref属性
一般来说我们可以使用document.getElementById()，获取上方的DOM元素，但是我们使用的是vue，是用来简化对DOM的操作的，我们亲自去操作DOM，就没有体现出vue的作用，所以要使用ref。作用：应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象。如果在组件上使用ref，那么输出的是改组件的VueComponent实例对象。第一步：在需要操作的DOM节点使用ref打标识，标识名称随意。第二步：使用$refs.标识名获取改元素的DOM节点。
2022-12-25 15:23:05
167
原创 （二十二）Vue之单文件组件
注意：我们打开index.html页面什么都没有，这是因为我们使用了ES6语法，浏览器识别不了，需要在webpack或官方的脚手架里运行才行，这个以后再说。而单文件组件就是真正意义上的局部功能代码和资源的集合，整合形成一个个的.vue文件。把之前的在非单文件组件定义的Student组件和School组件用单文件组件定义。vue文件写完之后，需要使用ES6模块化暴露给外界，让需要使用的文件引入。非单文件组件是在一个文件里面定义众多组件，这会使得结构混乱。将一个js文件按照功能作用分解为多个js文件。
2022-12-23 15:45:17
404
原创 （二十一）Vue之非单文件组件
使用Vue的API extend，传一个配置对象，这个配置项几乎和实例Vue一样，但也有点区别；1.el不要写，为什么？——— 因为最终所有组件都要被一个vm管理，由vm决定服务于哪个容器。2.data必须写成函数，为什么？———— 避免组件被复用时，数据存在引用关系。备注：使用template可以配置组件结构。
2022-12-22 16:41:22
461
原创 （二十）Vue之组件和模块概念
组件是可复用的 Vue 实例, 把一些公共的模块抽取出来，然后写成单独的的工具组件或者页面，在需要的页面中就直接引入即可，我们可以将其抽出为一个组件进行复用。
2022-12-21 14:05:06
436
原创 （十九）Vue之生命周期
挂载流程，更新流程、销毁流程挂载流程将要创建：调用beforeCreate函数创建完毕：调用created函数将要挂载：调用beforeMount函数挂载完毕（重要）：调用mounted函数更新流程将要更新：调用beforeUpdate函数更新完毕：调用updated函数销毁流程将要销毁（重要）：调用beforeDestroy函数销毁完毕：调用destroyed函数1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2022-12-20 15:43:46
401
原创 （十八）Vue之自定义指令
(1).局部指令：在new Vue实例中配置directives:{指令名:配置对象} 或 directives{指令名:回调函数}(2).全局指令：在new Vue实例外配置Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)回调函数函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。el: 指令所绑定的元素，可以用来直接操作 DOM。
2022-12-17 22:16:48
300
原创 （十七）Vue之内置指令
当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。效果：点击超链接会把用户的cookie携带过去，如果这个网址是一个非法网址，俗称钓鱼网站，就会严重产生安全问题。与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。效果：v-text会替换掉节点中的内容，而插值表达式不会。效果：不管怎么加，v-once修饰的节点都不会再更新。严重注意：v-html有安全性问题！
2022-12-16 23:01:53
115
原创 （十六）Vue之过滤器
先看一个需求：给一个时间戳，然后把时间戳格式化显示出来格式化时间戳有很多种方法，我们这里使用第三方库dayjs提取码：w7d9。
2022-12-15 15:10:44
401
原创 （十五）Vue之收集表单数据
若收集的是文本框数据，则v-model收集的是value值，用户输入的就是value值，并且这个value是字符串形式的，如果想收集数字形式可以使用修饰符number。若收集的是下拉列表，那么v-model收集的是value值，用户选择哪个选项，就是哪个选项的value值。若收集的是单选按钮，则v-model收集的是value值，且要给标签配置value值。若收集的是文本域，那么v-model收集的是value值，用户输入的就是value值。
2022-12-14 14:16:47
227
原创 （十四）Vue之监测数据改变的原理
先看一个需求：使用列表渲染出一组数据，然后点击按钮更新其中一个信息效果：无论怎么点按钮，数据都不会改变，打开Vue开发者工具，发现数据改变了，但是页面没有改变，不奏效，vue没有承认你这次修改。效果：点击按钮，页面数据改变，Vue开发者工具也改变。
2022-12-13 16:00:06
389
原创 （十三）Vue之列表渲染
效果：在输入框输入内容，发现使用index作为key，会和不写key一样（因为在vue里面，遍历如果不写key，vue会默认使用索引（index）作为这个遍历的key），会出现结构问题。语法：v-for=“(number,index) in/of xxx” :key=“yyy”语法：v-for=“(item, index) in/of xxx” :key=“yyy”语法：v-for=“(value,key) in/of xxx” :key=“yyy”会产生错误DOM更新 ==> 界面有问题。
2022-12-12 20:48:11
430
原创 （十二）Vue之条件渲染
优缺点：优点是即可以使用v-if也可以使用v-show，缺点就是一定程度上会破坏结构，例如写了个h2样式，如果使用div包裹，就可能找不到这个h2标签。template有模板的意思，特点是不影响结构，对里面的东西进行了包裹，最终展示的时候会把template标签去掉，只显示里面的内容。v-show，默认为true，如果为false，底层实现是style=“display: none;v-if，默认为true，如果为false，底层实现是直接把这个节点删除。写法：v-show=“xxx”
2022-12-11 15:56:25
333
原创 （十一）Vue之绑定样式
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。
2022-12-10 16:43:16
128
原创 （八）Vue之事件处理
Vue学习目录上一篇：（六）Vue之数据代理事件的基本使用：注意：methods中配置的函数，不要用箭头函数！否则this就不是vm或组件实例对象；事件修饰符按键修饰符Vue为 v-on 提供了事件修饰符来处理 DOM 事件细节通过由点 . 表示的指令后缀来调用修饰符。Vue中的事件修饰符：注意：修饰符可以连续写，比如@click.stop.preventprevent是用来阻止默认事件例如跳转是a标签的默认行为，我们可以使用preventDefault()方法阻止默认行为，当在vue当中可以不
2022-12-07 20:56:34
660
原创 （七）Vue之数据代理
Object.defineProperty方法的作用是：向对象添加特性，或修改现有特性的属性。源码：defineProperty有三个参数，分别是设置属性的值控制属性是否可以枚举（遍历），默认值是false上面程序进行遍历：遍历不出age属性加个enumerable属性配置：遍历出age属性控制属性是否可以被修改，默认值是false上面程序，修改age值：修改后，person的值还是原来值加个writable属性配置可以修改age属性了：控制属性是否可
2022-12-06 16:04:34
296
原创 （六）Vue之MVVC
Vue学习目录上一篇：（五）Vue之data与el的两种写法MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVC参考：MVC架构模式MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。View层的数据（表单、输入类元素等）通过ViewModel层的DOM监听器，传输到Model层。Model层的数据通过ViewModel层的数据绑定器，展示到View层。我们不难发现：
2022-12-05 15:09:44
932
原创 （五）Vue之data与el的两种写法
Vue学习目录上一篇：（四）Vue之数据绑定容器：el的两种写法(1).new Vue时候配置el属性。经过3秒挂载：效果：一开始没有挂载，页面显示{{name}}，经过三秒后，页面解析，显示jack没有经过3秒：经过3秒：这个函数式写法一般会简写：注意1：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。注意2：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。这是因为在箭头函数里是没有this的，会向外寻找th
2022-12-04 14:03:40
320
原创 （四）Vue之数据绑定
上一篇：（三）Vue之模板语法Vue中有2种数据绑定的方式：数据只能从data流向页面。绑定形式有两种：Vue数据：使用：效果：改变数据，打开Vue开发者工具，数据不变：数据不仅能从data流向页面，还可以从页面流向data。写法：v-model:value=”xxx“，可简写成v-model=“xxx”注意：这里的xxx就不能写js表达式了，这里写的是data里面要绑定的属性名，并且只能绑定一个。v-model只能应用于表达类元素（输入类元素）Vue数据：使用：效果：第一个文本框绑定了
2022-12-03 17:03:59
593
原创 （三）Vue之模板语法
写法：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。备注：Vue中有很多的指令，且形式都是：v-?例如：在容器中加个x属性，我们知道这个属性最终会渲染到DOM中，并且写什么就渲染什么。写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…效果：v-bind这个指令加上冒号没有渲染。功能：用于解析标签体内容。
2022-12-02 15:42:04
194
原创 （二）初识Vue
在使用 Vue 时，推荐在浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。插值表达式是Vue.js中实现数据渲染到页面的一种手段，可以直接让数据从模型到视图，不需要dom操作，容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法(插值表达式)下载完之后，打开你浏览器的扩展管理，把它拉进去，就会提示你安装。想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。真实开发中只有一个Vue实例，并且会配合着组件一起使用。
2022-12-01 22:15:34
582
原创 （一）Vue概述
什么意思呢？简单应用：对于一个简单应用来说，只需要引入一个轻巧的核心库，就可以完成数据的展示复杂应用：对于一个复杂应用来说，可以引入各种Vue插件，完成功能。
2022-11-30 13:50:03
705
原创 （十九）Spring中的八大模式
Spring 中配置 DataSource 的时候，这些dataSource可能是各种不同类型的，比如不同的数据库：Oracle、SQL Server、MySQL等，也可能是不同的数据源：比如apache 提供的org.apache.commons.dbcp.BasicDataSource、spring提供的org.springframework.jndi.JndiObjectFactoryBean等。策略模式是行为性模式，调用不同的方法，适应行为的变化 ，强调父类的调用子类的特性。
2022-11-29 17:08:32
369
原创 （十八）Spring6集成MyBatis3.5
放在类的根路径下，有些系统级配置spring配置文件没办法完成，可以在mybatis核心配置文件配置，例如懒加载等。一定要注意，创建这个目录。并且要和Mapper接口包对应上。接口叫做AccountMapper，配置文件必须是AccountMapper.xml。事务管理器DataSourceTransactionManager：注入数据源。这里只开启日志，其他配置到spring.xml中。Mapper扫描配置器：指定扫描的包。启用事务注解：注入事务管理器。数据库数据：转账成功。
2022-11-28 16:14:47
631
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人