Vue学习（一）- 邂逅Vuejs
零、视频链接
一、邂逅Vuejs
1.认识Vuejs
1.1 为什么学习Vuejs
- Vuejs在前端需求中最多，找前端工作必备技能。
1.2 简单认识一下Vuejs
- vue是一个渐进式框架：可以将Vue作为应用的一部分嵌入，慢慢修改整个项目。
- 可以不需要具备其他类似Angular、React，甚至jQuery的经验。（但需要一定HTML、CSS、JavaScript基础）
- Vue有很多特点和web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
2.Vuejs安装方式
2.1 CDN引入
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
2.2 下载和引入
- 开发环境 https://vuejs.org/js/vue.js
- 生产环境 https://vuejs.org/js/vue.min.js
2.3 NPM安装管理
- 后续通过webpack和CLI的使用，使用该方式
3. Vuejs初体验
3.1 Hello Vuejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--定义一个容器-->
<div id="app">
<h2>{
{message}}</h2>
<h3>{
{name}}</h3>
</div>
<!--引入vue-->
<!--<script src="../js/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//let(变量)、const(常量)
// 编程范式:声明式编程
const app = new Vue({
el: '#app', //用于挂在vue需要管理的对象
data:{
//定义数据
message: 'Hello Vuejs',
name: 'ZYH'
}
})
//原生js做法(编程范式:命令式编程)
//1.创建div元素，设置id属性
//2.定义一个变量叫message
//3.将message变量放在前面的div元素中显示
</script>
</body>
</html>
3.2 Vue列表展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<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>
<!--引入vue-->
<!--<script src="../js/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message : '你好啊',
movies : ['星际穿越','大话西游','盗梦空间','少年派']
}
})
</script>
</body>
</html>
3.3 案例：计数器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>当前计数: {
{counter}}</h2>
<!-- v-on监听click事件，当监听到了就计数++或自减-->
<!-- <button v-on:click="counter++">+</button>-->
<!-- <button v-on:click="counter--;">-</button>-->
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<!--引入vue-->
<!--<script src="../js/vue.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
counter : 0
},
methods:{
add: function () {
this.counter++; //用来找到本对象中的counter，如果直接用counter会找全局变量的counter
console.log('add被执行');
},
sub: function () {
this.counter--;
console.log('sub被执行');
}
}
})
</script>
</body>
</html>
4. Vuejs的MVVM
4.1 Vue中的MVVM
-
MVVM : Model ViewModel View
-
view层
- 视图层
- 在我们前端开发中，通常就是DOM层。
- 主要的作用是给用户展示各种信息。
-
Model层
- 数据层
- 数据可能是我们固定死的数据，更多是来自我们服务器，从网络上请求下来的数据。
- 在我们计数器案例中们就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
-
VueModel层：
- 视图模型层
- 视图模型层是View和Model沟通的桥梁。
- 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。
- 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(带年纪、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
5. 创建Vue时, options可以放那些东西
- el:
- 类型：string| HTMLElement
- 作用：决定之后Vue实例会管理哪个DOM
- data:
- 类型：Object | Function（组件中data必须是一个函数）
- 作用：Vue实例对应的数据对象。
- methods:
- 类型：{[key:string]:Function}
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
- 生命周期函数