一篇文章带你搞懂VUE基础知识
目录
- VUE是什么
- Vue中的核心插件
- Vue Router
- Vuex
- axios
- element-ui
- Vue前端整体架构
- 总结
VUE是什么
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue使用了双向数据绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这就是Vue的精髓所在,如下图所示
Vue中的核心插件
Vue Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为 Vuex
Vuex
是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
element-ui
element-ui是一款由饿了么前端团队开发的vue框架组件,里面集成了很多样式组件和功能组件,是一个非常好的框架。
Vue前端整体架构
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!
相关推荐
-
vue基础知识--axios合并请求和slot
一.axios合并请求 export default { data(){ return {} }, created(){ function getMsg(res1,res2){ console.log(res1) console.log(res2) } this.$axios.all([ this,axios.post('URL','key=value'), this.axios.get('URL') ]) .then(this.$axios.spread(getMsg)) //分发响应 .ca
-
vue.js声明式渲染和条件与循环基础知识
vue.js声明式渲染和条件与循环的具体内容,分享给大家 绑定 DOM 元素文本值 html代码: <div id="app"> {{ message }} </div> JavaScript代码: var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 运行结果:Hello Vue! 总结:数据和 DOM 已经被关联在一起,当我们改变app.message的数据,所渲染的的DOM元素
-
Vue 2.0入门基础知识之内部指令详解
1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-
-
vue-router相关基础知识及工作原理
前言 今天面试被问到 vue的动态路由,我竟然没有回答上来,感觉不是什么难得问题.好久没有看vue-router的文档,很多用的东西和概念没有对上.回来一看什么是动态路由就傻眼了.看来有必要把vue -router相关知识总结一下,好丢人的感觉. 单页面应用的工作原理 我理解的单页面工作原理是通过浏览器URL的#后面的hash变化就会引起页面变化的特性来把页面分成不同的小模块,然后通过修改hash来让页面展示我们想让看到的内容. 那么为什么hash的不同,为什么会影响页面的展示呢?浏览器在这里
-
详解mpvue开发微信小程序基础知识
一.mpvue简介 mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验.mp 即 mini program 的缩写. 二.mpvue快速入门 ① 通过脚手架引入mpvue模板 vue 3.0已经不支持vue init命令了,所以需要单独安装@vue/cli-init,安装好之后,就可以按以下操作步骤
-
vue 组件基础知识总结
组件基础 1 组件的复用 组件是可复用的Vue实例. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> </style> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <
-
一篇文章带你搞懂VUE基础知识
目录 VUE是什么 Vue中的核心插件 Vue Router Vuex axios element-ui Vue前端整体架构 总结 VUE是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. Vue使用了双向数据绑定,即
-
一篇文章带你搞懂Vue虚拟Dom与diff算法
前言 使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉,它扮演着很重要的角色.由于小编接触Vue比较多,React只是浅学,所以本篇主要针对Vue来展开介绍,带你一步一步搞懂它. 虚拟DOM 什么是虚拟DOM? 虚拟DOM(Virtual Dom),也就是我们常说的虚拟节点,是用JS对象来模拟真实DOM中的节点,该对象包含了真实DOM的结构及其属性,用于对比虚拟DOM和真实DOM的差异,从而进行局部渲染来达到优化性能的目的. 真实的元素节点: <div id="wr
-
一篇文章带你搞懂Python类的相关知识
一.什么是类 类(class),作为代码的父亲,可以说它包裹了很多有趣的函数和方法以及变量,下面我们试着简单创建一个吧. 这样就算创建了我们的第一个类了.大家可以看到这里面有一个self,其实它指的就是类aa的实例.每个类中的函数只要你不是类函数或者静态函数你都得加上这个self,当然你也可以用其他的代替这个self,只不过这是python中的写法,就好比Java 中的this. 二.类的方法 1.静态方法,类方法,普通方法 类一般常用有三种方法,即为static method(静态方法),cl
-
一篇文章带你搞懂Java线程池实现原理
目录 1. 为什么要使用线程池 2. 线程池的使用 3. 线程池核心参数 4. 线程池工作原理 5. 线程池源码剖析 5.1 线程池的属性 5.2 线程池状态 5.3 execute源码 5.4 worker源码 5.5 runWorker源码 1. 为什么要使用线程池 使用线程池通常由以下两个原因: 频繁创建销毁线程需要消耗系统资源,使用线程池可以复用线程. 使用线程池可以更容易管理线程,线程池可以动态管理线程个数.具有阻塞队列.定时周期执行任务.环境隔离等. 2. 线程池的使用 /** *
-
一篇文章带你搞懂JavaScript的变量与数据类型
目录 前言: 温馨提示: 变量 1.声明 2.赋值 3.二个语法小细节 变量的命名规范 为什么需要数据类型? 简单数据类型(基本数据类型) 数字型 字符串型 String 什么是数据类型的转换 1.转换为字符串 2.转换为数字型(重点) 转化为布尔型 总结 前言: 我不是搞前端,而是搞后端的.本命编程语言是java.学习js的嘛,因为看到室友能做出动态网页,而我只能做出静态网页,再加上下个学期要学所以提前来学习学习. 温馨提示: java和javsScript没有半毛钱关系,只是javaScri
-
一篇文章带你搞懂Go语言标准库Time
目录 前言 时间类型 时间戳 时间间隔 操作时间 Add Sub Equal Before After 定时器 时间格式化 解析字符串格式的时间 总结 前言 在编程过程中,我们经常会用到与时间和日期相关的各种需求,下面来介绍 Go 语言中有关时间的一些基本用法. 时间类型 time.Time 类型表示时间.可以通过 time.Now() 函数获取当前的时间对象,然后获取时间对象的年月日时分秒等信息. 示例代码如下: func main() { now := time.Now() //获取当前时间
-
一篇文章带你搞懂Java restful 接口开发
目录 1.RESTful 简介 a>资源 b>资源的表述 c>状态转移 2.RESTful 的实现 3.HiddenHttpMethodFilter 4.RESTful 案例 4.1.需求 4.2.git 代码位置 4.3.UserController 4.4.添加 HiddenHttpMethodFilter 4.5.测试效果 总结 1.RESTful 简介 REST:Representational State Transfer,表现层资源状态转移. a>资源 资源是一种看待服
-
一篇文章带你搞定SpringBoot中的热部署devtools方法
一.前期配置 创建项目时,需要加入 DevTools 依赖 二.测试使用 (1)建立 HelloController @RestController public class HelloController { @GetMapping("/hello") public String hello(){ return "hello devtools"; } } 对其进行修改:然后不用重新运行,重新构建即可:只加载变化的类 三.热部署的原理 Spring Boot 中热部
-
一篇文章带你搞定SpringBoot不重启项目实现修改静态资源
一.通过配置文件控制静态资源的热部署 在配置文件 application.properties 中添加: #表示从这个默认不触发重启的目录中除去static目录 spring.devtools.restart.exclude=classpath:/static/** 或者使用: #表示将static目录加入到修改资源会重启的目录中来 spring.devtools.restart.additional-paths=src/main/resource/static 此时对static 目录下的静态
-
一篇文章带你搞定 springsecurity基于数据库的认证(springsecurity整合mybatis)
一.前期配置 1. 加入依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.10</version> </dependency> <dependency> <groupId>mysql</groupId> &
随机推荐
- go语言实现处理表单输入
- 用来通知论坛有新贴子的hta代码
- AngularJS 中的事件详解
- js mac地址 正则表达式
- Objective-C中类和方法的定义以及协议的使用
- 全新感受Oracle 9i
- ASP.NET中 Panel 控件的使用方法
- 使用.NET存储XML数据的方法
- php 多关键字 高亮显示实现代码
- PHP5 面向对象程序设计
- PHP使用静态方法的几个注意事项
- C#代码实现短信验证码接口示例
- ViewDragHelper实现QQ侧滑效果
- mysql 本地数据库如何从远程数据库导数据
- MySQL创建全文索引分享
- 扩展你的 PHP 之入门篇
- AJAX初级教程之初识AJAX
- SQLServer 2008中通过DBCC OPENTRAN和会话查询事务
- 必须会的SQL语句(四) 数据删除和更新
- 浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法