1. Vue.js 概述

Vue 是一套用于构建用户界面的渐进式框架；Vue 被设计为能自底向上逐层应用；
Vue 的核心库只关注视图层，易于上手，便于与第三方库或既有的姓名整合；
当现代化的工具链和各种支持库结合使用时，Vue 也能够为复杂的单页应用提供驱动；
在 MVC 模型里，Model 不依赖于 View，但 View 依赖于 Model；MVVM 模式在概念上是真正地将页面和数据逻辑分离它把数据绑定工作放到一个 JS 中去实现，这个 JS 文件的主要功能是完成数据的绑定，就是把 Model 绑定到 UI 元素上；
访问 https://cn.vuejs.org，能获得更多的介绍和帮助文档；
例子：使用 Vue.js 的示例

<!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>Document</title>
</head>
<body><div id="app"><p v-text="message"></p><p>双向绑定：<input v-model="message"></p><button v-on:click="reverseMessage">逆转消息</button><button v-on:click="getApi">调用ajax接口改变message</button><p v-bind:title="title">鼠标悬停几秒钟查看此处动态绑定的提示信息！</p><p v-if="seen">现在你看到我了</p><ol><li v-for="todo in todos" >{{todo.text}}</li></ol></div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue"></script>  <!--加载Vue.js-->
<script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!',title: '悬浮提示信息',seen: true,todos: [{ text: '学习 JavaScript' },{ text: '学习 Vue' },{ text: '整个牛项目' }]},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('')},getApi:function() {var $this = this$.ajax({   //使用Ajax方法实现异步刷新url:'api.php',method:'get',success:function(data){$this.message = data},error:function(err){$this.message = '调用接口失败'}})}}})
</script>

2 快速创建、部署、运行和打包一个 Vue.js 项目

2.1. 创建项目

在 VS Code 的终端命令行，安装 Vue.js 的脚手架，命令如下：

cnpm install-global vue-cil

执行以下命令，创建名为 TestVue 的项目：

cnpm install webpackk-g        //全局安装webpack
vue init webpack TestVue

注意： 在创建项目的对话中，需啊哟输入小写的项目名 testvue
进入项目文件夹，能看到帮助文档 README.md，它提示了后续的两个操作步骤：安装依赖（cnpm install）和部署项目（cnpm run dev）；

2.2. 安装依赖

用 Node.js 访问 MySQL 数据库前，要先安装 MySQL 数据库服务器软件；

2.3. 项目部署和访问

执行部署项目命令如下所示：

Ctrl + C ，再输入 ‘Y’，结束运行；

2.4. 打包 Vue 项目

window 环境下，打包已经生成的 Vue.js 项目，要先修改 config/index.js 中的配置信息；

打包命令如下所示：

npm run build

项目打包完成后，项目的根目录中会生成 dist 文件夹，将 dist 文件夹复制到任意的 Web 服务器后，即可访问；

3. Vue 组件

Vue 是一套用于构建用户界面的渐进式框架；与其他大型框架不同的是，Vue 被设计为能自底而上逐层；
Vue 的核心库只关心图层，易于上手，便于与第三方库或既有的项目整合；当与现代化的工具链和各种支持的库结合使用时，Vue 完全嫩挂钩为复杂的单页应用提供驱动；
使用 Vue 组件的项目结构；

一个 .Vue 文件，除了包含通常的 HTML 标签外、CSS 样式和 JS 脚本外，还能使用模板标签<template>；
.Vue 文件的 JS 脚本中，能定义供模板使用的模板变量；.vue 文件的一个架构示例，如图：

在 .Vue 文件中，能定义方法和组件的生命周期方法；

4. 前端路由配置

Vue 路由用来空值组件之间的跳转，不会实现请求，不用页面刷新；
使用 Vue 路由的示例，如图：

路由定义和使用的示例，如图：

渐进式框架 Vue.js相关推荐

前端三大框架 Vue.js、AngularJS、React 的区别
Vue.js Vue.js 是一种构建数据驱动的Web界面的渐进式框架,Vue.js 采用自底向上增量开发的设计. Vue.js 轻量高效,数据双向绑定(响应式数据绑定), 它会自动响应数据的变化情况 ...
全面掌握前端框架Vue.js
整理自菜鸟教程 Vue.js简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽 ...
《前端框架Vue.js》
作为一枚计算机专业的研一新生,在本科阶段我系统性的学过计算机相关的课程和实训,在学习Android这一部分时,我第一次感觉到了app的乐趣,所以便开始对JAVA前端开发感兴趣了.随便大学已经毕业,但保 ...
python django框架+vue.js前后端分离
本文用于学习django+vue.js实现web前后端分离协作开发.以一个添加和删除数据库书籍应用为实例. django框架官方地址:www.djangoproject.com/ vue.js 框架官 ...
终于找到了梦想中的前端框架 --- vue.js
前面小半年,业余时间研究了超有前途的前端"框架"新秀React,无奈前端我本就是半吊子,没什么基础,再加上React大量应用FP(函数式编程),想把React用好还得熟悉大量第三方 ...
《前端框架Vue.js的解读利器》
目前个人所在的项目组团队是平台团队,主要是负责一些前端界面的配置和开发工作,所以和前端打交道还是有一些时间的. 前一些时间看到平台的同事在微信群里推荐图灵的<Vue.js技术内幕>,这一下 ...
渐进地了解渐进式框架Vue
v1-minimalist 原理: Object.defineProperty劫持数据变换,更新dom 事件监听,改变数据值: 复制代码const obj = {}; const inputDom ...
前端框架Vue.js（一）
网页编写工具:HBuilder 安装方式:用CDN引入一.实例Hello world: <!DOCTYPE html> <html> <head> <met ...
前端渐进式框架Vue讲解
很不错的vue教程推荐连接:http://www.cnblogs.com/keepfool/p/5625583.html 转载于:https://blog.51cto.com/10412806/21 ...

渐进式框架 Vue.js