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:缩为@