一、初识Vue.js

1、什么是Vue.js?

众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone、angular、reactjs外,还有模块化开发思想的实现库:sea.js 、require.js 、webpack以及前端上线部署集成工具如: grunt、gulp、fis等。

Vue.js与reactjs相似,是一个构建数据驱动的 web 界面的库,一个注重ViewModel的典型的MVVM框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定组合的视图组件

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

2、Vue.js的独特之处

2.1 响应的数据绑定

Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时,我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲,它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定,DOM 将与数据保持同步。每当修改了数据,DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了,不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。

(1)下载安装vue.js

下载地址:开发版本或者生产版本(在开发时请用开发版本,遇到常见错误它会给出友好的警告。)

安装

在html文本中引入vue.js

<script type="text/javascript" src="js/vue.js"></script>

注意:Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

(2)js常用框架对比

Jquery: jquery依然依靠丰富的dom操作去组合业务逻辑,当业务逻辑复杂的时候,每行代码都会有不知所云的感觉。因为:

第一:业务逻辑和UI更改该混在一起,

第二:UI里面还参杂这交互逻辑,让本来混乱的逻辑更加混乱。

当然第二点从另一方面看也是优点,因为有的时候UI交互逻辑能够更加灵活地嵌入到业务逻辑,这在其他MV*框架中都是比较难处理的。

Vue: vuejs非常精简,代码量非常少的实现了MVVM框架,在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或Browserify 的 CommonJS 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

reactjs: reactjs代码量最多,因为它既要管理UI逻辑,又要操心dom的渲染。

extjs: extjs是唯一一个让User和View解耦,通过事件回调去关联起来。也可通过watch去实现双向绑定。

angular: angular是一个丰富的javascript库,也是MVVM模式。如果要用angular开发应用,那么从开始到结束,会接触到angular的内部的不同组件,当然学习曲线也比较陡。

 3、示例

一个最简单的例子

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/vue.js"></script>
        <title></title>
    </head>

    <body>
        <div id="app">
            {{message}}
        </div>
        <script>
            var msgData = "Hello vue.js!";
            var app = new Vue({
                el: "#app",
                data: {
                    "message": msgData
                }
            });
        </script>
    </body>

</html>

结果展示:

Hello vue.js!

时间: 2024-10-14 09:03:16

一、初识Vue.js的相关文章

vue.js随笔记---初识Vue.js(2)

环境搭建(推荐使用vue.js官方提供的命令行工具,用于快速搭建大型单页面应用,包含:vue.js的一个框架爱,vue.js打包工具,测试的工具,开发调试的服务器等): 1.npm:node.js的一个包管理工具,npm在国内使用会很慢,可以使用淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm安装成功检测:cnpm -v回车可看到版本号则表示安装成功! 2.vue-cli安装(vue-cli相当于脚

vue.js随笔记---初识Vue.js

1.基础要求: 1.1 HTML CSS JAVASCRIPT 1.2 模块化基础 1.3 Es6初步了解 2.vue.js 轻量级的MVVM模式框架,他同时吸收了recat和angular的优点,他强调了recat组件化的概念,可以轻松实现数据和展现的分离,吸收了angular灵活的指令和页面操作的一些方法,但是相对于这两者,更简单易学,容易上手. 3.10s看懂vue.js A: <div id="demo"> <p>{{msg}}</p> &l

初识Vue.js

一 ,什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧和丰富的经验,通过对其进行相互连接.修改和扩大,构成所要求的系统.)Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与单文件组件和Vue生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动. 二,声明式渲染. Vue.js 的核心是一个

初识vue.js,我的学习之路(一)

在以前做项目时经常是新建一些html.css.等一些文件,但在接触了vue.js之后我发现我已经有点看不懂前端了,这对于我这么一个菜鸟来说实在是很苦逼的事情.现在的前端技术都离不开npm包去管理编译流程,npm是node.js的包管理工具,vue脚手架的搭建也是需要npm进行操作,所以学习vue之前必须要了解node.js.重点是npm的安装与使用,那么首先我们就要下载一个node.js.    一.安装node.js 可以直接到node.js的官网下载安装,选好跟自己电脑对应的系统版本进行安装

Vue.js实战:初识Vue.js

一.Vue.js是什么 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用. 简单小巧指的是Vue.js 压缩后大小仅有17KB 所谓渐进式(Progressive)就是你一步一步,有阶段性地来使用Vue.js,不必一开始就使用所有的东西. 使用Vue.js可以让Web开发变得简单,同时也颠覆了传统前端开发模式. 二.MVVM模式 与知名前端框架Angular.Ember 等一样,Vue.js在设计上也使用MVVM(Model-View-View-Model )模式. MVVM模式是有经典的软

Vue学习系列(一)——初识Vue.js核心

前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一处需要动态更新的DOM节点创建一个指令对象.每当一个指令对象观测的数据变化时,它便会对所绑定的目标节点执行相应的DOM操作.基于指令的数据绑定使得具体的DOM操作都被合理地封装在指令定义中,业务代码只需要涉及模板和对数据状态的操作即可,这使得应用的开发效率和可维护性都大大提升. 因此,数据绑定,组件

vue.js初识(一)

vue.js安装 官网:http://cn.vuejs.org/ 官方安装介绍:http://cn.vuejs.org/v2/guide/installation.html npm安装参考文章:http://www.cnblogs.com/shhnwangjian/p/6559732.html 基于网络原因,建议将 npm 的注册表源设置为国内的镜像,可以大幅提升安装速度. 本文使用淘宝镜像,使用 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm npm install -g cn

Vue.js 初识

Vue核心库只关注视图层,它不仅易于上手,还便于与第三方或既有项目整合. 前置知识: html+css的基础知识 Javascript的基础知识 node.js初级知识 实践体验: 轻量级的框架 性能优秀 MVVM模式 首先引入Vue.js 通过官方网站:http://vuejs.org/下载Vue.js 编写Vue.js的第一个程序: <!DOCTYPE html> <html lang="en"> <head> <meta charset=

Vue.js初识

VueJS Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,vue采用自底向上增量开发的设计. vue核心库只关注视图层,易与其它库或已有项目整合. vue完全有能力驱动采用 单文件组件 和 Vue生态系统支持的库 开发和复杂单页应用. vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. 引入vue.js <script src="https://unpkg.com/vue/dist/vue.js"></script