# 邂逅Vuejs
## 一、认识vuejs
### 为什么学习Vuejs
+ 可能你的公司正要将原有的项目使用Vue进行重构
+ 可能你的公司新项目决定使用Vue的技术栈
+ 可能你现在正在换工作，你会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求
+ 作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能
### 简单认识一下Vuejs
+ Vue（读音 /vju:/）,类似view
+ Vue是一个渐进式的框架，什么是渐进式的呢？
- 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更加丰富的交互体验。
- 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
- 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
+ Vue有很多特点和web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
+ 学习Vuejs的前提
- 从零学习Vue开发，并不需要你具备其他类似与Angular、react，甚至是jQuery的经验（JQuery逐渐被淘汰）
- 但是你需要具备一定的HTML、CSS、JavaScript基础
## 二、Vuejs安装方式
### CND引入
对于制作原型或学习，你可以这样使用最新版本：
```
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
```
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏：
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
```
### 下载和引入
学习开发可以使用开发版本，体积较大但是拥有更加全面的警告跟提示
[开发版本](https://cn.vuejs.org/js/vue.js)包含完整的警告和调试模式
上线部署之后的生产可以使用生产版本，对一些警告进行了删除，体量更小
[生产版本](https://cn.vuejs.org/js/vue.min.js)删除了警告，33.30KB min+gzip
然后通过直接在html页面中的JavaScript中引入js文件即可使用
```
<script src="../js/vue.js"></script>
```
### NPM安装管理
主流使用，构建大型项目
## 三、Vuejs初体验
### Hello Vuejs
+ 我们来做我们的第一个Vue程序，体验一下Vue的响应式(数据一边，界面会发生一些响应，跟着改变,在浏览器的开发者模式用，使用console(控制台)然后敲入`app.message='vue真好用`')
```
<!-- HelloVuejs.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HelloVuejs</title>
</head>
<body>
交给vue管理
<div id="app">{{message}}</div>
没有交给vue管理
<div>{{message}}</div>
<script src="../js/vue.js"></script>
<script>
// let(变量) const(常量) es6一般不用var
// 编程范式：声明式编程
const app = new Vue({
el:'#app', // 用于挂载要管理的元素
data:{
message: "你好啊，于小鱼！"
}
})
// 原生js的做法 （编程范式：命令式编程）
// 1. 创建div元素，设置id属性
// 2. 定义一个变量叫message
// 3. 将message变量放在前面的div元素中显示
// 4. 修改message数据
// 5. 将修改后的数据再次替换到div中
</script>
</body>
</html>
```
+ 代码做了什么事情？
- 我们阅读JavaScript代码，会发现创建了一个Vue对象
- 创建对象的时候，传入了一些options:{}
+ {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里挂载在了id为app的元素上。
+ {}中包含了data属性：该属性中通常会存储一些数据
- 这些数据可以是我们直接定义出来的，比如上面这样。
- 也可能是来自网络，从服务器加载的。
### Vue列表展示
+ 现在，我们来展示一个更加复杂的数据：列表数据。
- 比如我们现在从服务器请求过来一个列表
- 希望展示到html中
+ html代码中，使用`v-for`指令
- 该指令后面会有详细讲解，这里先学会使用
```
<!-- 02-vue列表展示.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="YTF-8">
<title>vue列表展示</title>
</head>
<body>
<div id = "app">
<ul>
{{movies}}
我们不想要这种展示
</ul>
<ul>
<li>{{movies[0]}}</li>
<li>{{movies[1]}}</li>
<li>{{movies[2]}}</li>
<li>{{movies[3]}}</li>
这种可以但是太麻烦了，而且数组元素添加之后，新元素无法展示
</ul>
<ul>
<li v-for = "item in movies">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
movies:['海王','星际穿越','大话西游','肖申克的救赎']
}
})
</script>
</body>
</html>
```
+ 是不是变得So Easy，我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了
+ 而且最重要的是，它还是响应式的。
- 也就是说，当我们数组中的数据发生改变时，界面会自动改变。
- 依然让我们打开浏览器的开发者模式中的console(控制台),来试一下。
`app.movies.push("少年派")`
### 案例：计数器
+ 现在，我们来实现一个小的计数器
- 点击 `+` 计数器+1
- 点击 `-` 计数器-1
```
<!-- vue案例计数器.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue案例：计数器</title>
</head>
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button v-on:click="counter--">-</button>
<button v-on:click="counter++">+</button>
<button v-on:click="sub">函数式：-</button>
<button @click="add">函数式：+</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app', // 用于挂载要管理的元素
data:{
counter: 0
},
methods: {
add: function(){
// 上面的调用方式可以看到很简单，它叫做语法糖，是因为原本的写法有点麻烦，这是一种简写，也叫做给你点甜头
alert("add被执行")
console.log("add被执行");
this.counter++;
},
sub: function(){
alert("sub被执行")
console.log("sub被执行");
this.counter--;
}
}
})
// 以前
// 1. 拿button元素
// 2. 添加监听事件
</script>
</body>
</html>
```
+ 这里，我们又要使用新的指令和属性了
- 新的属性：`methods`,该属性用于vue对象中定义方法。
- 新的指令：`@click`，该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法（方法通常是在`methods`中定义的方法）
+ 这些`@click`是什么东西？vue对象中定义`el、data、methods`,到底都有那些东西可以定义，以及他们的作用是什么？
- 这些疑惑在后续学习中都会一一解开。
## 四、Vuejs的MVVM
### Vue中的MVVM
+ 什么是MVVM？
- Model View ViewModel
- ViewMode是Model跟View沟通的桥梁
- 想详细了解可以看看维基百科（千万别看百度百科）
+ Vue的MVVM
+ View层：
- 视图层
- 在我们前端开发中，通常就是DOM层。
- 主要作用是给用户展示各种信息。
+ Model层：
- 数据层
- 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
- 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
+ ViewModel层：
- 视图模型层
- 视图模型层是View和Model沟通的桥梁。
- 一方面他实现了Data Binding，也就是数据绑定，将Model的改变实时的反应在view中。
- 另一方面他实现了DoM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
## 五、创建Vue实例传入的options
### 我们在创建Vue实例的时候，传入了一个对象options。
+ 这个options中可以包含那些选项呢？
- [详细解析](https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE)这里面的选项多是可以添加的，但是不用一次性全记住，到后面学一个记一个就好
+ 目前掌握这些选项：
- el
+ **类型**：string ｜ HTMLElement
+ 作用：决定之后Vue实例会管理哪一个DOM
- data
+ **类型**：Object ｜ Function（组件中data必须为一个函数）
+ 作用：Vue实例对应的数据对象
- methods
+ **类型**：{[key:string]:Function}
+ 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用
01-邂逅vuejs