1- Vue.js 介绍
1.1 Vue.js是什么?
- Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计 为可以自底向上逐层应用。
- Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一 方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。
官方网站: https://cn.vuejs.org/
1.2 为什么使用Vue.js
Vue是一个渐进式的框架，将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
解耦视图和数据，可复用的组件。
2- Vue.js 初体验
2.1 安装Vue的方式
方式一：直接CDN引入
1、在html页面使用script引入vue.js的库即可使用。
远程CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>
方式二：NPM安装
Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架创建vue.js工程.
2.2 入门程序
创建一个01-Vuejs初始化目录, 并且在目录下创建 01_vue入门程序.html 文件.
流程步骤
1、定义html，引入vue.js
2、定义app div，此区域作为vue的接管区域
3、定义Vue实例，接管app区域。
4、定义model（数据对象）
5、在app中展示数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue.js</title>
</head>
<body>
<!--2.定义一个div元素-->
<div id="app">
<h1>{{message}}</h1>
<h3>{{name}}</h3>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
// 1.创建test实例
const test = new Vue({
// 3.挂载要管理的元素
el: '#app',
// 4定义数据
data: {
message: 'Hello Vue.js',
name: 'guardWhy'
}
})
</script>
</body>
</html>
执行结果
入门程序分析
2.3 数据列表展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据列表展示</title>
</head>
<body>
<div id="test">
<ul>
<!--遍历操作-->
<li v-for="item in starts">{{item}}</li>
</ul>
</div>
<!--引入vue.js文件-->
<script src="js/vue.js"></script>
<script type="text/javascript">
// 创建对象
const test = new Vue({
el: '#test',
data : {
message: '你好啊',
starts: ['kobe', 'LeBron James', 'Stephen Curry']
}
})
</script>
</body>
</html>
执行结果
2.4 什么是MVVM？
MVVM（Model–View–Viewmodel）是一种软件架构模式。MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器， 这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。 视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。
View层(视图层)
在前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息。
Model层(数据层)
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层(视图模型层)
视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模拟计数器</title>
<style>
/*
MVM:前端的架构模式
M: Model 负责存储数据
V: View 负责页面展示
VM: ViewModel 负责业务处理(MVM模式的核心)
*/
</style>
</head>
<body>
<div id="app">
<!-- View视图部分!!-->
<h3>当前计数:{{counter}}</h3>
<!--监听元素的点击事件-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
// 创建的Vue实例,就是VM ViewModel
const app = new Vue({
el: '#app',
// data就是MVM模式中的 model
data: {
// 定义当前计数为0
counter: 0
},
// 定义方法
methods: {
add: function () {
console.log('add被指行');
this.counter++
},
sub: function () {
console.log('sub被执行了..');
this.counter--
}
}
})
</script>
</body>
</html>
执行结果
2.5 计数器的MVVM
计数器中就有严格的MVVM思想，View依然是的DOM，Model就是抽离出来的obj，ViewModel就是创建的Vue对象实例。
它们之间如何工作呢？
- 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
- 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。