Vue介绍
概念
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库(如:vue-router,vue-resource,vuex)或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
详情请看官网:Vue.js.
MVVM模式的实现者
- Model:模型层,在这里表示JavaScript对象
- View:视图层,在这里表示DOM
- ViewModel:连接视图和数据的中间件,Vue.js即使MVVM中ViewModel层的实现者
在MVVM架构中,是不允许 数据 和 视图 直接通信的,只能通过ViewModel来通信,而ViewModel就是定义了一个Observer 观察者 - ViewModel 能够观察到数据的变化,并对视图对应的内容进行更新
- ViewModel 能够以监听到视图的变化,并能够通知数据发生变化
Vue.js就是一个MVVM 的实现者,他的核心就是实现了DOM 监听 与 数据绑定
Vue.js的优点
- 轻量级,体积小是一个重要指标
- 移动优先。更适合移动端,比如移动端的Touch事件
- 易上手,学习曲线平稳
- 吸取了Angular (模块化)和React(虚拟DOM)的长处,并拥有自己独特的功能,如:计算属性
- 开源,社区活动性高
- 等等…
Vue程序
第一个Vue程序
尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它,跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件,然后通过如下方式引入 Vue:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
但前提是在IDEA里面下载Vue插件
出现对应选项则成功安装!如若插件已经安装,则没有对应选项,要么重启IDEA,要么手动添加,详情请参考:关于 idea 安装 Vue 插件后新建文件不显示 Vue Component 的问题及解决方法
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
{
{ message }}
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</