邂逅Vue开发
-
遇见Vuejs
1.1.为什么学习Vuejs？
-
每个人学习Vue的目的是各不相同的。
-
可能你的公司正要将原有的项目使用Vue进行重构。口也可能是你的公司新项目决定使用Vue的技术栈。
-
当然，如果现在正在换工作，会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求。
-
当然，作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。
招聘要求.png
1.2.Vuejs的特点
-
Vue (读音 /vjuː/，类似于 view)，不要读错。
-
Vue是一个渐进式的框架，什么是渐进式的呢？ 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
-
Vue有很多特点和Web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
-
这些特点，不需要一个个去记住，在后面的学习和开发中都会慢慢体会到的。
-
学习Vuejs的前提？ 从零学习Vue开发，并不需要具备其他类似于Angular、React，甚至是jQuery的经验。 但是需要具备一定的HTML、CSS、JavaScript基础。
-
-
安装Vuejs
- 方法一：直接CDN引入
你可以选择引入开发环境版本还是生产环境版本
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
-
体验Vuejs
3.1.Hello Vuejs案例
<div id="app">
<h2>{{message}}</h2>
<h1>{{name}}</h1>
</div>
<!-- 引入Vue-->
<script src="../../Vuejs/vue.js"></script>
<script>
//const(常量) let (变量)
// 编程范式：声明式编程
const app = new Vue({
//el 用于挂载要管理的元素
el: "#app",
// 定义数据
data: {
message: "hello vue",
name: "sunshine"
}
})
// 元素js的做法(编程范式: 命令式编程)
// 1.创建div元素,设置id属性
// 2.定义一个变量叫message
// 3.将message变量放在前面的div元素中显示
// 4.修改message的数据: 今天天气不错!
// 5.将修改后的数据再次替换到div元素
</script>
-
创建Vue对象的时候，传入了一些options：{}
{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
{}中包含了data属性：该属性中通常会存储一些数据 这些数据可以是我们直接定义出来的，比如像上面这样。也可能是来自网络，从服务器加载的。
浏览器执行代码的流程： 执行到<div id="app"></div>div>代码显然出对应的HTML 执行const app = new Vue时候创建Vue实例，并且对原HTML进行解析和修改。
Vue的好处是可以做到响应式的。3.2.Vue显示列表
- 现在，我们来展示一个更加复杂的数据：数据列表。 比如我们现在从服务器请求过来一个列表，希望展示到HTML中。 HTML代码中，使用v-for指令遍历列表
<body>
<div id="app">
<h2>电影列表</h2>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<!-- 引入Vue-->
<script src="../../Vuejs/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "hello vue",
movies: ["大话西游","泯灭","不二神探"]
}
})
</script>
</body>
是不是变得So Easy，我们再也不需要在JavaScript代码中完成DOM的拼接相关操作了
而且，更重要的是，它还是响应式的。当我们数组中的数据发生改变时，界面会自动改变。
3.3.实现计数器
-
实现功能
点击 + 计数器+1
点击 - 计数器 -1
计数器案例.png
- 代码实现
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<!-- <button v-on:click = "counter++">+1</button>-->
<!-- <button v-on:click = "counter--">-1</button>-->
<button v-on:click = "counter++">+1</button>
<button @click = "counter--">-1</button>
</div>
<!-- 引入vue-->
<script src="../../Vuejs/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0
},
methods: {
increment() {
this.counter++
},
decrement() {
this.counter--
}
}
})
</script>
</body>
- 新的属性：methods，该属性用于在Vue对象中定义方法。
- 新的指令：@click, 该指令用于监听某个元素的点击事件，并且需要指定当发生点击时，执行的方法(方法通常是methods中定义的方法)
你可能会疑惑？ 这些@click是什么东西？其实@是v-on的语法糖 - Vue对象中又是定义el/data/methods，到底都有哪些东西可以定义，以及它们的作用是什么？ 这些疑惑在后续学习中都会一一解开。
-
Vuejs的MVVM架构
-
Vue中的MVVM
-
什么是MVVM?
MVVM 是Model View ViewMode
通常我们学习一个概念，最好的方式是去看维基百科(对，千万别看成了百度百科)
-
View层（视图层）：
在我们前端开发中，通常就是DOM层，主要的作用是给用户展示各种信息。 -
Model层（数据层）：
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。 -
VueModel层（视图模型层）：
视图模型层是View和Model沟通的桥梁。 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中 ；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。 -
我们直接来看Vue的MVVM
-
-
计数器的MVVM 我们的计数器中就有严格的MVVM思想 View依然是我们的DOM Model就是我们我们抽离出来的obj ViewModel就是我们创建的Vue对象实例
-
它们之间如何工作呢？
首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。
有了Vue帮助我们完成VueModel层的任务，在后续的开发，我们就可以专注于数据的处理，以及DOM的编写工作了。
计数器的MVVM.png
-
-
创建Vue实列传入的options
我们在创建Vue实例的时候，传入了一个对象options。 这个options中可以包含哪些选项呢？
5.1.目前掌握这些选项：
-
el: 类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。
-
data: 类型：Object | Function （组件当中data必须是一个函数） 作用：Vue实例对应的数据对象。
-
methods: 类型：{ [key: string]: Function } 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。
-
-
Vue的生命周期
-
生命周期的图
生命周期.png
-
-
翻译之后的图
生命周期(翻译).png
-
网上的其他的生命周期的图
(生命周期).png
- beforeCreate
实例组件刚创建，元素DOM和数据都还没有初始化，暂时不知道能在这个周期里面进行生命操作。
-
created
数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染。有人问了，请求都是异步的，并不会阻碍实例加载。这是我个人水平的问题，这边改正，在这个周期里面，请求因为是异步的，不会阻碍实例加载，除非是那些同步操走才会导致页面空白。这样说来，在这个周期里面进行请求，渲染速度反而会更快。
-
beforeMount
DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。先占住了一个坑。
-
mounted
数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。可以在这边请求，不过created请求会更好一些。这个周期适合执行初始化需要操作DOM的方法。
-
beforeUpdate
只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。
-
updated
只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。
-
beforeDestroy
这个周期是在组件销毁之前执行，在我项目开发中，觉得这个其实有点类似路由钩子beforeRouterLeave,都是在路由离开的时候执行，只不过beforeDestroy无法阻止路由跳转，但是可以做一些路由离开的时候操作，因为这个周期里面还可以使用data和method。比如一个倒计时组件，如果在路由跳转的时候没有清除，这个定时器还是在的，这时候就可以在这个里面清除计时器。
-
Destroyed
说实在的，我还真的不知道这个周期跟beforeDestroy有什么区别，我在这个周期里面调用data的数据和methods的方法都能调用，所以我会觉得跟beforeDestroy是一样的。
网友评论