1. 认识Vuejs
1.1 简单认识Vuejs
- Vue (读音 /vju:/，类似于view)，不要读错。
- Vue是一个渐进式的框架，什么是渐进式的呢？
- 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
- 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
- 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
- Vue有很多特点和Web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
2. Vuejs安装方式
2.1 CDN引入
可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
2.2 下载和引入
2.3 NPM安装管理
$ npm install vue
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>
<h1>{{name}}</h1>
</div>
<script src="../../js/vue.js"></script>
<script>
// let(变量)/const(常量)
// 编程范式: 声明式编程
const app = new Vue({
el: '#app', // 用于挂载要管理的元素
data: { // 定义数据
message: 'Hello Vuejs',
name: 'soulballad'
}
})
// 原始js的做法(编程范式: 命令式编程)
// 1.创建div元素,设置id属性
// 2.定义一个变量叫message
// 3.将message变量放在前面的div元素中显示
// 4.修改message的数据: 今天天气不错!
// 5.将修改后的数据再次替换到div元素
</script>
</body>
</html>
3.2 Vue列表展示
<div id="app">
<ul>
<!-- 使用v-for进行遍历 -->
<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>
3.3 案例：计数器
<div id="app">
<h2>当前计数： {{counter}}</h2>
<!--<button v-on:click="counter++">+</button>-->
<!--<button v-on:click="counter--">-</button>-->
<button v-on:click="add">+</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 () {
this.counter++;
},
sub: function () {
this.counter--;
}
}
})
</script>
4. Vuejs的MVVM
-
View层：
- Ø视图层
- Ø在我们前端开发中，通常就是DOM层。
- Ø主要的作用是给用户展示各种信息。
-
Model层：
- Ø数据层
- Ø数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
- Ø在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
-
VueModel层：
- Ø视图模型层
- Ø视图模型层是View和Model沟通的桥梁。
- Ø一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
- Ø另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
5. Vue生命周期
5.1 Vue实例options
穿件Vue对象时，可以传入一个 options 对象，这个options可以包含以下选项
目前掌握这些选项：
-
el:
- 类型：string | HTMLElement
- 作用：决定之后Vue实例会管理哪一个DOM。
-
data:
- 类型：Object | Function （组件当中data必须是一个函数）
- 作用：Vue实例对应的数据对象。
-
methods:
- 类型：{ [key: string]: Function }
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
5.2 Vue生命周期
评论区