1.2如何使用vue.js

每一个框架的产生都是为了解决某个具体的问题,在正式开始学习vue.js前,我们先对传统前端开发模式和vue.js的开发模式做一个对比,以此了解vue.js产生的背景和核心思想。

1.2.1 传统的前端开发模式

前端技术在近几年发展迅速,如今的前端开发已不再是10年前哪个写html和css那样的简单了,新的概念层出不穷,比如es6,node.js,npm,前端工程化。这些新东西在不断优化我们的开发模式,改变我们的编程思想。

随着这些技术的普及,一套可称为”万金油“的技术栈被许多商业项目用于生产环境:

jquery+requireJS+artTemplate+gulp

这套技术栈以jquery为核心,能兼容大部分浏览器,这是很多企业比较关心的,因为他们的客户很可能还在用ie7及以下的浏览器,使用requireJS或 seajs进行模块化开发可以解决代码以来混乱的问题,同时便于维护及团队写作,使用轻量级的前端模板(如dot)可以将数据与html模板分离,最后使用自动化构建工具如gulp可以合并压缩代码,如果你喜欢写less/sass以及现在流行的es6,也可以帮你进行预编译。

这样一套看似完美无瑕的前端解决方案就构成了我们所说的传统前端开发模式,由于它的简单 高效 使用,至济南仍有不少开发者使用,不过随着项目的扩大和时间的推移,出现了更复杂的业务场景,比如spa(单页面富应用)/组件接偶等。为了提升开发效率,降低维护成本,传统的前端开发模式已经不能完全满足我们的需要,这是就出现了angular react 以及我们要介绍的主角vue.js

1.2.2 vue.js的开发模式

vue.js是一个渐进式的javascript框架,根据项目需求,你可选择从不同的维度来使用它,如果你只是想体验vue.js带来的快感,或者开发几个简单的html5页面或小应用,你可直接通过script 加载cnd文件。两种版本都可以,如果你不太了解各版本的差别,建议直接使用最新的稳定版本,引入vue.js框架后,在body底部使用newVue()的方式创建一个实例,这就是vue.js最基本的开发模式,现在可以写入一下完整的代码来快速体验vue

原文地址:https://www.cnblogs.com/JavascriptAndHtml5/p/9765276.html

时间: 2024-10-03 22:39:04

1.2如何使用vue.js的相关文章

vue.js 入门

简单一句话来描述:vue.js是一个前端框架. 官方文档:https://cn.vuejs.org/v2/guide/index.html 虽然,我以前也会改一些前端样式,但主要是基于HTML和CSS,HTML主要控制页面的结构,CSS主要来控制样式.涉及到JavaScript就比较小白了. 我花了一个下午照着官方文档做练习,当然是只创建一个xxx_demo.html文件,在<script></script> 标签对之间写 Vue.js语法.这不算错,但在工程化的今天,这么学得猴年

Vue.js项目模板搭建

前言 从今年(2017年)年初起,我们团队开始引入「Vue.js」开发移动端的产品.作为团队的领头人,我的首要任务就是设计 整体的架构 .一个良好的架构必定是具备丰富的开发经验后才能搭建出来的.虽然我有多年的前端开发经验,但就「Vue.js」来说,仍然是个新手.所幸「Vue.js」有一个配套工具「Vue-CLI」,它提供了一些比较成熟的项目模板,很大程度上降低了上手的难度.然而,很多具体的问题还是要自己思考和解决的. 项目划分 我们公司的H5产品大部分是嵌套在手机客户端里面的页面.每个项目的功能

vue.js路由

Vue.js 路由 Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA). Vue.js 路由需要载入 vue-router 库 中文文档地址:vue-router文档. 安装 1.直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js NPM 推荐使用淘宝镜像: cnpm install vue-route

【Vue】vue.js常用指令

http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute). Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令: v-if指令 v-show指令 v-else指令 v-for指令 v-bind指令 v-on指令

Vue.js——vue-resource全攻略

概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery.vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应.也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁.另外,vue-re

说说说vue.js中的组

什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,vue.js的编辑器为它添加特殊的功能.在某些情况下,组件也可以是原生HTML元素的形式. 如何注册组件? 需要使用vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要在其他的地方使用这个创建的组件,

实例分析Vue.js中 computed和method不同机制

在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m

vue.js在windows10系统下的环境搭建

vue.js在windows10系统下的环境搭建流程 1.安装node.js(node包含了npm包管理器) node.js安装包以及源码下载地址:https://nodejs.org/en/download/ 注意:使用安装包(.msi)(作为小白的我,直接用了.exe,导致环境变量都不会自动配置,真的挺郁闷的) 下载下来以后可以直接双击安装,按照提示一步步安装. 详细的安装步骤可看网址:http://www.runoob.com/nodejs/nodejs-install-setup.htm

Vue.js响应式原理

本文和大家分享的主要是Vue.js 响应式原理相关内容,一起来看看吧,希望对大家 学习Vue.js有所帮助. 关于Vue.js Vue.js 是一款 MVVM 框架,上手快速简单易用,通过响应式在修改数据的时候更新视图. Vue.js 的响应式原理依赖于 Object.defineProperty  ,尤大大在Vue.js 文档中就已经提到过,这也是 Vue.js 不支持 E8 以及更低版本浏览器的原因. Vue 通过设定对象属性的  setter/getter  方法来监听数据的变化,通过 g

遇见Vue.js

总之岁月漫长,然而值得等待.... MVC.MVP.MVVM简述 mvc模式:model(模型).view(视图).controller(控制器) => view一般通过controller和model进行联系,controller是model和view的协调者,view和model不直接联系.基本联系都是单向的. mvc模式:model(模型).view(视图).presenter(逻辑层) => presenter完全把view和model进行了分离,主要逻辑在presenter离实现,p