Vue简介及实例

Vue简介及实例

Vue简介

（1）Vue (读音 /vjuː/，读音类似于 view) 是一套用于构建用户界面的渐进式框架。
（2）官方文档介绍：简单小巧（17KB）、渐进式（可以一步一步，阶段性使用Vue.js）技术栈、足以应付任何规模的应用。

关于Vue介绍
优点：更轻量，单页面，简单易学
缺点：不支持IE8
开发团队：中国国内团队开发，作者：尤雨溪

Vue 对于开发环境的要求有两点
(1)基础篇
基础篇的案例实现只需要浏览器（推荐webstorm和HBuilderX）和IDE（Integrated Development Environment 集成开发环境简称IDE）
(2)进阶篇
进阶篇开始安装、Node.js和NPM、搭建脚手架、webpack模块打包器等。

架构模式
架构模式/开发模式MVVM、MVC、MVP。
（1）MVC
全名：Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。
概念图：
（2）MVP
简称：MVP 全称：Model-View-Presenter
由来：MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑处理，Model提供数据，View负责显示。
①Presenter：作为model和view的中间人，从model层获取数据之后传给view，使得View和model没有耦合；②总得来说MVP的好处就是解除view与model的耦合，使得view或model有更强的复用性。
概念图：

（3）MVVM
名称：mvvm即Model-View-ViewModel
原理：mvvm的设计原理是基于mvc的，所以说mvvm不算是一种创新，充其量是一种改造，这其中的ViewModel便是一个小小的创新
概念图：
Vue简介小结
（1）Vue.js 是目前最火的一个前端框架，是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
（2）Vue.js 是一套构建用户界面的框架，只关注数据层

Vue的使用安装
Vue.js是一个渐进式的js框架，前期的基础学习阶段，引入vue先用最简单的方式—通过script加载CDN文件，或者下载后通过script标签引入。

CDN版本：
①开发环境版本，包含了完整的警告和调试模式

③注意：在开发环境下不要使用压缩版本，不然就失去了所有常见错误相关的警告!

实例

双向绑定

Vue的创建

Vue应用的创建十分简单，通过构造函数Vue即可创建Vue根实例，并启动Vue应用：
var app = new Vue({
代码块
})

绑定数据

声明数据分两种：1.显式声明数据

2.指向已有变量

文本插值也可以进行基本运算和对象方法的执行

指令：

文本插值{{}}
原始HTML指令：v-html
一次性绑定修饰符：v-once
跳跃编译修饰符：v-pre
动态属性修饰符：v-bind
事件绑定指令：v-on
注意：
文本节点用{{}}文本插值语法，属性节点用v-bind动态属性修饰符。

语法糖：

v-bind:缩为：
v-on:缩为@