# 邂逅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