目录
一、概述
1、Vue 介绍
Vue 全称为 Vue.js,是一个构建数据驱动的 web 界面的渐进式框架,此框架是开源世界华人的骄傲,因为它的作者是位中国人–尤雨溪(Evan You)。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。
- Vue 官网:https://cn.vuejs.org/
- Vue 学习官网:https://cn.vuejs.org/v2/guide/
2、MVVM 模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化,让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model)
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层。它的核心是 MVVM 中的 VM, 也就是 ViewModel。 ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量级的架构让前端 开发更加高效、便捷。
二、Vue 入门
1、使用 IDEA 开发 Vue
【1】使用 web 骨架创建 Maven 工程
使用 idea 自带的 web 骨架创建 Maven 工程,并设置相关目录,引入 js,在 webapp 目录下创建要编写的 HTML 页面,创建好后目录结构如下:
【2】编写第一个Vue程序
步骤如下:
- 导入vuejs:
- <script src="js/vuejs-2.5.16.js"></script>
- 定义 id 为 app 的区域:
- <div id="app">
</div>
- <div id="app">
- 创建 vue 对象:
- new Vue({...});
- 将 id 为 app 的区域给 vue 接管
- el:"#app"
- 定义数据:
- date:{
message:"hello onestar"
}
- date:{
- 将定义和显示分离:
- 在app区域编写插值表达式:{{message}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>oneStar</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
{{message}} <!--将定义和显示分离,编写插值表达式-->
</div>
<script>
//view model
new Vue({
el:"#app", //将 id 为 app 的区域给 vue 接管
data:{ //定义数据
message:"hello onestar"
}
});
</script>
</body>
</html>
【3】部署 Tomcat 访问页面
2、插值表达式
在刚刚的入门案例中,将定义和显示分离,用到了插值表达式,插值表达式就是将数据进行绑定,数据绑定最常见的形式就是使用“Mustache”,也就是双大括号的文本插值,Mustache 标签将会被替代为对应数据对 象上属性的值。无论何时,绑定的数据对象上属性发生了改变,插值处的内容都会更新。
Vue.js提供了完全的 JavaScript 表达式支持:
{{number + 1}}
{{ok ? "yse" : "no"}}
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个 表达式,所以下面的例子都不会生效。
<!--插值表达式不支持-->
{{var a = 1;}}
{{if(a == 10){}}}