内容概述
- 认识Vue
- 为什么学习Vue
- 简单认识Vue
- Vue安装方式
- CDN导入
- 下载引入
- Vue初体验
- Hello Vue
- Vue列表展示
- 案例：计数器
- Vue的MVVM
- Vue中的MVVM
Vue简介
为什么学习Vue
目前前端开发，都是基于框架开发的，最火的就是前端三大框架Angular、React、Vue
其中，在国内的生态环境下，Vue是最火的。
不管是拿来开发Web站点，移动端应用，甚至小程序，都吃得消。
而且Vue是前端三大框架中入门最容易的，学完这个后再去学习其他框架也很方便（一通百通）
简单认识Vue
-
Vue是一个渐进式的框架
- 可以把Vue当做一个js库一样在页面上进行使用（旧项目中）
- Vue本身有完整的生态（Core+Vue+router+Verx+…）
-
Vue有很多特点和Web开发中常用的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
Vue安装
- js直接引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- npm安装
案例体验
HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id=app>{{message}}</div>
<script>
let app = new Vue({
el:'#app',
data:{
message:'Hello Vue'
}
})
</script>
</body>
</html>
列表展示
知识点：v-for指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id=app>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
movies:['电影1','电影2','电影3','电影4','电影5']
}
})
</script>
</body>
</html>
计数器
知识点：@click、methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id=app>
<h2>当前计数：{{counter}}</h2>
<!--v-on:click简写后 @click-->
<button v-on:click="addOne">+</button><button @click="minusOne">-</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
counter:0
},
methods:{
addOne:function(){
this.counter++
},
minusOne:function(){
this.counter--
}
}
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6NetMwa7-1583507603018)(http://tuchuang.zhangln.com/9O6DzQ.png)]
MVVM
Model-View-ViewModel
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OKuDOn4H-1583507603020)(http://tuchuang.zhangln.com/sv7NyF.png)]
Vue的options选项
详见手册，最基本的几个包括
- el
- Vue对哪个元素生效
- data
- Model数据
- methods
- 定义方法
Vue生命周期
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wRRehytN-1583507603021)(http://tuchuang.zhangln.com/JvvCvZ.jpg)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19fKQVVG-1583507603021)(http://tuchuang.zhangln.com/KRz7A7.png)]
