[前端暴龙机,Vue2.x 进化 Vue3 ] Day1.在认识vue之前(一)

/images/emoticon/emoticon81.gif[讲古时间]: 回忆过去~ 痛苦的相思忘不了~
哈哈,记得刚出社会时,虽然说是张白纸,不过可能太白~ 导致处处碰壁
现在就来学学框架,跟着小白一起进化吧~
感觉会了框架,就 Level UP UP
本系列文章可能偏向新手阅读,从不认识框架到认识Vue框架,从Vue2.x的写法再到Vue3,有错误的地方再麻烦前辈纠正 XD

在认识vue之前

在介绍 vue 之前,会先说说一些算是关於框架的特性,与一般网页开发的概念有些不同,这也是当初面试时自己看官方文件有被问到的几个问题
(虽然当初要应徵的公司是要求我去看 Angular ~ 不过後来学会 Vue 後发现,框架的特性其实差异不大,目前也是用 Vue 在开发)

1. 资料驱动画面

甚麽是资料驱动画面?
资料驱动画面的概念就如同字面上的意思,画面上内容的改变已经不像之前透过 JavaScript 去操作 DOM 的方式来变更,而是透过资料来源的操作去更新画面内容,像是我们宣告了一个变数,只要去改变 变数的值 画面就会更新了

举例来说:
JavaScript 去操作 DOM 的方式

document.querySelector("#id").textContent  = "要更新的内容";

资料驱动画面的方式

// 这边先以变数的观念做解释

let idTextContent = '原本内容';

// 改变 idTextContent 的值 >> 更新画面显示
idTextContent = '要更新的内容';

不知道这样的举例,是不是可以稍微有略懂略懂的感觉~ XD

2. 双向绑定

双向绑定的概念我觉得是会跟 "资料驱动画面" 差不多,直接用例子来讲可能会比较好理解

当我们透过被绑定的输入框输入了某些资料,这些资料会被自动储存到我们指定的宣告变数中,
同样,如果更动指定宣告变数的值,被绑定的输入框内容也会跟着被改变

可能稍微有点抽象,来点画面~看看有没有比较容易懂
指定宣告变数 >> let message = "Hello Vue!",并与输入框做双向绑定
https://ithelp.ithome.com.tw/upload/images/20210811/20120722lpsQSgsgQk.jpg
所以当输入框的内容被我们改变,message 的值也会跟着被改变
https://ithelp.ithome.com.tw/upload/images/20210811/201207225BM2k9G1oG.jpg

後面会提到的 v-model 就是 "双向绑定" ,所以这边先解释一下名词的观念


<<:  Day 5:Hello....android world! 建立第一个KMM专案(Android)

>>:  [Day09] Tableau 轻松学 - Data Source 页面

JavaScript学习日记 : Day20 - call、apply、bind

1. 语法 func.call(thisArg, param1, param2, ...)//fun...

Day1 理解 golang slice 用法及原理 I

我写什麽 这系列叫做後端菜鸡学习杂记,所以我也没打算特定写什麽,在熟悉了 go 语法之後,常常只使用...

第32天~MS-SQL开始

这个得上一篇-https://ithelp.ithome.com.tw/articles/10283...

【I Love Vue 】 Day 27 爱荷华博弈任务(八) - 测验画面2

我们接着继续开发 测验区 的部分 测验区 先来看看画面: 可以看到测试区除了上面的总分之外,我们有四...

笔记-vscode debug - launch.json 介绍

最近遇到最大的困扰是在实际工作上遇到的情况 越来越难找到教学或是sample可以做参考而解决 还有就...