vue超详细教程，手把手教你完成vue项目

发布时间：2022-08-19 12:41

Vue

一. Vue简介

​ Vue是于2013年(与React框架同年发布)推出的一个渐进式、自底向上的前端框架，它的作者叫尤雨溪。那么什么叫做渐进式框架呢？比较官方的说法就是：以Vue内核作为核心，随着业务的深入、需求的递增，可以使用其周边生态(vue-router、vuex、ssr等)深度应用到项目中。那么通俗上来讲：就是我们可以使用vue的部分功能不断的迭代掉我们项目中部分的功能，从表单提交到列表渲染，再到多路由应用，再到SSR等。

​ Vue主要具备以下几个特点：

  1. 解耦视图和数据
  2. 组件复用
  3. 前端路由
  4. 状态管理
  5. 虚拟DOM

Vue的学习不需要你具备 Rect、Angular的基础，只需要具备HTML、CSS、Javascript的基础即可。

二. Vue入门

2.1 安装

Vue的安装主要有三种方式：

  1. CDN引入
  2. 下载本地引入
  3. 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的结果
vue超详细教程，手把手教你完成vue项目_第1张图片

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的结果
vue超详细教程，手把手教你完成vue项目_第2张图片

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的结果
在这里插入图片描述

案例:

  1. 表格数据的添加与删除
  2. 表单渲染与数据的获取

三. Vue计算属性与监听器

​ 计算属性是用来存储数据，而且数据可以进行逻辑操作，是基于其依赖的进行更新，只有在相关依赖发生变化的时候才会更新变化，计算属性是缓存的，只要相关依赖不发生变化，多次访问属性值是之前I计算得到的值，并不会多次执行。

​ 监视器就是可以通过watch的方式观察某个属性的变化，然后做出相应的处理。

​ 我们通过如下两个案例加强对这两个概念的理解：

案例一
vue超详细教程，手把手教你完成vue项目_第3张图片
案例二
vue超详细教程，手把手教你完成vue项目_第4张图片

四. Vue其他

4.1 MVC、MVP、MVVM

​ MVC(Model-View-Controller) 是一种软件开发架构的设计模式，例如前端的SSR(Server Side Render，服务端渲染)就是非常典型的MVC设计模式，是由用户发起一个请求，然后由控制器(路由)将对应的数据(Model)渲染到一个页面，然后返回给用户。

MVC设计模式
vue超详细教程，手把手教你完成vue项目_第5张图片

​ MVP(Model View Presenter)，是在某些场景下由MVC演变而来，对于Android和C#开发的同学可能比较的熟悉，它完全弱化了View的逻辑处理，对于视图上数据的渲染是在Presenter中来完成修改，熟悉安卓和C#的朋友可能更加熟悉。

MVP设计模式
vue超详细教程，手把手教你完成vue项目_第6张图片

​ MVVM(Model View ViewModel) 与 MVP的设计模式类似，唯一的区别就在于View的变动，会自动的反应到ViewModel上，反之也是。

MVVM设计模式
vue超详细教程，手把手教你完成vue项目_第7张图片

4.2 双向数据绑定原理

​ vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体实现步骤如下：

  1. 实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
  2. 实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
  3. 实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
双向数据绑定原理
vue超详细教程，手把手教你完成vue项目_第8张图片 
<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【页面加载完毕的时候就是此时】 ---- 生下来了

      注意点：默认情况下，在组件的生命周期中只会触发一次

相关推荐

镜像分层原理及容器层写时复制

让企业降本、增效！开利网络第十期链企来沙龙会圆满结束

你真的懂01背包问题吗？01背包的这几问你能答出来吗？

Datenlord | Rust 语言无锁数据结构的内存管理

144.二叉树的前序遍历 js实现

mysql命令和sql语句学习

设置Application.targetFrameRate没有起作用的原因

如何参与一个 GitHub 开源项目？

Kerberos

C语言经典练习题（一）

12 岁印度少年出手，Ubuntu Unity 桌面 6 年后起死回生

Linux Mysql之中间件Mycat 读写分离

Docker Compose

Springboot + Vue + shiro 实现前后端分离、权限控制

B站回应“2 亿余条用户信息疑似泄露”；iPhone 14 Pro紫色渲染图曝光；罗永浩官宣新创业公司名字|极客头条

jenkins git maven tomat 项目拉取编译自动部署（操作详细）

如何进行微信多开、微信防撤回？

PyTorch深度学习：60分钟入门(Translation) PyTorch深度学习：60分钟入门(Translation)

android组件！Android高级工程师系列学习路线介绍，重难点整理

跟李沐学习深度学习-线性回归和基础优化函数

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网，如有侵权请联系：561261067@qq.com

桂ICP备16001015号