vue
关注
分享
扫一扫
文章平均质量分 85
vue.js的学习笔记
ChengLang_111
一枚正在学习Java的小白白
展开
-
10-Vue网络模块封装
选择什么网络模块?vue中发送网络请求有非常多的方式, 那么, 在开发中, 如何选择呢?选择一: 传统的Ajax是基于XMLHttpRequest(XHR)为什么不用它呢?非常好解释, 配置和调用方式等非常混乱.编码起来看起来就非常蛋疼.所以真实开发中很少直接使用, 而是使用jQuery-Ajax选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax相对于传统的Ajax非常好用.为什么不选择它呢?首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用jQuery了原创 2021-01-26 12:09:16 · 198 阅读 · 0 评论 -
09-Vue-Vuex
认识Vuex官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。状态管理到底是什么？状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。其实，你可以简单的将其看成把需要多个组件共享的变量全部存储原创 2021-01-25 17:34:44 · 79 阅读 · 0 评论 -
Vue 脚手架
什么是Vue CLI如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作，那无以效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。CLI是什么意思?CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.Vue CLI原创 2021-01-22 18:39:10 · 149 阅读 · 0 评论 -
08-Vue(实战TabBar一)
效果图 。先开发底部导航栏base样式：body { padding: 0; margin: 0;}components :TabBar.vue:<template> <div id="tab-bar"> <!-- 插槽 --> <slot></slot> </div></template><script>import TabBarItem from原创 2021-01-22 11:49:42 · 166 阅读 · 0 评论 -
07-VueRouter
第一步.导入路由对象，并且调用 Vue.use(VueRouter)第二步：创建路由实例，并且传入路由映射配置第三步：在Vue实例中挂载创建的路由实例第四步：使用路由<router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签.<router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件.网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和<router-view>原创 2021-01-21 18:08:53 · 355 阅读 · 0 评论 -
06-Vue插槽Slot
slot基本使用了解了为什么用slot，我们再来谈谈如何使用slot？在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。可以给定插槽默认值 ， 如果没有传值 则使用默认值 <slot> <button>我是插槽</button> </slot> <!--可以给定插槽默认值 ， 如果没有传值 则使用默认值--><!DOCTYPE html原创 2021-01-18 11:23:15 · 307 阅读 · 0 评论 -
05-Vue父子组件的通信
在上一个小节中，我们提到了子组件是不能引用父组件或者Vue实例的数据的。但是，在开发中，往往一些数据确实需要从上层传递到下层：比如在一个页面中，我们从服务器请求到了很多的数据。其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。如何进行父子组件间的通信呢？Vue官方提到通过props向子组件传递数据通过事件向父组件发送消息props基本用法在组件中，原创 2021-01-18 11:00:08 · 75 阅读 · 0 评论 -
04-Vue 组件化
什么是组件化？人面对复杂问题的处理方式任何一个人处理信息的逻辑能力都是有限的所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。但是，我们人有一种天生的能力，就是将问题进行拆解。如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。组件化也是类似的思想如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自原创 2021-01-08 17:52:41 · 93 阅读 · 0 评论 -
03-VUE指令
Mustache/{{}}如何将data中的文本数据，插入到HTML中呢？第一章学习过了，可以通过Mustache语法(也就是双大括号)我们可以像下面这样来使用，并且数据是响应式的v-once但是，在某些情况下，我们可能不希望界面随意的跟随改变这个时候，我们就可以使用一个Vue的指令v-once:该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。v-html某些情况下，我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{{}原创 2021-01-08 11:45:15 · 129 阅读 · 0 评论 -
02-Vue中的MVVM以及Vue的生命周期
什么是MVVM呢？通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)https://zh.wikipedia.org/wiki/MVVM维基百科的官方解释，我们这里不再赘述。我们直接来看Vue的MVVM计数器的MVVM上一篇我们的小案例计数器中就有严格的MVVM思想View依然是我们的DOMModel就是我们我们抽离出来的objViewModel就是我们创建的Vue对象实例创建Vue实例传入的options你会发现，我们在创建Vue实例的时候，传入原创 2021-01-08 10:34:59 · 127 阅读 · 0 评论 -
01-VUE初体验
简单认识一下VuejsVue (读音 /vjuː/，类似于 view)，不要读错。Vue是一个渐进式的框架，什么是渐进式的呢？渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。Vue有很多特点和Web开发中常见的高级功能解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM这些特点，你原创 2021-01-08 10:14:12 · 120 阅读 · 0 评论