Vue学习笔记1—初识Vue

初识Vue

前端的框架与库的区别

  • 总的来说,框架就是提供了前段项目的整体解决方案;库就是自己组合来实现项目。

  • 打比方来说,前端的库就像是我们平时家里用的工具箱,里面有起子、锤子等各种工具。我们可以通过这个工具箱来制造东西,甚至我们可以用工具箱自己制造一下工具,方便以后我们制造东西;而框架,就更像是我们在淘宝上买好的的玩具车的框架,回来后拼装完成,然后可以根据自己的需要,贴上不同的贴纸,喷上不同的颜色,但是和其他使用框架的人一样,我们拿到手上的玩具骨架是一样的,我们很难去改变玩具车的骨架。

  • 框架与库之间的最本质的区别在于控制权:you call libs,frameworks call you(你控制库,框架控制你,控制反转)

    Vue学习笔记1—初识Vue_第1张图片

  • 前端的库与框架的定义:

    • 库(jQuery、 art-template):库更多是一个封装好的一个集合,提供给开发者使用,而且是特定于某一方面的集合(方法和函数),库没有控制权,控制权在使用者手中,在库中查询需要的功能在自己的应用中使用,我们可以从封装的角度理解库;

      art-template : 用于前端开发时一个绑数据的模板,这款模板引擎的最主要特点是轻量级、代码简洁、好用,一个template.js大概才几kb左右。art-template支持标准语法和原始语法,标准语法允许模板更易于读写,而原始语法具有强大的逻辑处理能力。

      React和react-router, react-redux结合起来才叫框架,本身只是充当一个前端渲染的库而已,React就是纯粹写UI组件的 没有什么异步处理机制、模块化、表单验证这些

    • 框架(thinkPHP):框架顾名思义就是一套架构,会基于自身的特点向用户提供一套较为完整的解决方案,而且控制权在框架本身,使用者要找框架所规定的某种规范进行开机发。

  • 现如今,客户要求越来越定制化,所以应当将框架与库结合运用,让他们以聚合的形式在我们所要开发的应用中使用:

    前端开发可以直接使用较为完整的框架(简易的DOM操作 + 发请求 + 模板引擎 + 路由功能),也可以使用多个库来开发(比如jQuery和art-template相结合),也可以在框架灵活应用库。

    Vue学习笔记1—初识Vue_第2张图片

Vue的文件介绍

  • npm下载的vue目录中,dist存放js文件:
    • vue.common.js CommonJS 模块化代码
    • vue.esm.brower.js
    • vue.esm.js ES6 模块化代码
    • vue.js 正常的代码(支持amd/commonJS/es6/umd)umd是前三个全部兼容
    • vue.min.js 压缩后的代码
    • vue.runtime.common.js
    • vue.runtime.esm.js
    • vue.runtime.js
    • vue.runtime.min.js 运行时的代码,比vue.js要小30%

JS中的模块规范(CommonJS,AMD,CMD),点击这个链接可以彻底弄懂CommonJS和AMD/CMD;

**CommonJS: **一开始大家都认为JS是辣鸡,没什么用,官方定义的API只能构建基于浏览器的应用程序,CommonJS就按耐不住了,CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API,从而填补了这个空白。它的终极目标是提供一个类似Python,Ruby和Java标准库。这样的话,开发者可以使用CommonJS API编写应用程序,然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。

**AMD: **CommonJS是主要为了JS在后端的表现制定的,他是不适合前端的,AMD(异步模块定义)出现了,它就主要为前端JS的表现制定规范。AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。

**CMD: **大名远扬的玉伯写了seajs,就是遵循他提出的CMD规范,与AMD蛮相近的,不过用起来感觉更加方便些,最重要的是中文版,应有尽有:seajs官方doc

Vue起步

  1. 引包,让其具备Vue对象;

  2. 通过new Vue(options) 来启动Vue;

  3. 配置options选择对象:

    {

    el : ‘目的地’,

    template : ‘模板’,

    data : {键 : 值},

    methods : {方法名: function() {代码行}}

    };

    (1.在template里面加入要多行的写入需要使用ES6的模板字符串符号 ‘`’ 将多行的字符串圈起来,而且写入的模板必须只有一个根节点;2.data里面也可以不用直接使用对象,而是通过函数的return返回数据对象); 3.可以通过以下方法来创建对象的方法methodName : function() { code lines }

  4. 页面中要存在改目的地,目的地的字符串与jQuery一样;(在vue内部运行机制中,需要根据你传递的字符串进行判断,比如是#xxx、.xxx还是元素标签查找,所以写入document.getElementById(‘xxx’)更为优化,可以避免vue来进行判断)

div>

你可能感兴趣的:(Vue学习笔记)