vue新手入门——谈谈理解
毕业到现在大概4个月了,从java开发慢慢转到前端开发(其实是因为公司前端人不够),然后开始接触vue。所以我也只是一只小菜鸟。
首先附上vue的官网:vue官网
然后附上一些常用的vue框架,组件之类的资源库Awesomes资源库。
Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
首先谈谈我对Vue的理解,vue是一个渐进式框架。对“渐进式框架”我的理解大概就是:
1.你在使用的时候只需要对vue提供的内容做加法。当你只是想实现一个简单的双向绑定的时候,你可以只使用vue关于data(){}这部分的内容。你可以简单的把它当成一个js库,来保证在最大限度上不改动源代码的基础上,使用它的特性。
2.进一步你可以直接用Vue来管理页面,这样你就不用去操作DOM了,把DOM的操作全交给vue底层去实现,把一些公用的部分抽出来做成组件,比如menu,list,input,alert,这样代码的简洁性和可复用性会得到提升,一方面会减少你编写重复的代码,另一方面你的关注点从jq的DOM操作,变成数据驱动DOM变化。你可以很方便的使用v-if,v-show,v-bind:class这些指令绑定变量来控制DOM如何变化,渲染还是不渲染,显示还是不显示,该怎么显示。通过变量的变化来驱动DOM的变化。
3.经过学习和使用,你渐渐发现vue还可以具有路由功能,实现前端页面的路由(vue-router);然后发现在一些复杂应用中有很多组件的状态同时依赖于某一个或多个变量,这时候我们就可以把该变量抽离出来,通过vuex做状态流管理;做到这里jq所能做的基本功能都能实现了,那么vue又如何与后台进行数据交互呢,官方推荐使用axios库。
所以我觉得这个渐进可以从多个维度去看待,从开发上,我们可以很轻松的从传统的html开发转到vue开发,可以一个节点一个节点的去靠近它。从使用上,我们不是一个很大的全家桶,然后一点一点的裁剪他的功能,使其符合我们的预期,而是做加法,把某几个很小的功能加成一个符合我们预期的功能(可能这就是自底向上增量开发?)。最后从vue页面来说,我们实现一个页面其实是多个组件的组合,我们可以通过<route-view>来控制页面哪个部分是应该被路由的,页面的可复用性和方便性会得到很大提升,对于页面而已,一个页面其实是多个组件渐进的结果。
因为我前端基础比较薄弱,就不一开始给各位大刀阔斧的讲什么vue的底层实现(其实我也讲不明白)。首先还是从怎么搭建一个vue页面开始。
1.直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。(这样子用起来的时候好像要麻烦一点点)
2.通过vue-cli官方脚手架来快速搭建一个大型单页项目。
以上见解有些偏差和错误之处,还请各位指教。
vue新手入门——谈谈理解的更多相关文章
- vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)
前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...
- Vue新手入门教程
谈谈我对Vue的理解 vue就是前端上的Java,前端上的C#.有个前端的虚拟DOM引擎,设计理念和Java,C#类似.我们只需要告诉DOM应该显示什么,而不用去操作DOM元素. 如何引用? 下面是一 ...
- vue新手入门指导,一篇让你学会vue技术栈,本人初学时候的文档
今天整理文档突然发现了一份md文档,打开一看 瞬间想起当年学习vue的艰难路,没人指导全靠自己蒙,下面就是md文档内容,需要的小伙伴可以打开个在线的md编译器看一看,我相信不管是新人还是老人 入门总 ...
- vue新手入门——vue-cli搭建
首先说明,以下内容vue官网都有文档,如果觉得麻烦啰嗦,请移步至 安装-vue.js . 准备工作: 1.下载并安装node环境,一般情况下安装好node之后,npm也会安装好.具体安装的话,百度大概 ...
- Unity 新手入门 如何理解协程 IEnumerator yield
Unity 新手入门 如何理解协程 IEnumerator 本文包含两个部分,前半部分是通俗解释一下Unity中的协程,后半部分讲讲C#的IEnumerator迭代器 协程是什么,能干什么? 为了能通 ...
- MVVM Light 新手入门(2) :ViewModel / Model 中定义“属性” ,并在View中调用
今天学习MVVM架构中“属性”的添加并调用,特记录如下,学习资料均来自于网络,特别感谢翁智华的利刃 MVVMLight系列. 一个窗口的基本模型如下: View(视图) -> ViewModel ...
- 新手入门指导:Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...
- 总结Vue 第四天:vue-cli(Vue2.0 新手入门 — 从环境搭建到发布)
总结Vue 第四天:vue-cli(Vue2.0 新手入门 - 从环境搭建到发布) 一.Vue CLI----(Vue2.0 新手入门 - 从环境搭建到发布): ■ CLI是Command-Lin ...
- 【原创】新手入门一篇就够:从零开发移动端IM
一.前言 IM发展至今,已是非常重要的互联网应用形态之一,尤其移动互联网时代,它正以无与论比的优势降低了沟通成本和沟通代价,对各种应用形态产生了深远影响. 做为IM开发者或即将成为IM开发者的技术人员 ...
随机推荐
- HDU1411 欧拉四面体
用向量解决: 三角形面积:S=1/2*|x1*y2-x2*y1|; (粗体表示向量) 三棱锥体积:V=1/6*(OA*OB)*OC 不知道哪里去找的代码,毕竟很线性代数矩阵什么的很头疼,晚上 ...
- ZOJ2150 Raising Modulo Numbers 快速幂
ZOJ2150 快速幂,但是用递归式的好像会栈溢出. #include<cstdio> #include<cstdlib> #include<iostream> # ...
- RabbitMQ与AMQP协议
AMQP(Advanced Message Queuing Protocol, 高级消息队列协议)是一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计 ...
- Jmeter脚本录制方法(二)——手工编写脚本(jmeter与fiddler结合使用)
jmeter脚本录制方法可以分三种,前几天写的一篇文章中,已介绍了前两种,今天来说下第三种,手工编写脚本,建议使用这一种方法,虽然写的过程有点繁琐,但调试脚本比前两者方式都要便捷. 首先来看下三种方式 ...
- 学习flex布局(弹性布局)
Flex是Flexible Box的缩写,意为弹性布局.是W3C早期提出的一个新的布局方案.可以便捷的实现页面布局,目前较高版本的主流浏览器都能兼容,兼容情况如下: Flex在移动端开发上已是主流,比 ...
- bzoj1812 [Ioi2005]riv
riv 几乎整个Byteland王国都被森林和河流所覆盖.小点的河汇聚到一起,形成了稍大点的河.就这样,所有的河水都汇聚并流进了一条大河,最后这条大河流进了大海.这条大河的入海口处有一个村庄--名叫B ...
- 原生JS实现淘宝无缝轮播
<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content=& ...
- h5样式初始化
nav, header, section, article, aside, footer { display: block; } body, p, pre, hr, ul, dl, dd, h1, h ...
- IIC协议建模——读写EEPROM
案例采用明德扬设计思想完成.IIC协议是非常常用的接口协议,在电子类岗位招聘要求中经常出现它的身影.关于IIC协议这里只做简要介绍,详细信息请自行百度或查阅相关Datasheet,网上资料非常多.该篇 ...
- [IR] Concept Search and LDA
重要的是通过实践更深入地了解贝叶斯思想,先浅浅地了解下LDA. From: http://blog.csdn.net/huagong_adu/article/details/7937616/ 传统方法 ...