vuejs_vuejsonp - CSDN
精华内容
参与话题
  • Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue完全有能力驱动...
  • VueJS简明教程(一)之基本使用方法

    千次阅读 多人点赞 2018-06-13 10:00:48
    简介:这是一篇超级简单的入门文章 如果说是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-01-06 23:20:33
    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框架原理浅析

    万次阅读 2019-02-17 19:22:24
    vue.js是一个非常优秀的前端开发框架,不是我说的,大家都知道。 首先我现在的能力,独立阅读源码还是有很大压力的,所幸vue写的很规范,通过方法名基本可以略知一二,里面的原理不懂的地方多方面查找资料,本文中...

    vue.js是一个非常优秀的前端开发框架,不是我说的,大家都知道。

    首先我现在的能力,独立阅读源码还是有很大压力的,所幸vue写的很规范,通过方法名基本可以略知一二,里面的原理不懂的地方多方面查找资料,本文中不规范不正确的地方欢迎指正,学生非常愿意接受各位前辈提出宝贵的建议和指导。

    使用vue的版本是v2.5.13,采用了flow作为类型管理工具,关于flow相关内容选择性忽略了,不考虑类型系统,只考虑实现原理,写下这篇文章。

    同步到sau交流社区(首发):https://www.mwcxs.top/page/558.html

    本文大概涉及到vue几个核心的地方:vue实例化,虚拟DOM,模板编译过程,数据绑定。

     

    一、vue的生命周期

     

    二、vue实例化

    研究vue的实例化就要研究_init方法,此方法定义在src/core/instance/init.js下的initMixin中,里面是对vue实例即vm的处理。其中包括开发环境下的代理配置等一些列处理,并处理了传递给构造函数的参数等,重点在一系列方法

        initLifecycle(vm)
        initEvents(vm)
        initRender(vm)
        callHook(vm, 'beforeCreate')
        initInjections(vm) // resolve injections before data/props
        initState(vm)
        initProvide(vm) // resolve provide after data/props
        callHook(vm, 'created')

    初始化生命周期,初始化事件,初始化渲染,触发执行beforeCreate生命周期方法,初始化data/props数据监听,触发执行created生命周期方法。

    对应到生命周期示例图,created方法执行结束,接下来判断是否传入挂载的el节点,如果传入的话此时就会通过$mount函数把组件挂载到DOM上面,整个vue构造函数就执行完成了。以上是vue对象创建的基本流程。

     

    三、模板编译

    挂载的$mount函数,此函数的实现与运行环境有关,在此只看web中的实现。

    实现只有简单的两行,

    1、判断运行环境为浏览器,

    2、调用工具方法查找到el对应的DOM节点,

    3、mountComponent方法来实现挂载,

    这里就涉及到了挂载之前的处理问题。

    1、对于拥有render(JSX)函数的情况,组件可以直接挂载,

    2、如果使用的是template,需要从中提取AST渲染方法(注意如果使用构建工具,最终会为我们编译成render(JSX)形式,所以无需担心性能问题),AST即抽象语法树,它是对真实DOM结构的映射,可执行,可编译,能够把每个节点部分都编译成vnode,组成一个有对应层次结构的vnode对象。

    有了渲染方法,下一步就是更新DOM,注意并不是直接更新,而是通过vnode,于是涉及到了一个非常重要的概念。

     

    四、虚拟dom

    虚拟DOM技术是一个很流行的东西,现代前端开发框架vue和react都是基于虚拟DOM来实现的。

    虚拟DOM技术是为了解决一个很重要的问题:浏览器进行DOM操作会带来较大的开销。

    1、要知道js本身运行速度是很快的,

    2、而js对象又可以很准确地描述出类似DOM的树形结构,

    基于这两点前提,人们研究出一种方式,

    通过使用js描述出一个假的DOM结构,每次数据变化时候,在假的DOM上分析数据变化前后结构差别,找出这个最小差别并且在真实DOM上只更新这个最小的变化内容,这样就极大程度上降低了对DOM的操作带来的性能开销。

    上面的假的DOM结构就是虚拟DOM,比对的算法成为diff算法,这是实现虚拟DOM技术的关键。

    1、在vue初始化时,首先用JS对象描述出DOM树的结构,

    2、用这个描述树去构建真实DOM,并实际展现到页面中,

    3、一旦有数据状态变更,需要重新构建一个新的JS的DOM树,

    4、对比两棵树差别,找出最小更新内容,

    5、并将最小差异内容更新到真实DOM上。

    有了虚拟DOM,下面一个问题就是,什么时候会触发更新,接下来要介绍的,就是vue中最具特色的功能--数据响应系统及实现。

     

    五、数据绑定

    vue.js的作者尤雨溪老师在知乎上一个回答中提到过自己创作vue的过程,最初就是尝试实现一个类似angular1的东西,发现里面对于数据处理非常不优雅,于是创造性的尝试利用ES5中的Object.defineProperty来实现数据绑定,于是就有了最初的vue。vue中响应式的数据处理方式是一项很有价值的东西。

    vue官网上面其实有具体介绍,下面是一张官方图片:

    vue响应

    响应实现的基本原理:

    1、vue会遍历此data中对象所有的属性,

    2、并使用Object.defineProperty把这些属性全部转为getter/setter,

    3、而每个组件实例都有watcher对象,

    4、它会在组件渲染的过程中把属性记录为依赖,

    5、之后当依赖项的 setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新。

    为什么vue不能在IE8以下运行?

    因为IE8不支持ES5,所以用不了Object.defineProperty方法,又因为Object.defineProperty无法shim,所以vue不支持IE8及以下不支持ES5的浏览器。

     

    展开全文
  • Vue.js 2.0 快速上手精华梳理

    万次阅读 多人点赞 2017-09-03 19:48:27
    自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。... Vue基础 对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-...

    自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新手来说,如何高效快速的学习Vue2.0呢。http://www.tuicool.com/articles/raaeeiU

    Vue基础

    对于没有接触过es6和webpack的童鞋来说,不建议直接用官方的脚手架vue-cli构件项目。

    先按文档顺序最少学习完组件那一章。直接在html文件中引入vue.js开始学习,了解vue的基础指令,和整个vue实例的基础架构。

    vue的生命周期很重要,了解这点以后可以免去很多问题。

    学完这些可以做一些练手的小项目,比如万年不变的todolist。。。

    现在可以开始学习使用vue-cli构件项目了,学习组件化之前,推荐先看一下es6关于模块的介绍。阮一峰《ECMAScript6》 Module

    光会这些还是不够的,还得会一些npm基础,知道如何用git-bush来安装模块依赖,会一些常用的命令。这方面的知识可以参阅npm入门文档

    看完这些就可以试着将之前的写的demo用搭建的vue-cli来实现。附上我写的一个入门小demovue-demo-search

    多看看组件那里,看看如何在vue-cli中怎么实现组件化。

    到这里vue基础篇就结束了。你还可以有条件的参阅剩下的官方文档里面的进阶篇,如果时间有限,就直接进入vue-router

    Vue-router

    和之前一样,推荐直接用html+js过一遍文档

    对路由导航钩子得好好看一看。

    看完文档就可以上手vue-cli,一般新手在这几天都会死活跑不出来。偷笑

    最直接的方法就是去github上搜一些关于vue-router2.0的demo,看如何构件路由,如何构件项目目录。

    我这里有一个传送门

    如果能跑出来,就可以做一些小项目了,比如写一个知乎日报啊偷笑,这些demo在github上很多。

    可以结合一些组件库写demo,这样可以更加了解组件化。比如饿了么团队的Element、mint-ui

    Vuex

    什么是vuex?

    Vuex 是一个专门为 Vue.js 应用设计的 状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务,其中的规则确保状态只能按预期方式变更。说白了就是控制应用的一些全局状态。状态改变了,对应的视图也会改变。

    在学习Vuex时,会有一些ES6特性,当遇到这些时,最好不要一带而过,去好好看一看这些es6特性。

    比如在学习Action时可以看看ES6新增的Promise和参数解构。

    实践的方法一样是先看别人别人写的代码,比如官方的购物车实例的应用结构

    把之前写的demo优化一下,有些地方可以用用vuex

    vuex主要是用来对不同组件间进行通信,它构建了一个Vue实例的全局数据与方法,这些数据与方法可以在该Vue实例的所有组件中get与set

    入门到放弃整理

    一、vue基础

    Vue2.0最全文档 Vue2.0

    探索之路——vue-router入门教程和总结

    Vue.js 2.0 快速上手

    Vuejs2.0 文档攻略

    “Vue2.0”跟俺一起全面入坑 01

    “Vue2.0”跟俺一起全面入坑 02

    “Vue2.0”跟俺一起全面入坑 03

    “Vue2.0”跟俺一起全面入坑 —— 自定义便签

    超好用的VueJs调试工具——vue-devtools

    Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)

    Vue2.0史上最全入坑教程(中)—— 脚手架代码详解

    Vue2.0史上最全入坑教程(下)—— 实战案例

    Vue2.0史上最全入坑教程(完)—— 实战案例

    vue-cli中配置sass和利用SASS函数功能实现px转rem

    二、vue提高

    Vue路由跳转问题记录详解 vuejs心法和技法

    全面解析vue-cli生成的项目中使用其他库(js库、css库)

    Vuex从入门到熟练使用 vue与服务端通信—vue-resource

    vue开发过程中跨域最简单解决方案 富文本编辑器Ueditor如何在Vue中使用?

    三、vue 1.x和vue 2.x的区别

    到了Vue2.x有哪些变化?—— 知识点 到了Vue2.x有哪些变化?—— 组件通信

    四、其他必备知识点

    ES6入门(一) ES6快速入门(二) ES6快速入门(三)

    需要视频教程的关注公众号[代码技巧](ID:daimajiqiao)回复 14 即可获取,付出总会有收获

    Vue.js2.0核心思想

    Vue.js是一个提供MVVM数据双向绑定的库,专注于UI层面,核心思想是:数据驱动、组件系统。

    数据驱动:

    Vue.js数据观测原理在技术实现上,利用的是ES5Object.defineProperty和存储器属性: getter和setter(所以只兼容IE9及以上版本),可称为基于依赖收集的观测机制。核心是VM,即ViewModel,保证数据和视图的一致性。

    watcher:每一个指令都会有一个对应的用来观测数据的对象,叫做watcher,比如v-text="msg", {{ msg }},即为两个watcher,watcher对象中包含了待渲染的关联DOM元素。

    <div id="app">
      {{ message }}
    </div>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })

    基于依赖收集的观测机制原理:

    1 将原生的数据改造成 “可观察对象”,通常为,调用defineProperty改变data对象中数据为存储器属性。一个可观察对象可以被取值getter,也可以被赋值setter。

    2 在解析模板,也就是在watcher的求值过程中,每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者,并成为当前watcher的一个依赖。

    3 当一个被依赖的可观察对象被赋值时,它会通知notify所有订阅自己的watcher重新求值,并触发相应的更新,即watcher对象中关联的DOM改变渲染。

    依赖收集的优点在于可以精确、主动地追踪数据的变化,不需要手动触发或对作用域中所有watcher都求值(angular脏检查实现方式的缺点)。特殊的是,对于数组,需要通过包裹数组的可变方法(比如push)来监听数组的变化。在添加/删除属性,或是修改数组特定位置元素时,也需要调用特定的函数,如obj.$add(key, value)才能触发更新。这是受ES5的语言特性所限。

    组件系统:

    应用类UI可以看作全部是由组件树构成的。

    注册一个组件:

    Vue.component('my-component', {
        // 模板
        template: '<div>{{msg}} {{privateMsg}}</div>',
        // 接受参数
        props: {
            msg: String    
        },
        // 私有数据,需要在函数中返回以避免多个实例共享一个对象
        data: function () {
            return {
                privateMsg: 'component!'
            }
        }
    })
    <my-component msg="hello"></my-component>

    组件的核心选项

    1 模板(template):模板声明了数据和最终展现给用户的DOM之间的映射关系。

    2 初始数据(data):一个组件的初始数据状态。对于可复用的组件来说,这通常是私有的状态。

    3 接受的外部参数(props):组件之间通过参数来进行数据的传递和共享。

    4 方法(methods):对数据的改动操作一般都在组件的方法内进行。

    5 生命周期钩子函数(lifecycle hooks):一个组件会触发多个生命周期钩子函数,最新2.0版本对于生命周期函数名称改动很大。

    6 私有资源(assets):Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

    Webpack是一个开源的前端模块构建工具,它提供了强大的loader API来定义对不同文件格式的预处理逻辑,这是.vue后缀单文件组件形式的基础。所以在此基础上,尤大开发的vue-loader允许将模板、样式、逻辑三要素整合在同一个文件中,以.vue文件后缀形成单文件组件格式,方便项目架构和开发引用。

    其他特性:

    1 异步批量DOM更新:当大量数据变动时,所有受到影响的watcher会被推送到一个队列中,并且每个watcher只会推进队列一次。这个队列会在进程的下一个 tick异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作,也可以保证所有的DOM写操作在一起执行,避免DOM读写切换可能导致的layout。

    2 动画系统:Vue.js提供了简单却强大的动画系统,当一个元素的可见性变化时,用户不仅可以很简单地定义对应的CSS Transition或Animation效果,还可以利用丰富的JavaScript钩子函数进行更底层的动画处理。

    3 可扩展性:除了自定义指令、过滤器和组件,Vue.js还提供了灵活的mixin机制,让用户可以在多个组件中复用共同的特性。

    Node与Angular与Vue.js视频教程需要视频教程的关注公众号[代码技巧](ID:daimajiqiao)回复 14 即可获取,付出总会有收获

    最后建议Vue 2.0 的学习顺序

    起步

    1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。
    2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 script,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。
    3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解。
    4. 阅读官方教程进阶篇的前半部分,到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数(Render Function)』如果理解吃力可以先跳过。
    5. 阅读教程里关于路由和状态管理的章节,然后根据需要学习 vue-router 和 vuex。同样的,先不要管构建工具,以跟着文档里的例子理解用法为主。
    6. 走完基础文档后,如果你对于基于 Node 的前端工程化不熟悉,就需要补课了。下面这些严格来说并不是 Vue 本身的内容,也不涵盖所有的前端工程化知识,但对于大型的 Vue 工程是前置条件,也是合格的『前端工程师』应当具备的知识。

    前端生态/工程化

    1. 了解 JavaScript 背后的规范,ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性,理解 ES2015 modules,适当关注还未成为标准的提案。
    2. 学习命令行的使用。建议用 Mac。
    3. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本,并且将 npm 的 registry 注册表配置为淘宝的镜像源。至少要了解 npm 的常用命令,npm scripts 如何使用,语义化版本号规则,CommonJS 模块规范(了解它和 ES2015 Modules 的异同),Node 包的解析规则,以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意最新版本的 Node (6+) 已经支持绝大部分 ES2015 的特性,可以借此巩固 ES2015。
    4. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。
    5. 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具,作为起步,理解它的『一切皆模块』的思想,并基本了解其常用配置选项和 loader 的概念/使用方法即可,比如如何搭配 Webpack 使用 Babel。学习 Webpack 的一个挑战在于其本身文档的混乱,建议多搜索搜索,应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档,比起 1.0 有极大的改善,但需要注意和 1.0 的不兼容之处。

    Vue 进阶

    1. 有了 Node 和 Webpack 的基础,可以通过 vue-cli 来搭建基于 Webpack ,并且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始,并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档,了解一些进阶配置。有兴趣的可以自己亲手从零开始搭一个项目加深理解。
    2. 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex
    3. 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节(可选择性使用 JSX),理解模板和渲染函数之间的对应关系,了解其使用方法和适用场景。
    4. (可选)根据需求,了解服务端渲染的使用(需要配合 Node 服务器开发的知识)。其实更重要的是理解它所解决的问题并搞清楚你是否需要它。
    5. 阅读开源的 Vue 应用、组件、插件源码,自己尝试编写开源的 Vue 组件、插件。
    展开全文
  • vue.js 三种方式安装

    万次阅读 多人点赞 2019-02-15 14:55:05
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。...
  • vue.js 三种方式安装(vue-cli)

    万次阅读 多人点赞 2018-11-18 11:33:25
    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。...
  • 小记:介绍vue.js

    千次阅读 2020-05-20 14:37:44
    本次分享主要就是介绍vuejs,了解vuejs的基本知识,以及开发流程,进一步了解如何通过vuejs构建一个前端项目。 主要通过四个部分讲解,介绍vue,vue的实例,以及vue的技术栈,最后是vue插件的使用。 什么是vue?...
  • 详细讲解如何使用 Vue CLI 搭建前端项目以及项目结构分析。
  • 浅析vuejs原理

    千次阅读 2018-11-18 11:03:56
    说到vuejs就不得不说mvvm, vue也可以叫做mvvm框架,mvvm分为三个层M(model),V( view),MV(viewmodel)。 mvvm采用的是数据驱动模式,即视图的变化都取决于数据的更改 其实mvvm和mvp层很相似,唯一的不同是...
  • vue-cli · Failed to download repo vuejs-templates/webpack: connect ECONNREF 今天用vue init webpack project的时候出现了 问题 vue-cli · Failed to download repo vuejs-templates/webpack: connect ...
  • 今天在使用vue init webpack xxx 创建前端项目时,出现如下报错:vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=connect ECONNREFUSED ...
  •  vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFO UND github.com github.com:443 解决方法:执行三个命令检查环境 1.node -v 2.vue -v (没有显示版本,np...
  • 记录一下今天遇到的一个坑,用vue-cli脚手架创建项目(vue init webpack xxx)的时候报了这么一个错:vue-cli · Failed to download repo vuejs-templates/webpack: unable to verifythe first certificate。...
  • vuejs环境搭建及创建第一个项目

    千次阅读 2018-03-18 15:19:53
    一、vuejs环境搭建vuejs的运行是基于node和git的所以在安装Vuejs时要先安装着两个软件才能成功安装vuejs。1、node安装在node官网下载node安装软件,下载完成后软件如下 ,双击安装软件,安装完成后打开cmd,运行...
  • vue全家桶

    千次阅读 2016-12-18 00:25:35
    vue https://vuejs.orgvue-forum https://forum.vuejs.org Twitter https://twitter.com/vuejsDocs for This Template http://vuejs-templates.github.io/webpack/Gitter Chat https://gitter.im/vuejs/vuevue-rou
  • 下载VUEJS模板/WebPACK失败:证书链中的自签名证书   vue init webpack &lt;Project name&gt; 报错: vue-cli · Failed to download repo vuejs-templates/webpack: self signed certificate in ...
  • 不知道是什么原因: 我参照自己的文章: https://blog.csdn.net/qq_22182989/article/details/93165378 重新执行了以下命令就可以成功搭建了: cnpm i vue-cli -g ...cnpm install -g webpack ......
  • vue.js2.0完整视频教程12套

    万次阅读 多人点赞 2019-04-21 23:07:31
    0.1智能社vuejs(1-11章全套) 0.2英文版learing vuejs 0.3Vue.js实战小米阅读开发 0.4走进Vue.js2.0 0.5Vuejs教程45节课 0.6Vue.js+Node.js构建音乐播放器 0.7js高级课程vuejs 0.8vue.js实战开发系列 0.9Vue...
  •  vue-cli · Failed to download repo vuejs-templates/webpack: getaddrinfo ENOTFO UND github.com github.com:443 解决方法:执行三个命令检查环境 1.node -v 2.vue -V (没有显示版本...
1 2 3 4 5 ... 20
收藏数 35,592
精华内容 14,236
关键字:

vuejs