什么是Vue.js

Vue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架,是一个渐进式和响应式的框架。

  • Vue有很多特点和Web开发中常见的高级功能
    • 解耦视图和数据
    • 可复用的组件
    • 前端路由技术
    • 状态管理
    • 虚拟DOM

【Vue中文官网,观看WHY VUE.JS?】:https://cn.vuejs.org/

Vue.js安装

  • 方式一:直接CDN引入
    你可以选择引入开发环境版本还是生产环境版本
1
2
3
4
<!-- 开发环境版本,包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue初体验

HelloVuejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">{{message}}</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '下午好,阿楠'
}
})
</script>
</body>
</html>

我们来阅读JavaScript代码,会发现创建了一个Vue对象

创建Vue对象的时候,传入了一些options:{}

  • {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显我们这里是挂载到了id为app的元素上。
  • {}中包含了data属性:该属性中通常会存储一些数据,这些数据可以是我们直接定义出来的,比如像上面这样。也可能是来自网络,从服务器加载的。

浏览器执行代码的流程:
执行到10~13行代码显然出对应的HTML
执行第16行代码创建Vue实例,并且对原HTML进行解析和修改。

Vue列表显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<ul>
<li v-for="item in star">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
star: ['刘亦菲','程潇','IU','林允儿']
}
})
</script>

它还是响应式的。
也就是说,当我们数组中的数据发生改变时,界面会自动改变。
打开开发者模式的console试一下

案例:计数器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数为:{{count}}</h2>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
add: function () {
console.log('add被执行');
this.count++
},
sub: function (){
console.log('sub被执行');
this.count--
}
}
})
</script>
</body>
</html>

Vue中的MVVM

  • View层:
    视图层
    在我们前端开发中,通常就是DOM层。
    主要的作用是给用户展示各种信息。
  • Model层:
    数据层
    数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
    在我们计数器的案例中,就是后面抽取出来的obj,当然,里面的数据可能没有这么简单。
  • ViewModel层:
    视图模型层
    视图模型层是View和Model沟通的桥梁。
    一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中
    另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。

我们的计数器中就有严格的MVVM思想,View依然是我们的DOM,Model就是我们data中的数据,可以抽离出来成为obj,ViewModel就是我们创建的Vue对象实例。

找了一篇相对好理解的博客,了解MVVM以及MVVM和MVC的区别:MVC和MVVM的区别

创建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的一些方法,可以在其他地方调用,也可以在指令中使用。

Vue的生命周期