Vue基本使用
[TOC]
简述
摘自百度百科
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动
MVVM模式
以前的MVC为
Model层—View层—Controller层
MVVM层分为
Model层—-View层—-ViewModel
Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。
View:它专注于界面的显示和渲染,在Vue中则是包含一堆声明式Directive和Component的视图模板。
ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在vue中“Vue对象实例”充当了这个ViewModel的角色;
安装
首先安装Node.js
Node.js安装很简单
Node.js地址 直接下载傻瓜式安装即可
然后创建好项目,以本人的Java项目为例
在终端里使用命令
npm install vue
这样就在此次项目中安装好了vue
也可以进行全局安装
npm install vue -g
ECMAScript6语法
常用语法
1 |
|
Vue常用语法
数据绑定
1 |
|
数据双向绑定
1 |
|
Vue表达式
1 | 一般表达式都是写在{{}} |
Vue指令
1 | v-text指令: |