【HZHV001】黄子涵学习Vue

2022/4/6 6:22:07

编程Tag： js vue 页面渲染 Dom 摘抄黄子涵 HZHV001

本文主要是介绍【HZHV001】黄子涵学习Vue，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言

经过看书，又看视频，又回到看书的学习过程。这次可能不一样，这次选取的是北大的一个学生的学习方法：阅读+摘抄+评论（通过费曼学习法阐述一遍晦涩的内容），在我的印象中，我们伟大的毛主席也是这样学习的，当时他把湘潭师范学院的书都给加上自己的评论。在看书的过程中如果有实践尽可能实践一遍，不理解不懂的东西不要往脑子里塞。学习Vue选择的是Vue官网和《深入浅出Vue.js》这本书，后期如果需要实践的话，可能要添加其他书籍。

安装

摘抄

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

这里的全局变量应该和C语言差不多。

声明式渲染

文本插值

实践源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>声明式渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="huangzihan">
        {{ HZHmessage }}
    </div>

    <script>
        var app = new Vue({
            el: '#huangzihan',
            data: {
                HZHmessage: '黄子涵'
            }
        })
    </script>
</body>
</html>

摘抄

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

实验截图

这里我们可以知道响应式概念和数据有关，那比如一个场景，当用户缩小窗口，引起窗口的高度和宽度发生变化，这里的宽度和高度也就是它说的数据，那么页面也对应的发生变化，这是不是一种响应式呢？

摘抄

一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。

动态绑定

实践源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="huangzihan">
        <span v-bind:title="hzhMessage">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>

    <script>
        var app2 = new Vue({
            el: '#huangzihan',
            data: {
                hzhMessage: '页面加载于' + new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

摘抄

。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 hzhMessage property 保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

实践截图

对刚才实践的过程描述一下：我们看到模板中有个v-bind指令，这个指令绑定了一个hzhMessage，但是这个hzhMessage真正的数据不在模板中，而是在vue身上。vue的作用就是帮我们代理这个数据，说到代理我们应该想起的是中介，最常见的就是房地产中介，通过房地产中介这个实例来解释一下上面的概念。首先是数据啦，数据在房地产代理的这个场景中就是房价，首先房地产中介会受到我们的委托，将房价挂出来，这样房价是不是就由房地产中介代理了啊，剩下的工作就交给他们去做。而响应式怎么解释呢？假如有一天，我们要改变房价，只要打一个电话给房地产中介，然后他们就拿着我们修改的房价重新挂出来，这样是不是数据一修改就马上更新，是不是响应式了。

条件与循环

v-if

实践源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件与循环</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="huangzihan3">
        <p v-if="seen">看见黄子涵了吗？</p>
    </div>

    <script>
        var huangzihan3 = new Vue({
            el: '#huangzihan3',
            data: {
                seen: true
            }
        })
    </script>
</body>
</html>

摘抄

继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

实践截图

v-for

元编程

摘抄

所谓元编程，简单来说，是指框架的作者使用一种编程语言固有的语言特性，创造出相对新的语言特性，使得最终使用者能够以新的语法和语义来构建他们的应用程序，从而在某些领域开发中获得更好的开发体验。

这里指的是原来Vue这个框架是用JavaScript编写的，但是通过封装，Vue自己有又一些自己的语法，比如指令语法，插值语法。

作者在书中提出的一些问题

摘抄

Vue.js的响应式原理，理解为什么修改数据视图会自动更新；

虚拟DOM（Virtual DOM）的概念和原理；

模板编译原理，理解Vue.js的模板是如何生效的；

Vue.js整体架构设计与项目结构；

深入理解Vue.js的生命周期，不同的生命周期钩子之间有什么区别，不同的生命周期之间Vue.js内部到底发生了什么；

Vue.js提供的各种API的内部实现原理；

指令的实现原理；

过滤器的实现原理；

使用Vue.js开发项目的最佳实践。

这是摘抄书中的问题，暂时还没有什么想法。

命令式操作DOM

摘抄

这本质上是命令式操作DOM的问题，我们曾经用jQuery操作DOM写需求，但是当应用程序变复杂后，代码就像一坨意大利面一样，有点难以维护。

估计作者像喷一下，一般我们都会吐槽“堆着像屎山一样”。写过页面都知道，一旦HTML和CSS、JavaScript，随着页面变复杂之后，这三个的代码简直多得不得了，W3C的标准是将页面的结构，页面的行为，页面与用户交互的行为分开，但是这三样东西逐渐变庞大了呢？或许Vue能给我们答案，这个答案是什么呢？答案就在下面那段话中

组件

摘抄

Vue.js允许你将一个网页分割成可复用的组件，每个组件都有自己的HTML、CSS和JavaScript来渲染网页中一个对应的位置。

这句话就解开我的疑问，当三件套逐渐变多的时候，应该怎么处理！

渐进式框架

摘抄

在开发Vue.js的整个过程中，它的定位发生了变化，一开始的定位是：
“Just a view layer library”
就是说，最早的Vue.js只做视图层，没有路由，没有状态管理，也没有官方的构建工具，只有一个库，放在网页里就直接用。
后来，他发现Vue.js无法用在一些大型应用上，这样在开发不同大小的应用时，需要不停地切换框架以及思维模式。尤雨溪希望有一个方案，有足够的灵活性，能够适应不同大小的应用需求。
所以，Vue.js就慢慢开始加入了一些官方的辅助工具，比如路由（Router）、状态管理方案（Vuex）和构建工具（vue-cli）等。加入这些工具时，Vue.js始终维持着一个理念：“这个框架应该是渐进式的。”
这时Vue.js的定位是：The Progressive Framework翻译成中文，就是渐进式框架。
所谓渐进式框架，就是把框架分层。
最核心的部分是视图层渲染，然后往外是组件机制，在这个基础上再加入路由机制，再加入状态管理，最外层是构建工具，

这段话很好的解释了渐进式框架这个概念，我想我们人也一样先把自己能做的事情做好，再逐渐扩大自己的能力范围，这里我解释为“渐进式发展”。

渲染与响应式的关系

摘抄

从状态生成DOM，再输出到用户界面显示的一整套流程叫作渲染，应用在运行时会不断地进行重新渲染。而响应式系统赋予框架重新渲染的能力，其重要组成部分是变化侦测。变化侦测是响应式系统的核心，没有它，就没有重新渲染。框架在运行时，视图也就无法随着状态的变化而变化。

这段话解释了渲染和响应式的关系，响应式是我们修改了数据，Vue会更新一下，然后页面刷新一下，修改数据从页面刷新这个过程叫做渲染，什么是状态呢？我们可以这样理解，就修改数据这部分，是不是可以分为修改数据之前，修改数据之后，这就是两个不同的状态了。

追踪变化

摘抄

aScript（简称JS）中，如何侦测一个对象的变化？其实这个问题还是比较简单的。学过JavaScript的人都知道，有两种方法可以侦测到变化：使用Object.defineProperty
和ES6的Proxy 。

这篇关于【HZHV001】黄子涵学习Vue的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

【HZHV001】黄子涵学习Vue

前言

安装

摘抄

评论

声明式渲染

文本插值

实践源码

摘抄

实验截图

评论

摘抄

动态绑定

实践源码

摘抄

实践截图

评论

条件与循环

v-if

实践源码

摘抄

实践截图

v-for

元编程

摘抄

评论

作者在书中提出的一些问题

摘抄

评论

命令式操作DOM

摘抄

评论

组件

摘抄

评论

渐进式框架

摘抄

评论

渲染与响应式的关系

摘抄

评论

追踪变化

摘抄

相关编程文章