vue超详细教程，手把手教你完成vue项目
发布时间：2022-08-19 12:41
Vue
一. Vue简介
Vue是于2013年(与React框架同年发布)推出的一个渐进式、自底向上的前端框架，它的作者叫尤雨溪。那么什么叫做渐进式框架呢？比较官方的说法就是：
以Vue内核作为核心，随着业务的深入、需求的递增，可以使用其周边生态(vue-router、vuex、ssr等)深度应用到项目中。那么通俗上来讲：就是我们可以使用vue的部分功能不断的迭代掉我们项目中部分的功能，从表单提交到列表渲染，再到多路由应用，再到SSR等。 Vue主要具备以下几个特点：
- 解耦视图和数据
- 组件复用
- 前端路由
- 状态管理
- 虚拟DOM
Vue的学习不需要你具备 Rect、Angular的基础，只需要具备HTML、CSS、Javascript的基础即可。
二. Vue入门
2.1 安装
Vue的安装主要有三种方式：
- CDN引入
- 下载本地引入
- vue-cli脚手架的方式
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue">script>
<script src="./lib/js/vue.js">script>
2.2 初体验
<div id="app">
{{msg}}
div>
<script src="./lib/js/vue.js">script>
<script>
// 使用 vue.js 内部提供的 Vue这个构造方法，接收一个对象
new Vue({
el: "#app", // 表示将当前创建的这个Vue对象挂载到哪个节点
data() { // vue的数据部分
return {
// 在return内部定义页面所需要的数据
msg: "Hello World"
}
}
});
script>
2.4 Vue常用指令
2.4.1 模板语法指令
v-text():v-text是用于操作纯文本，它会替代显示对应的数据对象上的值，可以简写为{{}}, 即插值表达式
v-html:将内容以html的形式呈现在页面。
v-bind:将值绑定到标签的自定义属性上，形式为 v-bind:title=“mytitle”，可以简写为 :属性名
2.4.2 其他指令
v-cloak:用来控制当只有数据呈现才显示Vue对应的dom元素。
v-model:双向数据绑定。
v-if:值如果为true的情况下，显示标签，如果为false会移除标签。
v-else-if:与v-if配合使用。
v-else:与v-if配合使用。
v-show:如果为true,显示信息，如果为false则隐藏标签。
v-for:循环遍历。语法形式为 v-for=“item in list”
v-on:click:点击事件，可以简写为@click。在如上的指令中比较不好理解的就是
v-bind指令，现给出如下示例：
v-bind案例一:
<style>
.box {
width: 200px;
height: 200px;
background-color: purple;
}
.my-box {
width: 100px;
height: 100px;
background-color: plum;
}
style>
<div id="app">
<div :class="cls" :data-id="id" :title="title">div>
<div :class="{box: isBox}">div>
<div :class="{'my-box': isBox}">div>
<div :class="isBox ? 'box' : 'my-box'">div>
div>
<script src="../node_modules/vue/dist/vue.min.js">script>
<script>
new Vue({
el: '#app',
data() {
return {
id: 45,
cls: 'box',
title: '这是一个盒子',
isBox: true
}
}
})
script>
| DOM的结果 |
|---|
 |
v-bind指令案例二：
<!-- css样式如下 -->
<style>
.box {
width: 200px;
height: 200px;
background-color: #e3e3e3;
}
.my-box {
color: red;
}
</style>
<!-- 对应的html代码如下 -->
<div id="app">
<!-- 多样式需要判定 -->
<div :class="{box: isBox, 'my-box': isBox}">div中的文字</div>
<!-- 针对某个样式为固定，另外一个样式需要通过boolean值来判断是否要加，使用[]的方式 -->
<div :class="['box', {'my-box': isBox}]">div中的文字</div>
</div>
<!-- js代码如下 -->
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
isBox: true,
}
}
})
</script>
| DOM的结果 |
|---|
 |
v-bind实现样式的绑定案例(了解)：
<body>
<div id="app">
<div :style="{fontSize: fz, 'background-color': bc}">文字div>
div>
<script src="../node_modules/vue/dist/vue.min.js">script>
<script>
new Vue({
el: '#app',
data() {
return {
fz: '100px',
bc: 'red'
}
}
})
script>
body>
| DOM的结果 |
|---|
 |
案例:
- 表格数据的添加与删除
- 表单渲染与数据的获取
三. Vue计算属性与监听器
计算属性是用来存储数据，而且数据可以进行逻辑操作，是基于其依赖的进行更新，只有在相关依赖发生变化的时候才会更新变化，计算属性是缓存的，只要相关依赖不发生变化，多次访问属性值是之前I计算得到的值，并不会多次执行。
监视器就是可以通过watch的方式观察某个属性的变化，然后做出相应的处理。
我们通过如下两个案例加强对这两个概念的理解：
| 案例一 |
|---|
 |
| 案例二 |
|---|
 |
四. Vue其他
4.1 MVC、MVP、MVVM
MVC(Model-View-Controller) 是一种软件开发架构的设计模式，例如前端的SSR(Server Side Render，服务端渲染)就是非常典型的MVC设计模式，是由用户发起一个请求，然后由控制器(路由)将对应的数据(Model)渲染到一个页面，然后返回给用户。
| MVC设计模式 |
|---|
 |
MVP(Model View Presenter)，是在某些场景下由MVC演变而来，对于Android和C#开发的同学可能比较的熟悉，它完全弱化了View的逻辑处理，对于视图上数据的渲染是在Presenter中来完成修改，熟悉安卓和C#的朋友可能更加熟悉。
| MVP设计模式 |
|---|
 |
MVVM(Model View ViewModel) 与 MVP的设计模式类似，唯一的区别就在于View的变动，会自动的反应到ViewModel上，反之也是。
| MVVM设计模式 |
|---|
 |
4.2 双向数据绑定原理
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过
Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体实现步骤如下：
- 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
- 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
- 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
| 双向数据绑定原理 |
|---|
 |
<script>
let obj = {}
Object.defineProperty(obj, 'name', {
get() { },
set() { }
})
script>
参考地址：https://mp.weixin.qq.com/s?__biz=MzI3NTM1MjExMg==&mid=2247483789&idx=1&sn=e7297ec3443007015117637709f27521&scene=21#wechat_redirect
4.3 Vue生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM，在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，目的是给予用户在一些特定的场景下添加他们自己代码的机会。
Vue生命周期的主要阶段：创建，挂载，更新，销毁。
挂载（初始化相关属性）
beforeCreate ---- 备孕
注意点：在此时不能获取data中的数据，也就是说 this.msg 得不到任何内容
created ---- 怀上了
beforeMount ---- 怀胎十月
mounted【页面加载完毕的时候就是此时】 ---- 生下来了
注意点：默认情况下，在组件的生命周期中只会触发一次