一、网站交互方式

①传统的开发方式:PHP 中,页面和服务端糅合在一起,在这种项目中服务端占比更重,因为绝大多数都服务端技术,绝大多数网站都是这样的方式

②前后端分离方式:服务端只处理数据(不关心页面),提供接口,分离多页(处理页面,通过接口和服务端交互)

③当前主流方式是前后端分离方式,传统的混合开发方式页面和数据糅杂在一起很难维,所以慢慢的把服务端处理视图的业务转变到了前端

二、JavaScript主流前端框架

Angular:诞生于2009年,后为Google所收购。是一款优秀的前端JS框架。AngularJS有着诸多特性,最为核心的是:MVW(Model-View-Whatever)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等

React:React 起源于 Facebook 的内部项目。React主要用于构建UI。在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

Vue: 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

三、Vuejs介绍

①是一个前端JavaScript框架,可以提高网站应用程序开发效率,可以开发单页应用程序,可以融入到不同项目中。

②发展历史:0.6版本(2013.6)-----1.0版本(2015.10)-----2.0版本(2016.10)----2.5版本(至今),参考https://github.com/vuejs/vue/releases

③相关资源:GitHub中文官网

④兼容性:Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

四、安装

①直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量

②CDN:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

③npm:

$ npm install vue

五、示例:输出 hello world

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</body>
</html>

Vuejs简介的更多相关文章

  1. vuejs点滴

    博客0.没事的时候可以看的一些博客:https://segmentfault.com/a/1190000005832164 http://www.tuicool.com/articles/vQBbii ...

  2. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  3. MVVM前端框架

    早开始接触MVVM框架的时候,是在学习WPF的时候,后面陆陆续续接触到了很多的前端JS框架,个人觉得大同小异,也没有去研究源代码,所以都停留在使用的阶段.当然对于我来说,使用这些JS框架,最关注的无非 ...

  4. vuejs课程简介及框架简介

    vuejs准备知识: 1.前端开发基础 html css js 2.前端模块化基础 3.对es6有初步的了解   vuejs是一种轻量级的MVM框架,他吸收了react和angular的优点,强调re ...

  5. VueJs大全;vee-validate(一个验证vue插件), bootstrap-vue, axios简介。

    Vue.js大全(包括依赖,插件,好的指导文章等!)

  6. Vue.js简介

    Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...

  7. Vue.js的简介

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view   Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大 ...

  8. 03: vuejs 事件、模板、过滤器

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 03: vuejs 事件.模板.过滤器 目录: 1.1 事件 1.2 模板 1.3 自定义过滤器 1.4 过度 1.5 支付 ...

  9. Weex 简介

    weex简介 Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能.可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 ...

随机推荐

  1. Replication:The transaction log for database 'tempdb' is full due to 'ACTIVE_TRANSACTION'

    今天早上,Dev跟我说,执行query statement时出现一个error,detail info是: “The transaction log for database 'tempdb' is ...

  2. java中Math类

    Math类 Math类是一个很有用的数学帮助类,使用也非常简单,这个类比较特殊,首先他和String类一样都是用final修饰,所以不能有子类,还有就是它的构造方法是私有的,也就是我们不能通过new的 ...

  3. 【WPF】1、 基本控件的简介

    WPF一直都是断断续续的使用.偶尔用到一下.但是每次间隔比较长,需要重新学习,就写了这篇日志.以后有问题,看这个就可以了解各大概,然后针对细节再另外想办法. 微软的东西真心好,如果什么都不懂,可以直接 ...

  4. python基础01day

    1 python多版本共存 因为python2和python3的解释器程序都是python.exe,在同时加入环境变量的情况下名称重复,如果重命名的话又会造成需要链接解释器的程序无法调用解释器,所以采 ...

  5. 使用MQ消息队列的优缺点

    前言 公司的项目一直都是在使用MQ的,但是由于使用的功能很简单,所以一直都是知其然不知其所以然,作为一个程序猿有必要了解每一个使用的技术,为什么使用它?它的优点是什么?缺点是什么?等等... 使用mq ...

  6. elementUi vue el-radio 监听选中变化

    //change是radio-group标签的事件 <div> <el-radio-group v-model="radioSex" @change=" ...

  7. Kafka Streams开发入门(1)

    背景 最近发现Confluent公司在官网上发布了Kafka Streams教程,共有10节课,每节课给出了Kafka Streams的一个功能介绍.这个系列教程对于我们了解Kafka Streams ...

  8. linux-ifconfig 查看没有IP

    ifconfig 查看没有IP,如图: 解决方法: 1.切换路径到 2.进入编辑ifcfg-ens33文件(文件名可能不同)模式 3.ONBOOT改为yes 4.点击ESC,输入:wq进行保存 5.输 ...

  9. Mac 编译报错 symbol(s) not found for

    查看静态库文件支持的arm64指令集架构的方法 root# lipo -info libname.a Architectures in the fat file: libname.a are: arm ...

  10. go中如何更好的迭代

    三种迭代方式 3 ways to iterate in Go 有如下三种迭代的写法: 回调函数方式迭代 通过Next()方法迭代.参照python 迭代器的概念,自定义Next()方法来迭代 通过ch ...