vue.js_vue$': 'vue/dist/vue.esm.js - CSDN
vue.js 订阅
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。 [1] 展开全文
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。 [1]
信息
初始版本
0.11
软件版本
vue0.11 vue0.12 vue1.0 vue2.0
软件语言
JavaScript
软件大小
生产版:76 KB,开发版:240 KB
稳定版本
2.6.10
开发商
尤雨溪
软件授权
MIT License
软件名称
Vue.js
更新时间
2019年3月20日
Vue.js简介
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 [2]  。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 [3]  ,Vue.js 也能完美地驱动复杂的单页应用。
收起全文
  • 基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.jsvue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,...
  • Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。 摘要 2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并...

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。


    摘要


    2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位中国人–尤雨溪(Evan You)。 


    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。


    调试插件


    在vue调试方面,可以选择安装chrome插件vue Devtools。打开vue项目,在console控制台选择vue面板。在Devtools工具中,可以选择组件,查看对应组件内的数据信息。也可以选择Vuex选项,查看该项目内Vuex的状态变量信息。 



    UI 组件库


    在vue组件库方面,个人不推荐使用UI组件库,毕竟自己造轮子的过程还是很有成就感的。当然,如果更重视开发效率,并且选择了vue2.0作为前端框架,那么饿了么推出的Element组件就是一个很不错的选择。其github项目(https://github.com/ElemeFE/element)更新比较频繁,虽然项目会有些不稳定,但是目前为止element就是最好的支持vue2.0的UI组件。就像它的口号一样,“快速成型,就为让你少加班”。 



    vue、React、Angular1 对比


    性能对比


    在Angular1中,在scope作用域中每一次数据变化,会触发watcher的重新计算,angular对常用的dom事件,xhr事件等做了封装, 在里面触发进入angular的digest流程。在digest流程里面,会从rootscope开始遍历, 检查所有的watcher。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。Vue则没有这个问题,因为它使用基于依赖追踪的观察系统并且异步队列更新,数据的变化都是独立处罚的,除非数据之间有明确的依赖关系。 


    vue官方宣称vue的渲染性能优于react。为了有理有据让人信服,vue开发团队建立了一个简单的对比性能的项目(
    https://github.com/chrisvfritz/vue-render-performance-comparisons),它负责渲染10000个列表项100次。Vue官方将每一个参照项目都分别运行 20 次并取最好的结果结果如下图: 


     


    由此可见,Vue的性能是远好于Angular1,并且稍微优于React的。


    社区拓展对比


    Angular1的背后是Google,所以社区基础是不需要担心的,从Tutorial到StackOverflow的问题数量都可以反映出生态系统很完整。Angular1之后的2.0版本几乎是一个推翻重做的框架,对于使用了1.X版本的项目,想要平滑的升级过渡到2.0版本应该是非常困难的。


    现在Angular2的线上应用数量还不算太多,主流编码还是以1.X版本居多。这个版本化巨大的差异也间接影响到了开发者对于angular的信心。 


    Vue和React都有强大的社区支持。React有状态管理库Flux、ReduxVue,相应的,Vue有vuex。


    Vue 和 React 都提供了强大的路由库来应对大型应用。然而Vue的路由库和状态管理库都是由官方维护支持的。


    React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。


    此外,Vue 提供了Vue-cli 脚手架,包括了Webpack,Browserify,甚至路由库,能让你非常容易地构建项目。


    学习陡峭度对比


    在指令与组件方面,Vue中将指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元,有自己的视图和数据逻辑。在 Angular1 中两者有不少相混的地方。在API与框架设计方面,angular1都比vue要复杂的多。就个人感觉而言,angular1和React的学习曲线会相对陡峭一些,而vue的编码方式会更趋近于前端开发者的编程习惯。 


    因为vue的作者是中国人,vue的官方网站、教程和api肯定是最完善、最易懂的。此外,每次大版本的发布,都会伴随着详尽的迁移说明文档,包含了很多详尽的阐述以及许多迁移的例子,甚至还有迁移工具。Angular的开发团队你们就不觉得脸红么… 
    Vue的使用非常的简单,创建一个本地的 .html 文件,然后通过如下方式引入 Vue:




    这样就生成了vue的hello world应用。


    渲染能力对比


    ReactNative能使你用相同的组件模型编写有本地渲染能力的 APP(iOS 和 Android)。能同时跨多平台开发,对开发者是非常棒的。为了弥补这方面的不足,在2016年9月举办的JSConf2016期间,vue.js的作者尤雨溪宣布加盟Weex团队担任技术顾问,双方将进行更紧密的合作,共建开发生态圈。


    Weex 是阿里的跨平台用户界面开发框架,Weex 的 JavaScript 框架运行时用的就是 Vue。在此之后,在 Weex 的帮助下,使用 Vue 语法开发的组件不仅仅可以运行在浏览器端,还能被用于开发 iOS 和 Android 上的原生应用。 


    Vue.js 的作者尤雨溪表示:“Weex选择Vue作为其JavaScript运行时框架是让我非常高兴的一件事。Vue的组件开发模式已经被web开发者社区广泛 认可,而把Vue的开发体验拓展到原生平台则是我一直想做但没有余力去做的事情。一想到Weex将能让开发者们用Vue的语法去写跨 Web/Android/iOS三端的通用组件,就让我很兴奋。”


    vue的缺点

        

    Vue就这么好,难道没有缺点吗?当然有,vue虽然在16年非常火爆,但是相比于angular和react,不论是成熟度还是社区活跃度都还不是对手。此外,Vue明确声明了自己放弃了对IE8的支持。再看看现在的招聘网站上,有多少写了需要有angular经验,而又有多少写了需要vue经验,就可见vue的影响力相比于angular和react还差的很远。


    vue全家桶及项目架构


    Vue有著名的全家桶系列,包含了vue-router(http://router.vuejs.org),vuex(http://vuex.vuejs.org), vue-resource(https://github.com/pagekit/vue-resource)。再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。


    vue-router路由


    推荐使用npm工具来安装vue-router 


    npm install vue-router 


    通过import导入并定义Vue模块、vue-router模块和需要使用的组件,在本例中,分别是Goods、Ratings和Seller组件。最后,如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能。 


    import Vue from’vue’ 
    importRouter from’vue-router’

    import Goods from ‘@/components/goods/goods’; 
    import Ratings from ‘@/components/ratings/ratings’; 
    import Seller from ‘@/components/seller/seller’;

    Vue.use(Router); // 需要import Vue和Router,不然会报错undefined 


    通过const router= new VueRouter()来定义一个路由,并传入对应的配置,包括路径path和组件components。 




    最后,在使用newVue来创建和挂载vue根实例的时候,记得要通过 router配置参数注入路由,即在router中export出来的路由对象,从而让整个应用都有路由功能。 



    vuex状态管理


    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。如前面所提到的,Vuex 已经集成到 Vue 的官方调试工具vue Devtools,可以轻松的查看项目中的Vuex状态变化情况。

     
    假设有这样一个场景:我们的项目规模比较大,有多个父组件,每个父组件同时又包含多个子组件。如何保持对所有时间的追踪将变得很困难。到底哪个事件是哪个组件派发的,哪个组件该监听哪个事件?父组件将变得和子组件耦合越来越严重,因为它需要明确的派发和监听子组件的某些事件。项目逻辑分散在各个组件当中,很容易导致逻辑的混乱,不利于我们项目的维护。 


    这就是 Vuex 用来解决的问题。 Vuex 的四个核心概念分别是: 


    The state tree:Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。 


    Getters:用来从 store 获取 Vue 组件数据。 


    Mutators:事件处理器用来驱动状态的变化。 


    Actions:可以给组件使用的函数,以此用来驱动事件处理器 mutations 


    Vuex和简单的全局对象是不同的,当Vuex从store中读取状态值的时候,若状态发生了变化,那么相应的组件也会高效的更新。并且,改变store中状态的唯一途径就是提交commit mutations。这样便于我们跟踪每一次状态的变化。只要发生了状态的变化,一定伴随着mutation的提交。 


    让我们来看一个最简单的vuex例子: 


     

    安装 Vuex 之后,让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutations: 


     

    现在,你可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更:


    vue-resource介绍


    Vue-resource有体积小,支持IE9以上的浏览器,支持promise特性的特点。同样推荐使用npm来安装Vue-resource。 


    $ npm install vue-resource 


    在安装并引入vue-resource后,可以基于全局的Vue对象使用http,也可以基于某个Vue实例使用http。

     
     


    在发送请求后,使用then方法来处理响应结果,then方法有两个参数,第一个参数是响应成功时的回调函数,第二个参数是响应失败时的回调函数。 


    vue-resource的请求API是按照REST风格设计的,它提供了7种请求API: 


    · get(url,[options]) 
    · head(url,[options]) 
    · delete(url,[options]) 
    · jsonp(url,[options]) 
    · post(url,[body], [options]) 
    · put(url, [body],[options]) 
    · patch(url,[body], [options])


    vue工程目录结构


    下图是一个简单的vue项目的大概结构,下面简要介绍一下每个文件夹中一般都会存放哪些内容。 


     


    components/文件夹用来存放Vue 组件。个人建议,把每一个组件中使用到的image图片放置到对应的组件子文件目录下,便于统一的管理 


    Node_modules/npm安装的该项目的依赖库 
    vuex/文件夹存放的是和 Vuex store 相关的东西(state对象,actions,mutations) 
    router/文件夹存放的是跟vue-router相关的路由配置项 
    build/文件是 webpack 的打包编译配置文件 
    static/文件夹存放一些静态的、较少变动的image或者css文件 
    config/文件夹存放的是一些配置项,比如服务器访问的端口配置等 
    dist/该文件夹一开始是不存在,在我们的项目经过 build 之后才会产出 
    App.vue根组件,所有的子组件都将在这里被引用 
    index.html整个项目的入口文件,将会引用我们的根组件 App.vue 
    main.js入口文件的 js 逻辑,在webpack 打包之后将被注入到 index.html 中


    vue中less的应用


     


    在vue项目中一样可以使用less预编译,只是需要使用npm安装less-loader插件。安装完成后,在vue中的css模块进行简单的配置,这样就可以直接使用less来编写样式表了。在打包编译的时候,会自动生成对应的css样式。


    vue合实例讲解Vue核心功能


    Vue的功能有很多,很难一一进行详细的解释。下面根据在工作中的项目实例,结合代码解释一下vue的几大核心功能。


    计算属性


    假设有如下的购物车结算场景,用户选中商品的总金额是根据商品数量、选中商品种类数 和商品单价来变化的。然而,数量、选中种类数量和单价这几个对象都是根据用户选择而动态变化的,如果在前端模版中为了计算最终商品总额,放入这几个动态变化的变量(商品数量、商品单价、选中商品种类),会让这个逻辑变得复杂难以维护。在这种情况下,模版便不再简洁清晰。Vue给出了此种场景的解决方案,在任何复杂的逻辑,vue都推荐使用计算属性。 


     


    如上图所示,在html中,我们只需要使用{{totalPrice}}这个计算属性就可以来表示最终的商品总额。我们不需要关注这个变量的数值变化,totalPrice这个变量的逻辑写在对应的computed计算属性中。 


    也许会有疑问,这个计算属性和定义一个method方法不是差不多么?这两者最大的区别是计算属性是基于它的依赖进行缓存的。计算属性只有在它的相关依赖发生变化时才会重新计算求值。在本例中,只有当选择商品的价格price和数量count发生变化时,这个计算属性totalPrice才会重新计算新的值。这就意味着,只要totalPrice这个值没有发生变化,多次访问该计算属性会立即返回之前的计算结果,而不必再次执行计算。


    模版语法


    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。Vue的模版语法包括了使用双大括号插入文本、使用v-html插入纯HTML内容、使用v-bind插入对象、类似angular的v-if、v-show、v-for指令、以及过滤器等等。 



    组件化


    组件(Component)是 Vue.js 最强大的功能。组件可以封装可重用的代码,通过传入对象的不同,实现组件的复用。 


    举一个简单的组建例子,我们首先编写一个star组件,它就是一个普通的star.vue文件。它的作用就是简单实现了一个五角星。 


    如何在其他的vue文件中使用这个star组件呢?如下图所示,首先通过import引入star组件对象,并在想使用star组件的vue文件中声明注册star组件。现在就可以愉快的通过标签来在该vue文件中任意地方使用star组件了。在你想展示一个五角星的地方,使用一个star标签,就可以轻松完成这个功能。 


    组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。如本例所示,子组件star要显式的使用props选项声明它期待获得的数据。在这里就是指的“size”和“score”两个变量。我们可以通过父级给子组件star传入大小和数值这两个对象,来实现对子组件的定制化。 




    过渡效果


    Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果,可以用简单的几行代码实现酷炫的过渡效果。Vue 提供了 transition 的封装组件,在使用v-if、v-show等方法使得transition内部dom元素发生变化时,可以给任何元素和组件添加 entering/leaving 过渡。 


    当v-show中内容发生变化时,transition组件中的元素会发生状态的改变,在应用了transition封装后,Vue会自动识别目标元素是否应用了CSS过渡效果动画,如果有,会在合适的时机添加 entering/leaving的class来实现该过渡效果。 


    下图所示是一个简单的过渡效果的例子,需要将想实现过渡效果的元素放在transition标签中包裹,通过name=“slide-fade”来声明过渡效果名称,并在对应的vue文件中添加过渡效果 的css样式,这样就可以简单的完成该元素的过渡效果。 


     


    总结


    根据不完全统计,包括饿了么、苏宁易购、美团、天猫、Laravel、htmlBurger等国内外知名大公司都在使用vue进行新项目的开发和旧项目的前端重构工作。 


    此外,vue + vuex+ axios + vue-router + webpack + es6 + less的项目架构成为了越来越多大公司的第一选择。 

    展开全文
  • 学会Vue.js的商城开发 学会Vue.js和后台数据接口的使用 本课程是实战课程,需要了解jsvue.js的基础知识;主要讲解移动商城首页、商城分类、商城购物车、产品分类、产品列表、评论、地址管理、下单、会员注册...
  • vue.js有什么用,是用来做什么的(整理) 一、总结 一句话总结:用数据绑定的思想,vue可以简单写单个页面,也可以写一个大的前端系统,也可以做手机app的界面。   1、Vue.js是什么? 渐进式框架  自底向上...

    vue.js有什么用,是用来做什么的(整理)

    一、总结

    一句话总结:用数据绑定的思想,vue可以简单写单个页面,也可以写一个大的前端系统,也可以做手机app的界面。

     

    1、Vue.js是什么?

    渐进式框架 

    自底向上增量开发的设计

    易学习

    易整合

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

     

    2、vue.js到底适合做哪种类型的界面?

    a、表单项繁多

    b、内容需要根据用户的操作进行修改

    Vue.js就是一个用于搭建类似于网页版知乎这种表单项繁多,且内容需要根据用户的操作进行修改的网页版应用。

     

    3、单页应用程序(SPA)是什么?

    一个页面就是应用(子应用)

    顾名思义,单页应用一般指的就是一个页面就是应用,当然也可以是一个子应用,比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多,而且页面中的内容需要根据用户的操作动态变化。

     

    4、 前面说的网页版知乎我也可以用JQuery写啊,为什么要用Vue.js呢?

    a、产品是绝对需要反复修改的

    b、修改可能会导致DOM的关联与嵌套层次要发生改变从而使jquery结构相关代码变的异常复杂

    c、vue.js可以解决这个问题

    你是否还记得你当初写JQuery的时候,有写过('#xxx').parent().parent().parent()这种代码呢?当你第一次写的时候,你觉得页面元素不多,不就是找这个元素的爸爸的爸爸的爸爸吗,我大不了在注释里面写清楚这个元素的爸爸的爸爸的爸爸不就好了。但是万一过几天之后你的项目组长或者你的产品经理突然对你做的网页提出修改要求,这个修改要求将会影响页面的结构,也就是DOM的关联与嵌套层次要发生改变,那么(‘#xxx’).parent().parent().parent()可能就会变成$(‘#xxx’).parent().parent().parent().parent().parent()了。

    这还不算什么,等以后产品迭代越来越快,修改越来越多,而且页面中类似的关联和嵌套DOM元素不止一个,那么修改起来将非常费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能损失的,可能到时候打开这个页面,会变得越来越卡,而你却无从下手。

    这个时候如果你学过Vue.js,那么这些抱怨将不复存在。

     

    5、前端里面常说的视图层是什么?

    我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层。

    Vue 的核心库只关注视图层

     

    6、使用jquery开发完整页面的流程?

    a、html写构架

    b、css装饰

    c、js交互

    讲到JQuery,就不得不说到JavaScript的DOM操作了。如果你用JQuery来开发一个知乎,那么你就需要用JQuery中的各种DOM操作方法去操作HTML的DOM结构了。

    现在我们把一个网页应用抽象一下,那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分,就需要用到JavaScript来接受用户的交互请求,并且通过事件机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。

     

    7、Vue.js为什么能让基于网页的前端应用程序开发起来这么方便?

    a、有声明式

    b、响应式的数据绑定

    c、组件化的开发

    d、Virtual DOM

    因为Vue.js有声明式,响应式的数据绑定,与组件化的开发,并且还使用了Virtual DOM这个看名字就觉得高大上的技术。

     

    8、vue.js中常说的数据动态绑定是什么?

    就是vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,在图上是以input 标签的v-model属性来声明的,因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

     

    9、前端中为什么要组件化开发?

    a、非组件化开发代码和工作量都非常大

    b、修改起来生不如死

    但是现在我们做单页应用,页面交互和结构十分复杂,一个页面上就有许许多多的模块需要编写,而且往往一个模块的代码量和工作量就非常庞大,如果还按照原先的方法来开发,那么会累死人。而且遇到以后的产品需求变更,修改起来也非常麻烦,生怕动了其中一个div之后,其他div跟着雪崩,整个页面全部乱套,或者由于JavaScript的事件冒泡机制,导致修改一些内层的DOM事件处理函数之后,出现各种莫名其妙的诡异BUG。

     

    10、前端中如何进行组件化开发?

    a、借用的后端的面向对象中的模块化思想(把一些大功能拆分成许多函数,然后分配给不同的人来开发)

    b、把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑)

    在面向对象编程中,我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中,我们也可以把一些大功能拆分成许多函数,然后分配给不同的人来开发。

    在前端应用,我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。

    Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

     

    11、为什么有Virtual DOM技术?

    a、问题

    现在的网速越来越快了,很多人家里都是几十甚至上百M的光纤,手机也是4G起步了,按道理一个网页才几百K,而且浏览器本身还会缓存很多资源文件,那么几十M的光纤为什么打开一个之前已经打开过,已经有缓存的页面还是感觉很慢呢?

    b、原因

    (1)、浏览器本身处理DOM也是有性能瓶颈的

    (2)、用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树

    这就是因为浏览器本身处理DOM也是有性能瓶颈的,尤其是在传统开发中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树,导致页面看起来非常卡顿。

     

    12、Virtual DOM如何实现?

    a、预计算dom的各种操作,把最后一次的结果渲染出来(减少dom的渲染次数)

    而Virtual DOM则是虚拟DOM的英文,简单来说,他就是一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。

     

    13、到底该怎么用Vue.js做单页应用开发?

    其实可以直接看学习视频开始干,应该是最好的

    a、介绍 - vue.js官方文档的基础部分硬着头皮看一遍

    我的建议是,先把介绍 - vue.js官方文档的基础部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外,前面几章完全就是把Vue.js当作一个模版引擎来用。

    b、ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好对Node.js也要有所了解

    然后开始学习ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好对Node.js也要有所了解。

    c、看网上各种实战视频以及文章还有别人开源的源代码

    最后组件部分先大致看一遍,了解组件里面都有哪些概念之后,开始看网上各种实战视频以及文章还有别人开源的源代码。

     

    14、ECMAScript是啥?

    ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。日常场合,这两个词是可以互换的。

    而ECMAScript6就是新一代的JavaScript语言。

     

    15、Webpack是啥?

    a、前端打包工具

    Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML,CSS,JavaScript,并且通过link标签将CSS引入你的HTML文件,以及通过Script标签的src属性引入外部的JS脚本,那么你肯定会对这个工具感到陌生。不要紧,我们先来了解一下为什么要用Webpack,然后带着原因去学习就好了。

     

    16、为什么要用Webpack?

    a、方便管理各种素材

    b、打包以便减少浏览器的访问次数

    前面说了,做一个单页应用程序本身就相当复杂,而且在做的时候肯定会使用到很多素材和别的第三方库,我们该如何去管理这些东西呢?

    还有前面讲到了Webpack是一个前端打包工具,前端代码为什么要打包呢?因为单页应用程序中用到很多素材,如果每一个素材都通过在HTML中以src属性或者link来引入,那么请求一个页面的时候,可能浏览器就要发起十多次请求,往往请求的这些资源都是一些脚本代码或者很小的图片,这些资源本身才几k,下载连1秒都不需要,但是由于HTTP是应用层协议,它的下层是TCP这个运输层协议,TCP的握手和挥手过程消耗的时间可能比下载资源本身还要长,所以需要把这些小文件全部打包成一个文件,这样只要一次TCP握手和挥手的过程,就把多个资源给下载下来了,并且多个资源由于都是共享一个HTTP请求,所以head等部分也是共享的,相当于形成了规模效应,让网页展现更快,用户体验更好。

     

    17、NPM和Node.js又是什么?它们是什么关系?

    a、Node.js是一个服务端的JavaScript运行环境

    Node.js是一个服务端的JavaScript运行环境,通过Node.js可以实现用JavaScript写独立程序。

    b、Node.js可以写独立程序(Webpack就是Node.js写的)

    像我们之前提到的Webpack就是Node.js写的,所以作为一个前端开发,即使你不用Node.js写独立程序,也得配一个Node.js运行环境,毕竟很多前端工具都是使用它写的。

    c、NPM是一个node.js的包管理器(类似java的maven(包的依赖管理),php也有一个类似的)。

    NPM是一个node.js的包管理器。我们在传统开发的时候,JQuery.js大多都是百度搜索,然后去官网下载,或者直接引入CDN资源,这种方法太过于麻烦。如果以后遇到其他的包,这个包的代码本身可能还调用了其他的包(也称这个包和其他的那几个包存在依赖关系),那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了NPM这个包管理器,直接可以通过

    npm install xxx包名称
    

    的方式引入它,比如说

    npm install vue

     

    18、Vue-CLi是啥?

    它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录,配置好Webpack,以及各种依赖包的工具,它可以通过

    npm install vue-cli -g
    

    的方式安装,后面的-g表示全局安装的意思,意味着你可以打开命令行之后直接通过vue命令调用它。

     

    19、Vuex和Vue-route是什么(暂时了解即可)?

    Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。

    Vue-route是vue的一个前端路由器,这个路由器不是我们上网用的路由器,而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换,让用户感觉就像切换到了网页一样。

    要讲清楚这两个东西,又得花费大量篇幅,所以这里只是简单提一下,先学好vue.js本身才是最重要的。

     

     

     

     

    二、vue.js到底有什么用

    1、问题

    最近在看vue,但是不懂的是假设说我要用vue做一个练手的小项目,该仿照什么去做呢,比如说商城类的网站,是所有功能模块都可以用vue做,还是只是购物车那块儿适合用vue,还有查了很多资料都说vue适合移动端开发,有没有大神可以举个例子,哪些手机APP用到了vue?为什么要用vue,vue到底该用在哪儿?就是说即使我懂一点vue,我也不知道该拿它来干点什么正事,只能写一些小功能,该如何把vue运用到一个项目中?

     

    2、解答

    vue可以简单写单个页面,也可以写一个大的前端系统,个人建议如果写小的页面(零基础学习vue的话)可以看看vue官网提供样例:https://github.com/vuejs/vue/...,如果稍微大点的项目,推荐看看https://github.com/bailicangd...这个项目。
    换一个角度来收,你可以直接用vue.js写一个页面,而不用jQuery来搞事(简单页面)

     

    Vue可以做从简单到复杂的前端单页应用,随处可见的Web前端都可以用Vue来开发。

    而且Vue上手速度快、功能强大,且提供了非常好用的脚手架vue-cli,很简单就可以构建并让自己的项目跑起来。

    刚学Vue的时候做了一个简单的练手项目,https://github.com/answershut...,类似市面上的易企秀,根据用户设计产生精美的页面。

     

    这个是我学习angularjs1.x练手的项目,一个HTML5播放器,使用了数据绑定思想。你可参考下
    http://ngdemo.sinaapp.com/audio/

     

    三、什么是vue.js?

    Vue.js新手入门指南

    最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的结业项目。

    在做的过程中也对Vue.js的官方文档以及其各种特性有了许多认识。作为一个之前以PHP+模版引擎为主的开发,从一个从未接触过除HTML+CSS+JavaScript+jQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

    下面我就以问答的形式来分享吧。这里假设你仅仅只掌握了HTML+CSS+JavaScript,如果你对JQuery这个前端库,以及各种后端模版语言比如说PHP,JSP还有所了解并且使用过的话那就太好了。

    1.Vue.js是什么?

    Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    如果你是有经验的前端开发者,想知道 Vue.js 与其它库/框架的区别,查看对比其它框架

    这是官网的介绍,是不是觉得非常的抽象非常的官方?看完之后可能还是有很多人不是很懂这个框架到底是用来做什么的,什么是“渐进式框架”?什么是“自底向上增量开发”?什么是“视图层”?什么是“单文件组件”?什么是“复杂的单页应用?”第二段话里面“响应的数据绑定和组合的视图组件”这又是个啥?还有最后一段话,“Vue.js 与其它库/框架的区别”究竟是什么?

    不要担心,如果你慢慢看完这里面的所有问答,一定会对前面那些可能你从未听说过的专业术语有一种恍然大悟的感觉。

    2.Vue.js到底是什么?

    想必现在能看到我这篇文章的人,都是用着APP或者网页版知乎在阅读把。Vue.js就是一个用于搭建类似于网页版知乎这种表单项繁多,且内容需要根据用户的操作进行修改的网页版应用。

    3.单页应用程序(SPA)

    顾名思义,单页应用一般指的就是一个页面就是应用,当然也可以是一个子应用,比如说知乎的一个页面就可以视为一个子应用。单页应用程序中一般交互处理非常多,而且页面中的内容需要根据用户的操作动态变化。

    4.你前面说的网页版知乎我也可以用JQuery写啊,为什么要用Vue.js呢?

    讲到JQuery,就不得不说到JavaScript的DOM操作了。如果你用JQuery来开发一个知乎,那么你就需要用JQuery中的各种DOM操作方法去操作HTML的DOM结构了。

    现在我们把一个网页应用抽象一下,那么HTML中的DOM其实就是视图,一个网页就是通过DOM的组合与嵌套,形成了最基本的视图结构,再通过CSS的修饰,在基本的视图结构上“化妆”让他们看起来更加美观。最后涉及到交互部分,就需要用到JavaScript来接受用户的交互请求,并且通过事件机制来响应用户的交互操作,并且在事件的处理函数中进行各种数据的修改,比如说修改某个DOM中的innerHTML或者innerText部分。

    我们把HTML中的DOM就可以与其他的部分独立开来划分出一个层次,这个层次就叫做视图层

    Vue 的核心库只关注视图层

    我们为什么要把视图层抽取出来并且单独去关注它呢?

    因为在像知乎这种页面元素非常多,结构很庞大的网页中,数据和视图如果全部混杂在一起,像传统开发一样全部混合在HTML中,那么要对它们进行处理会十分的费劲,并且如果其中有几个结构之间存在藕断丝连的关系,那么会导致代码上出现更大的问题,这什么问题呢?

    你是否还记得你当初写JQuery的时候,有写过('#xxx').parent().parent().parent()这种代码呢?当你第一次写的时候,你觉得页面元素不多,不就是找这个元素的爸爸的爸爸的爸爸吗,我大不了在注释里面写清楚这个元素的爸爸的爸爸的爸爸不就好了。但是万一过几天之后你的项目组长或者你的产品经理突然对你做的网页提出修改要求,这个修改要求将会影响页面的结构,也就是DOM的关联与嵌套层次要发生改变,那么 (‘#xxx’).parent().parent().parent()可能就会变成$(‘#xxx’).parent().parent().parent().parent().parent()了。

    这还不算什么,等以后产品迭代越来越快,修改越来越多,而且页面中类似的关联和嵌套DOM元素不止一个,那么修改起来将非常费劲。而且JQuery选择器查找页面元素以及DOM操作本身也是有性能损失的,可能到时候打开这个页面,会变得越来越卡,而你却无从下手。

    当你在编写项目的时候遇到了这种问题,你一定会抱怨,为什么世上会有HTML这种像盗梦空间一样的需要无数div嵌套才能做出页面的语言,为什么当初学JQuery看中的是它简洁的DOM操作,现在却一点也不觉得它有多简洁,难道我学的是假的JQuery?为什么写个代码这么难,你想砸电脑,你想一键盘拍在产品狗的脑袋上,责怪他天天改需求才让你原本花清香茶清味的代码变得如此又臭又长。

    这个时候如果你学过Vue.js,那么这些抱怨将不复存在。

    5.Vue.js为什么能让基于网页的前端应用程序开发起来这么方便?

    因为Vue.js有声明式,响应式的数据绑定,与组件化的开发,并且还使用了Virtual DOM这个看名字就觉得高大上的技术。

    可是这些名词都是啥?

    6.响应式的数据绑定

    这里的响应式不是@media 媒体查询中的响应式布局,而是指vue.js会自动对页面中某些数据的变化做出响应。至于是如何响应的,大家可以先把下面这段代码随便粘贴到一个扩展名为html的文件然后用浏览器打开,随便在文本框里面输入一些文字,观察一下页面变化。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue.js测试 - 代码之美专栏</title>
        <!-- author:昌维 代码之美 https://zhuanlan.zhihu.com/codes -->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" name="" value="" placeholder="在这里输入文字,下面会跟着变化" v-model="message">
            <hr>
            <p>{{ message }}</p>
        </div>
        <script type="text/javascript">
            var app = new Vue({
              el: '#app',
              data: {
                message: 'Hello Vue!'
              }
            })
        </script>
    </body>
    </html>
    

    是不是会发现一个很神奇的现象,文本框里面输入的文字和后面的p标签中的内容一起变化?

    换句话说,p标签里面通过{{ message }}这个写法与input标签中的value绑定在了一起,其中变化,另外一个和它绑定的数据就跟着变化。

    结合标题来说,就是vue.js会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,在图上是以input 标签的v-model属性来声明的,因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

    7.组件化开发

    还记得在传统前端开发的时候,我们都是每个人做一个页面,然后最后套入各种后端模版引擎,比如说PHP的Smarty或者Java的JSP等等。

    但是现在我们做单页应用,页面交互和结构十分复杂,一个页面上就有许许多多的模块需要编写,而且往往一个模块的代码量和工作量就非常庞大,如果还按照原先的方法来开发,那么会累死人。而且遇到以后的产品需求变更,修改起来也非常麻烦,生怕动了其中一个div之后,其他div跟着雪崩,整个页面全部乱套,或者由于JavaScript的事件冒泡机制,导致修改一些内层的DOM事件处理函数之后,出现各种莫名其妙的诡异BUG。

    在面向对象编程中,我们可以使用面向对象的思想将各种模块打包成类或者把一个大的业务模块拆分成更多更小的几个类。在面向过程编程中,我们也可以把一些大功能拆分成许多函数,然后分配给不同的人来开发。

    在前端应用,我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。

    Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

    8.Virtual DOM

    现在的网速越来越快了,很多人家里都是几十甚至上百M的光纤,手机也是4G起步了,按道理一个网页才几百K,而且浏览器本身还会缓存很多资源文件,那么几十M的光纤为什么打开一个之前已经打开过,已经有缓存的页面还是感觉很慢呢?这就是因为浏览器本身处理DOM也是有性能瓶颈的,尤其是在传统开发中,用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树,导致页面看起来非常卡顿。

    而Virtual DOM则是虚拟DOM的英文,简单来说,他就是一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。

    对于vue.js的Virtual DOM,目前业界有着褒贬不一的评价。有人认为Vue.js作为一个轻量级框架,引入Virtual DOM会加大Vue.js本身的代码尺寸,也会消耗更多CPU(手机上会更耗电)(注意:消耗更多的CPU并不意味着会更卡,因为JavaScript计算是后台计算,他的计算量还不至于让DOM操作变得卡顿),并且在操作单个DOM元素的时候,反而多了一道计算工序,会更慢。但也有人认为基本上会用Vue.js开发的都是页面中内容很多的元素,肯定操作的DOM量级普遍较大,平均一下还是比较划算的。

    9.我到底该怎么用Vue.js做单页应用开发?

    说了这么多,我还是不知道怎么用它做出一个像知乎那样的页面啊,到底怎么学它呢?

    前面我们看了一个响应式的数据绑定案例,那只是一个DEMO,而且也看不出有什么实际意义,离真正的单页应用程序还差得远,到底怎么用它开发真实的项目呢?

    我的建议是,先把介绍 - vue.js官方文档的基础部分硬着头皮看一遍。除了组件这个小节涉及到了很多晦涩难懂的名词以外,前面几章完全就是把Vue.js当作一个模版引擎来用。

    然后开始学习ECMAScript6,Webpack,NPM以及Vue-Cli的基本用法,最好对Node.js也要有所了解。

    最后组件部分先大致看一遍,了解组件里面都有哪些概念之后,开始看网上各种实战视频以及文章还有别人开源的源代码。

    10.在前面你提到过好几次ECMAScript,这是啥?

    ECMAScript听名字好像和JavaScript很像,难不成他们有什么千丝万缕的联系?

    没错你猜对了,他们之间还真有着很深的联系。

    引用阮一峰老师的话:(ECMAScript 6入门

    要讲清楚这个问题,需要回顾历史。1996年11月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给国际标准化组织ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是1.0版。

    该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。

    因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 Jscript 和 ActionScript)。日常场合,这两个词是可以互换的。

    而ECMAScript6就是新一代的JavaScript语言。

    这里也强烈推荐大家学习ECMAScript6的时候参考这本书ECMAScript 6入门

    11.我在学习Vue.js的时候老是听到Webpack,这是啥?

    Webpack是一个前端打包和构建工具。如果你之前一直是手写HTML,CSS,JavaScript,并且通过link标签将CSS引入你的HTML文件,以及通过Script标签的src属性引入外部的JS脚本,那么你肯定会对这个工具感到陌生。不要紧,我们先来了解一下为什么要用Webpack,然后带着原因去学习就好了。

    12.为什么要用Webpack

    前面说了,做一个单页应用程序本身就相当复杂,而且在做的时候肯定会使用到很多素材和别的第三方库,我们该如何去管理这些东西呢?

    还有前面讲到了Webpack是一个前端打包工具,前端代码为什么要打包呢?因为单页应用程序中用到很多素材,如果每一个素材都通过在HTML中以src属性或者link来引入,那么请求一个页面的时候,可能浏览器就要发起十多次请求,往往请求的这些资源都是一些脚本代码或者很小的图片,这些资源本身才几k,下载连1秒都不需要,但是由于HTTP是应用层协议,它的下层是TCP这个运输层协议,TCP的握手和挥手过程消耗的时间可能比下载资源本身还要长,所以需要把这些小文件全部打包成一个文件,这样只要一次TCP握手和挥手的过程,就把多个资源给下载下来了,并且多个资源由于都是共享一个HTTP请求,所以head等部分也是共享的,相当于形成了规模效应,让网页展现更快,用户体验更好。

    前面说到Webpack还有构建的功能,这就不得不提到了ECMAScript6这个新版本的JavaScript,但是现在国内外还有很多人用着老版本的浏览器,这些浏览器并不支持ECMAScript6,那么我们的前端项目如何在这种浏览器上运行呢?这就需要Webpack的Loader自动载入一个转换器来将我们写的ECMAScript6转换成浏览器能支持的老版本JavaScript语言,这个转换器的名字叫做babel,如果你以后听到或者看到了这个单词,应该要知道它就是一个ECMAScript6 to 老版本JavaScript的转换器了。这也是Webpack的构建功能。当然对前端有更深入的同学还会知道Sass,Less,stylus之类的CSS预处理器,我们也可以通过在Loader中编写特定的规则来实现自动将这些CSS预处理语言转换成普通浏览器能识别的CSS代码。

    开头的介绍提到了vue.js可以使用单文件组件开发项目,其实也是通过Webpack将单文件组件中的模版,样式以及JS转换到主页面中

    当然Webpack不止这点功能,它还可以通过安装各种插件来扩展,比如说热加载技术,就是解放键盘的F5键。让我们修改代码,并且按Ctrl+S保存之后,浏览器页面自动刷新变化,不需要我们去手动刷新,还有一些插件可以自动添加注释,自动给CSS代码加上一些浏览器内核对CSS3兼容前缀,就像webkit-xxx之类的一样。

    13.NPM和Node.js又是什么?它们是什么关系?

    首先讲讲node.js。我们知道通常情况下,JavaScript的运行环境都是浏览器,因此JavaScript的能力也就局限于浏览器能赋予它的权限了。比如说读写本地系统文件这种操作,一般情况下运行在浏览器中的JavaScript代码是没有这个操作权限的。如果我们想用JavaScript写出一些能够运行在操作系统上的,能够具有像PHP,JAVA之类的编程语言具有的功能的程序该怎么办呢?Node.js就解决了这个问题。Node.js是一个服务端的JavaScript运行环境,通过Node.js可以实现用JavaScript写独立程序。像我们之前提到的Webpack就是Node.js写的,所以作为一个前端开发,即使你不用Node.js写独立程序,也得配一个Node.js运行环境,毕竟很多前端工具都是使用它写的。

    NPM是一个node.js的包管理器。我们在传统开发的时候,JQuery.js大多都是百度搜索,然后去官网下载,或者直接引入CDN资源,这种方法太过于麻烦。如果以后遇到其他的包,这个包的代码本身可能还调用了其他的包(也称这个包和其他的那几个包存在依赖关系),那么我们要在自己的项目中引入一个包将变得十分困难。现在我们有了NPM这个包管理器,直接可以通过

    npm install xxx包名称
    

    的方式引入它,比如说

    npm install vue
    

    就自动在当前项目文件夹下导入了这个包,并且npm自动下载好了vue这个包依赖的其他包。

    至于有的人在按照网上的npm教程配置的时候踩坑了,发现下载速度很慢或者完全下载不了,那是因为我国有着众所周知的原因,网上也有各种解决方法可以解决这个问题,大家多善用搜索引擎

    前面提到了Webpack可以安装各种插件来扩展功能,其实也是通过这种方式扩展。

    如果你学过PHP的话,NPM就和PHP里面的Composer差不多。也和CentOS下的yum和Ubuntu下的apt-get差不多。

    14.Vue-CLi又是啥?

    它是一个vue.js的脚手架工具。说白了就是一个自动帮你生成好项目目录,配置好Webpack,以及各种依赖包的工具,它可以通过

    npm install vue-cli -g
    

    的方式安装,后面的-g表示全局安装的意思,意味着你可以打开命令行之后直接通过vue命令调用它。

    15.我该不该学Vue.js?

    现在Vue.js无论是发展势头还是作者支持还是很好的,而且它本身中文资料就比较多,教程也很多,现在随随便便打开几个和前端开发有关的知乎专栏,基本上都能见到相关文章,社区也很活跃。

    至于你该不该学,取决于你自己,如果你当前只是做做以内容展示为主的项目,或者就是成天用各种CMS建站仿站,并且以后都不打算更换更好的工作,那么可以暂时不用学。如果你开发的项目交互非常多,而且前后端开发都对前后端分离有很清楚的认识,那么可以大胆的学习,并且在实际项目中运用。

    16.Vue.js怎么火起来的?

    关于这个问题,网上说法很多,我自己认为主要还是前些年大前端变革太快,而最近一年开始Vue.js+Webpack这个组合开始逐渐稳定下来了,而且已经有了很多中文资料。

    对比它的竞争对手AngularJS,新旧版本项目无法平滑升级,变革太大让用户感觉不安稳。

    React本身主流推荐用的是JSX,需要额外学习一门语法(什么?学Vue.js还要学ECMAScript6?现在ECMAScript6是趋势,并不是因为Vue.js才要学的),并且React本身用的是render写法编写模版代码,这让很多用习惯了Smarty等后端模版引擎得人来使用感觉很不适应,现在看来React本身在中国一些论坛社区的火爆程度还是没有Vue.js高。

    当然也并不是说除了Vue.js以外其他框架都很差。像知乎新版也是用React开发的,他还是有各自优秀的地方大家可以深入学习之后做出自己的判断。

    17.我在很多地方还看到Vuex和Vue-route,它们又是什么?

    Vuex是vue的一个状态管理器。用于集中管理一个单页应用程序中的各种状态。

    Vue-route是vue的一个前端路由器,这个路由器不是我们上网用的路由器,而是一个管理请求入口和页面映射关系的东西。它可以实现对页面局部进行无刷新的替换,让用户感觉就像切换到了网页一样。

    要讲清楚这两个东西,又得花费大量篇幅,所以这里只是简单提一下,先学好vue.js本身才是最重要的。

    18.我还在一些地方看到过Vue-resource和Axios,它们又是什么?

    我们在传统的前后端不分离的开发中,后端直接把数据通过模版引擎拼接进了返回的HTML中。而现在做单页应用程序属于前后端分离开发,那么这个单页应用程序中的数据就得通过ajax的方式获取,也要通过ajax的方式提交到后端。

    在传统开发中我们都是通过xmlhttprequest手动操作,或者通过JQuery的ajax方法来进行数据提交获取。

    vue.js本身没有封装ajax操作库,所以我们要通过Vue-resource和Axios来进行ajax操作,而因为种种原因,现在vue.js2.0已经将axios作为官方推荐的ajax库了。

    19.我该学Vue.js2.0还是1.0呢?

    现在很多框架和语言都是学新不学旧(Python慢慢也变得如此),因此如果不是为了维护老旧项目,肯定推荐学Vue.js2.0。而且学会了Vue.js2.0,再去学习Vue.js1.0也不是什么难事。

    20.写Vue.js用什么开发工具和电脑呢?

    前端开发基本上不需要太高端的电脑都能胜任,现在这个时代是台电脑,装个编辑器都可以做前端开发的。

    Vue.js的组件文件本质上还是普通的代码文件,所以各种编辑器配合一些语法检查插件就足够了。我自己用的是sublime text 3,安装一些插件之后可以实现.vue单文件组件高亮代码以及各种自动完成。Webstorm中也有类似插件,大家可以在网上各种教学文章的指导下配置好环境。

    我用的主题是Monokai,这个主题在大部分显示器下长时间观看眼睛不会很疼。我使用的显示器是LG IPS236,部分显示器有亮度色标调节,我这款显示器调到2.0左右会比较舒适,过低会导致底部的茶色背景变黑,反差较大更加疲劳,过高会导致对比度不足,画面泛白影响调色。

    结语:

    可能包括我在内的很多人在看到Vue.js那神奇的双向绑定优雅写法都会有一种非常惊艳,而看到中文文档发布之后有种想立马学习的冲动。可惜大前端终究是大前端,如果一个对于前端各个方面没有深入认识就想着能一步登天,肯定对不起大前端的“大”字。原本看着只想学一个Vue.js,没想到顺带把ECMAScript6,Webpack配置,ESLint配置,bable配置,npm使用,node.js语法,以后vue全家桶中的vuex,vue-route等等等等都学了一遍。前段时间网上也流传出了一个职位叫做Webpack配置工程师,从这里也可以看出弄懂前端这个大杂烩确实不是那么容易。大家一起加油,有什么问题也可以在评论区回复,我会抽空补充在文章内容中。谢谢各位的支持!~

     

     

    参考:https://blog.csdn.net/wxl1555/article/details/79964818

     

     

    展开全文
  • 如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优。 Vue.js的官方中文教程其实也是一个不错的教程,不过相比于一次性把所有...

    简介:这是一篇超级简单的入门文章

    如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优。

    Vue.js的官方中文教程其实也是一个不错的教程,不过相比于一次性把所有概念掌握,我更倾向于先会用,之后再在实际应用中把未涉及到的知识点逐步补全。

    就像开车,不是非要知道发动机的工作原理才能上路的,甚至你可能一辈子也不用知道。

    好了,开始吧

    准备

    首先,以下几点希望你已经知道或者做到了:

    • 你会用html+css+javascript 写一些网页
    • 你知道什么是DOM和BOM(Browser Object Model)
    • 你知道Vue.js是一个框架而不是一个新语言
    • 你会用百度或者Google其中之一去查找答案

    接着,我会围绕以下几个Vue.js的基本(核心)使用方法逐个做测试和使用说明:

    • 新建vue对象
    • 数据绑定
    • 事件绑定
    • 表单控件绑定

    最后,根据上面的知识点结合起来写出我们的第一个vuejs前端页面

    新建Vue对象

    1. 引用vue.js
      在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址 https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js
     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    1. 新建Vue实例
      在Vue.html中插入一个id为firstVue<div>
    <div id="firstVue"></div>

    在Vue.html中插入下面js代码:

    <script type="text/javascript">
        var myVue = new Vue({
            el:"#firstVue"
        })
    </script>

    然后整个代码看起来是这样的:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue Demo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
        <div id="firstVue">
        </div>
    </body>
    <script type="text/javascript">
        var myVue = new Vue({
            el: "#firstVue"
        })
    </script>
    </html>

    解释一下代码

    js变量 myVue 就是Vue创建的一个对象,可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象, 这个对象就是myVue

    el是Vue的保留字,用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器,告诉Vue要实例化ID=“firstVue”的这个标签。

    至此,Vue.js框架在html页面的引入工作完成,但是如果我们访问这个页面并不能看到任何效果,一篇空白

    数据绑定

    VUE这个框架的数据流向是单向的,不懂没关系,记住就好了
    所以数据绑定后的数据流向是从

    vue实例——>DOM文档

    我们给上一步的<div>标签添加下面一句话

    {{ my_data }}

    变成这样

    <div id="firstVue">
        {{my_data}}
    </div>

    这个双大括号的语法叫做mustache 语法,大括号里面的是作为变量形式出现的。

    然后在创建 vue实例的代码中加入下面数据声明:

    data:{
        my_data: "test"
    }

    整个代码看起来向下面这样:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue Demo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
        <div id="firstVue">
        {{my_data}}
        </div>
    </body>
    <script type="text/javascript">
        var myVue = new Vue({
            el:"#firstVue",
            data:{
                my_data: "test"
            }
        })
    </script>
    </html>

    data参数用来绑定VUE实例的数据变量,每个不同变量之间用逗号分隔,上面我们绑定了自定义变量my_data,并赋初值’test’

    完成数据绑定工作,<div>标签里的{{myData}}数据会随着myVue实例里的myData数据的变动而变动,浏览器查看当前页面,会出现’test’字符串,说明数据绑定成功

    这是在HTML标签内部的数据绑定,那么如果想绑定某个HTML标签的属性值,就要用到v-bind:属性了,比如我想绑定一个标签是否可见的属性(hidden),那么就应该这么写:

    <div id="firstVue" v-bind:hidden="my_hidden">{{my_data}}</div>

    v-bind:后面写想要绑定的属性,my_hidden也不需要用两个大括号括起来了,直接写就可以了,然后在VUE实例中声明这个绑定数据

    var myVue = new Vue({
        el:'#firstVue',
        data:{
            my_data: "test",
            my_hidden: "hidden"
        }
    })

    这时候再浏览这个网页,又变成了空白,但是F12查看源代码,发现其实是div标签的hidden属性被激活了

    当然,v-bind:不仅可以绑定hidden属性,disabled属性,style属性, color属性,凡是标签有的属性,都可以通过这个方法进行绑定

    v-bind由于经常会用到,所以也可以缩写成冒号:,比如上面的<div>标签就完全可以这样写

    <div id="firstVue" :hidden="my_hidden">{{my_data}}</div>

    这是和v-bind:hidden="my_hidden"完全等价的一种写法

    至此,Vue.js两种绑定数据的方法都写完并进行了测试

    事件绑定

    v-bind:是用来绑定数据的,v-on:则是用来绑定事件的,比如我要绑定一个<button>click事件就这么写

    <button v-on:click="clickButton()">Click Me</button>

    当然这里的click可以换成任意一个html事件,比如load , doubleclick , mouseon , mousedown这些,不过click肯定是我们最常用的

    click动作绑定到clickButton()函数之后就需要实现这个函数了,我们要在之前的vue实例中加入新字段methods

    var myVue = new Vue({
        el:'#firstVue',
        data:{
            my_data: "test",
            my_hidden: "hidden"
        },
        methods:{
            clickButton:function(){
                this.my_data = "Wow! I'm changed!"
            }
        }
    })

    我们在methods关键字里面定义了clickButton方法,并在方法内改变了之前定义的my_data变量的值

    这里涉及到如何在vue实例中引用data字段的变量,如上所示,需要加this后面直接写要引用的变量就可以了

    如果不加this,系统会默认你想引用的是一个全局变量,可是这里我们需要引用的是这个vue实例里的局部变量

    现在整体代码和之前有些变化,看起来是这样的:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue Demo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
        <div id="firstVue">
            <button v-on:click="clickButton">Click Me</button>
            <p>{\{my_data\}}</p>
        </div>
    </body>
    <script type="text/javascript">
    var myVue = new Vue({
        el:'#firstVue',
        data:{
            my_data: "test",
            my_hidden: "hidden"
        },
        methods:{
            clickButton:function(){
                this.my_data = "Wow! I'm changed!"
            }
        }
    })
    </script>
    </html>

    好了,运行一下,点击Click Me的时候”test”就会变成”Wow! I’m changed!”,这是因为变量my_data的改变。

    另外,v-on:语法同样有一个缩写@,比如v-on:click="clickButton"就等价于@click="clickButton"

    表单控件绑定

    之前有说Vue这个框架是单向数据传输的,就是从vue实例传送数据到DOM ,那么我们如何从DOM中实时获取用户输入的数据赋值给vue实例呢

    这用到了Vue.js提供给用户的一个语法糖 v-model ,这个语法糖通过两步实现了数据的反向传递,也就是从DOM传送给vue实例数据。

    下面说的原理看不懂可以跳过,不会影响后续阅读

    v-model 通过两步实现了数据反向传递

    第一步,绑定了DOM标签的input事件(比如叫tapInput())

    第二步,当用户进行输入时候,触发tapInput()函数,tapInput()函数内部读取此DOM标签的Value值,赋值给vue实例

    通过以上两步,v-model语法糖实现了vue数据的反向传输

    好,直接写一个例子吧

    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue Demo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
        <div id="firstVue">
            <input type="text" v-model="my_data" />
            <button v-on:click="clickButton">Click Me</button>
            <p>{{my_data}}</p>
        </div>
    </body>
    <script type="text/javascript">
        var myVue = new Vue({
            el:'#firstVue',
            data:{
                my_data: "test",
                my_hidden: "hidden"
            },
            methods:{
                clickButton:function(){
                    this.my_data = "Wow! I'm changed!"
                }
            }
        })
    </script>
    </html>

    可以发现,我们增加了一个<input>标签,并且用v-model语法绑定了之前定义的变量my_data

    这个时候,当我们在<input>输入框输入值的时候,v-model会实时将最新值(value)赋值给vue实例的my_data变量,而my_data变量又将实时展现在<p>标签中

    这样我们看起来实现了这么一个数据流:

    DOM1(input标签)——>VUE——>DOM2(p标签)

    先从用户输入的DOM1获取输入保存在VUE实例,用从VUE实例里拿到数据输出到DOM2

    运行这个页面,发现<p>标签中的内容会随着<input>标签实时的变化,说明我们利用v-model语法变相实现了数据的双向传递

    总结

    看看我们学到了什么
    * 用 new Vue({})新建vue实例
    * 使用 v-bind:{{}}双大括号语法在html中绑定变量
    * 使用 v-on:@ 语法绑定函数到标签的事件
    * 使用 v-model: 语法使用户的页面输入反向传递回vue实例变量

    现在简单完善一下上面的代码,做成一个计数器程序,用户可以在输入框输入任意数字,点击按钮进行总数累加

    下面是对刚才代码进行了一些小的改动,相信你一定可以看明白的

    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue Demo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    </head>
    <body>
        <div id="firstVue">
            <input type="number" v-model.number="my_step" />
            <button v-on:click="clickButton">Add</button>
            <p>{{my_total}}</p>
        </div>
    </body>
    <script type="text/javascript">
        var myVue = new Vue({
            el:'#firstVue',
            data:{
                my_step: 1,
                my_total: 0
            },
            methods:{
                clickButton:function(){
                    this.my_total = this.my_total + this.my_step
                }
            }
        })
    </script>
    </html>

    上面v-model.number后面的这个.number的意思是说在返回my_step值的时候自动转换成integer类型,因为默认是string类型,所以要多这么一句。


    本文算是vue的基础内容,下一篇将会是vue的核心内容,组件。

    前端的东西多且杂,东拼西凑总也不是进步的办法,我认为最好就是将主干的一支学明白用在实际项目中,其他的一些枝枝叉叉遇见了现看文档也是来得及的,比如我每次FLEX布局都要现查语法,甚至写前端页面的时候总是开着VUE的官方文档随时查看 -囧-

    我会写出一个用Vue.js构建SPA(Single Page Application)的系列文章, 希望可以让初学、转学VUE的人少走弯路

    最后的最后,转载请注明出处,谢谢

    附:源代码

    展开全文
  • Vue.js介绍以及优缺点

    2018-08-12 19:24:29
    一.MVX框架模式了解 MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。  View通过Controller来和Model联系,Controller是View和Model的...

    一.MVX框架模式了解

    MVX框架模式:MVC+MVP+MVVM

    1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。
          View通过Controller来和Model联系,Controller是View和Model的协调者,View和Model不直接联系,基本联系都是单向的。
    用户User通过控制器Controller来操作模板Model从而达到视图View的变化。


    2.MVP:是从MVC模式演变而来的,都是通过Controller/Presenter负责逻辑的处理+Model提供数据+View负责显示。
          在MVP中,Presenter完全把View和Model进行了分离,主要的程序逻辑在Presenter里实现。
    并且,Presenter和View是没有直接关联的,是通过定义好的接口进行交互,从而使得在变更View的时候可以保持Presenter不变。


    MVP模式的框架:Riot,js。


    3.MVVM:MVVM是把MVC里的Controller和MVP里的Presenter改成了ViewModel。Model+View+ViewModel。
           View的变化会自动更新到ViewModel,ViewModel的变化也会自动同步到View上显示。
         这种自动同步是因为ViewModel中的属性实现了Observer,当属性变更时都能触发对应的操作。


    MVVM模式的框架有:AngularJS+Vue.js和Knockout+Ember.js后两种知名度较低以及是早起的框架模式。

     

    View 是HTML文本的js模板
    ViewModel是业务逻辑层(一切js可视业务逻辑,比如表单按钮提交,自定义事件的注册和处理逻辑都在viewmodel里面负责监控俩边的数据)
    Model 数据层 对数据的处理(比如增删改查)

     

     

    二.Vue.js 是什么

       Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API;

       Vue.js是一个构建数据驱动的Web界面的库。

       Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

    简而言之:Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

     

    Vue.js的特性如下:

    1.轻量级的框架

    2.双向数据绑定

    3.指令

    4.插件化

     

    渐进式的理解:
        不管是单页面还是多页面。首先都是通过声明式渲染声明每个字段,这是基本的要求。
    基本要求不管什么页面,什么功能,都会使用声明式渲染,去渲染我们的字段,因为我们需要展现一些功能一些信息,那么就要通过渲染才可以。通常我们会把公共的头部和尾部抽出来,做成组件。这时候就需要使用组件系统。
    单页面应用程序时往往是需要路由,这时候需要把vue的插件(vue-router)拉进来做路由,如果我们的项目足够复杂,大量的使用组件而且难以去管理组件的状态,这个时候我们使用vue-resource,vue-resource是集中来管理我们的状态的。项目完成后需要构建工具来build我们的系统,来提高我们的效果,最后形成完成的项目。

     

    三.Vue.js与其他框架的区别?

     

    1.与angularjs的区别

    相同点:

    都支持指令:内置指令和自定义指令。

    都支持过滤器:内置过滤器和自定义过滤器。

    都支持双向数据绑定。

    都不支持低端浏览器。

     

    不同点:

    (1).AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

    (2).在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。

    Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。

    对于庞大的应用来说,这个优化差异还是比较明显的。

     

    2.与React的区别

    相同点:

    react采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。

    中心思想相同:一切都是组件,组件实例之间可以嵌套。

    都提供合理的钩子函数,可以让开发者定制化地去处理需求。

    都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

    在组件开发中都支持mixins的特性。

     

    不同点:

    React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

    Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。

     

    四.应用场景:

    针对具有复杂交互逻辑的前端应用;

    它可以提供基础的架构抽象;

    可以通过AJAX数据持久化,保证前端用户体验

    好处:

    当前端和数据做一些操作的时候,可以通过AJAX请求对后端做数据持久化,不需要刷新整个页面,只需要改动DOM里需要改动的那部分数据。特别是移动端应用场景,刷新页面太昂贵,会重新加载很多资源,虽然有些会被缓存,但是页面的DOM,JS,CSS都会被页面重新解析一遍,因此移动端页面通常会做出SPA单页应用。

    Vue.js的特点:MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好

    展开全文
  • 在官网上下载vue.js或者是vue.min.js。并用&lt;script&gt;标签引入。下载网址是https://vuejs.org/v2/guide/installation.html。 进入官网后,点击下载这两个,其中这两个有一个是vue.js 有一个是vue.min...
  • 如果你不愿意多花时间去自学vue.js 官网的API,那么你可以在跟着下面的例子学习最实用,最容易上手的案例。首先要你必须要去VUE官网上下载vue.js,然后才能继续下面的步骤。 如果你不想下载的话,在有网络环境的...
  • vue.js安装与配置

    2017-12-27 14:16:28
    这个系列的博文是针对于学习Vue.js的同学展开的。  1.如何简单地使用Vue.js  如同以前我们学过的Jquery一样,我们在程序中使用Vue.js时也可以使用直接引用的方法,直接下载并用 标签引入,Vue.js会被注册为...
  • Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...
  • Vue.js 入门教程

    2018-04-20 16:18:15
    Vue.js 教程Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。MVVM...
  • 小记:介绍vue.js

    2020-05-20 14:37:44
    vue.js是目前比较热门的前端框架之一。它具有易用,灵活,高效等特点。它也提供一种帮助我们快速构建饼开发前端项目的模式。本次分享主要就是介绍vuejs,了解vuejs的基本知识,以及开发流程,进一步了解如何通过...
  • 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。http://www.tuicool.com/articles/raaeeiU Vue基础 对于没有接触过es6和webpack...
  • vue.js 三种方式安装

    2019-02-15 14:55:05
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 ...
  • 前几天遇到了一个问题,在安装完Vue.js devtools后,打开自己写的一个vue.js网页,发现这个图标并没有亮起来,还是灰色,点击图标显示Vue.js not detected,打开控制台也没有发现有vue的选项 网上找了很多解决方案都...
  • Vue.js Vue.js的官方文档中是这样介绍它的:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。 简单小巧是指Vue.js压缩后仅有17KB。所谓渐进式(Progressive),就是我们可以一步一步、有阶段性地来使用Vue....
  • 业余时间想整理一个基于springboot2.x+mybatis+redis(二级缓存)+vue.js的小系统,随着工作经验的增加慢慢去完善它 废话不多说,安排一个node.js,回归最老版的命令行编码! vue.js是什么?为什么要使用它? Vue.js...
  • 在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了)...
  • vue.js下载及安装的三种方法要下载安装vue首先得下载安装node.js和npm。下载安装好这两样以后就可以安装vue了,下面给大家介绍三种安装vue的方法。1.直接在官网上下载在官网上下载vue.js。并用&lt;script&gt...
  • 什么是vue.js Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或...
1 2 3 4 5 ... 20
收藏数 339,337
精华内容 135,734
关键字:

vue.js