毕业到现在大概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新手入门——谈谈理解的更多相关文章

  1. vue新手入门之使用vue框架搭建用户登录注册案例,手动搭建webpack+Vue项目(附源码,图文详解,亲测有效)

    前言 本篇随笔主要写了手动搭建一个webpack+Vue项目,掌握相关loader的安装与使用,包括css-loader.style-loader.vue-loader.url-loader.sass ...

  2. Vue新手入门教程

    谈谈我对Vue的理解 vue就是前端上的Java,前端上的C#.有个前端的虚拟DOM引擎,设计理念和Java,C#类似.我们只需要告诉DOM应该显示什么,而不用去操作DOM元素. 如何引用? 下面是一 ...

  3. vue新手入门指导,一篇让你学会vue技术栈,本人初学时候的文档

    今天整理文档突然发现了一份md文档,打开一看 瞬间想起当年学习vue的艰难路,没人指导全靠自己蒙,下面就是md文档内容,需要的小伙伴可以打开个在线的md编译器看一看,我相信不管是新人还是老人  入门总 ...

  4. vue新手入门——vue-cli搭建

    首先说明,以下内容vue官网都有文档,如果觉得麻烦啰嗦,请移步至 安装-vue.js . 准备工作: 1.下载并安装node环境,一般情况下安装好node之后,npm也会安装好.具体安装的话,百度大概 ...

  5. Unity 新手入门 如何理解协程 IEnumerator yield

    Unity 新手入门 如何理解协程 IEnumerator 本文包含两个部分,前半部分是通俗解释一下Unity中的协程,后半部分讲讲C#的IEnumerator迭代器 协程是什么,能干什么? 为了能通 ...

  6. MVVM Light 新手入门(2) :ViewModel / Model 中定义“属性” ,并在View中调用

    今天学习MVVM架构中“属性”的添加并调用,特记录如下,学习资料均来自于网络,特别感谢翁智华的利刃 MVVMLight系列. 一个窗口的基本模型如下: View(视图) -> ViewModel ...

  7. 新手入门指导:Vue 2.0 的建议学习顺序

    起步 1. 扎实的 JavaScript / HTML / CSS 基本功.这是前置条件. 2. 通读官方教程 (guide) 的基础篇.不要用任何构建工具,就只用最简单的 <script> ...

  8. 总结Vue 第四天:vue-cli(Vue2.0 新手入门 — 从环境搭建到发布)

    总结Vue 第四天:vue-cli(Vue2.0 新手入门 - 从环境搭建到发布) 一.Vue CLI----(Vue2.0 新手入门 - 从环境搭建到发布): ■   CLI是Command-Lin ...

  9. 【原创】新手入门一篇就够:从零开发移动端IM

    一.前言 IM发展至今,已是非常重要的互联网应用形态之一,尤其移动互联网时代,它正以无与论比的优势降低了沟通成本和沟通代价,对各种应用形态产生了深远影响. 做为IM开发者或即将成为IM开发者的技术人员 ...

随机推荐

  1. var let const 的区别

    Var let const 的区别 1.Var 定义的变量存在变量提升,而了let和const不存在变量提升.即在定义的变量代码上使用该变量,var的会输出undefined,而let的会报错. 2. ...

  2. es6的箭头函数

    1.使用语法 : 参数 => 函数语句; 分为以下几种形式 : (1) ()=>语句 (  )=> statement 这是一种简写方法省略了花括号和return 相当于 ()=&g ...

  3. Emgu.CV(三)

    像素交换 private void btn_Exchange_Click(object sender, EventArgs e) { if (imageBox1.Image != null) { va ...

  4. Android基础知识05—活动的生命周期

    ------ 活动的生命周期 ------ Android是使用任务Task来管理活动的,一个任务就是一组存放在栈里的活动的集合.每当启动一个活动 ,他就会在返回栈中入栈,并处于栈顶位置.而每当我们按 ...

  5. JDBC基本开发

    JDBC基本开发步骤 一:注册驱动 方式一:DriverManager.registerDriver(new Driver()); //存在注册两次问题,性能较低,消耗资源 方式二:Class.for ...

  6. 使用Java 8中的Stream

    Stream是Java 8 提供的高效操作集合类(Collection)数据的API. 1. 从Iterator到Stream 有一个字符串的list,要统计其中长度大于7的字符串的数量,用迭代来实现 ...

  7. C 返回函数与闭包的考虑

    #include <stdio.h> typedef int (*fun)(); fun closure(int i) { int squ() { return i*i; } return ...

  8. css 文字和子元素水平垂直居中

    关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...

  9. label联动checkbox

    label联动checkbox时,若label包含在checkbox外层时label不需for属性,设置label的display属性为block时可以使整个div联动.

  10. TreeView简单的动态加载数据

    简单的小记录,省得去看控件属性详情了,基本常用的属于就几个 先是判断根节点是否存在控件中,如果不存在则创建,之前要添加了节点同样的方法 把根节点传到子节点的方法中,再判断是否在根节点里存在子节点,如果 ...