Vue3
Node.js
TypeScript
路由
接口请求
状态管理
实战项目
求职与未来发展
框架是什么?
我们可能没有用过 Vue,但应该都了解过 Vue 属于一种前端框架,那么什么是框架?框架存在的意义是什么?
前端三剑客分别是 HTML、CSS、JavaScript。使用这些已然能搭出网站,那么像 Vue、React、Angular 之类的框架存在的意义是什么?
打个比方,在之前,我们想修改一个元素的内容,我们需要执行以下代码。
JavaScript:
const element = document.getElementById("el")
element.innerText = "新内容"
jQuery:
$("#el").text("新内容")
Vue:
this.elText = "新内容" // elText 已在模板中应用
以上的例子还比较片面,但我们已然可以看出,框架的存在,有助于我们隐藏底层细节、简化操作。
不同的框架自身的侧重点不同,下面举几个常见的框架为例。
jQuery:隐藏底层细节,优化文档操作、事件处理、动画设计和 Ajax 交互。
ElementUI:一个优美的 UI 框架,方便我们直接使用一些功能更高级的组件,而不只是 HTML 默认提供的那些。
Vue、React、Angular:更加高级的框架,一般都借鉴了 MVVM 的设计理念,实现了双向数据绑定。使得我们可以更加关心业务逻辑,而不用操心底层代码。
jQuery 与 ElementUI 更偏向一个库,也就是提供单一的功能。而 Vue、React、Angular 则属于一个框架,即提供组织架构上的功能。
以上的总结很是片面,只是为了表明不同的框架是为了不同的需求而存在而举例。如果想了解一个框架的特点,最好的方式还是去看其官方文档,并尝试去写一些它的实例。
疑问: 一般的浏览器不是只能识别 HTML、CSS、JavaScript 吗?那为什么能在框架中使用他们各自的语法和一些高级功能,这些框架是怎么实现的?
不同的框架实现的方法是有所不同的,比如 Vue3 是通过 Proxy 来实现的响应性。也有一些框架是运行在后端的,运行在 Nodejs 之类的引擎上,所以才能使用更加高级的语法而不用局限于 HTML、CSS、JavaScript。不过最终我们所写的代码还是要被解析为 HTML、CSS、JavaScript 返回给浏览器,才能让网页真正地在浏览器上跑起来。
Vue 是什么?
Vue 是由尤雨溪开发的一个前端框架,目前已然成为国内最流行的前端框架。
我们来看下 vue 的官方简介。
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
渐进式框架
所谓的渐进式框架(progressive framework),就是指我们使用 vue 来开发项目,无需熟识并使用其全部的功能。当我们需要更多的功能时,可以通过按需逐渐引入新功能、新插件的方式。
关于什么是渐进式框架尤大在 NingJS 的演讲中介绍过,可以在分享出来的演讲 PPT 中找到以下的图片,这图片就很好地展示了如何从底向上地应用 vue (也很适合作为一个学习顺序)。
渐进式的框架给我们带来了两个好处:
- 加载速度快。由于只需引入必须的组件,使得打包后的文件体积小,加载速度自然会快很多。
- 学习成本低。学习 vue 可以逐渐上手学习,学一点就可以实战出效果,对于开发者来说学习成本就降低了不少。
自底向上逐层应用
这句话的英文原文是:Vue is designed from the ground up to be incrementally adoptable.
从英文反而比较容易理解,意思是 vue 从一开始就被设计成一个可以逐渐应用功能的产品。与渐进式框架的意思类似,在原文中是对渐进式框架的一个解释说明。
双向数据绑定
Vue 的核心功能便是双向数据绑定。
在这之前,我们获取到服务器数据之后,需要操作 DOM 元素来修改页面数据。当用户修改页面的内容后,也需要操作 DOM 元素来获取修改的内容。这些繁琐的操作使用开发一个大型项目几乎不可能。
而在 Vue 当中,我们可以仅仅修改一个数据,便能即时反应到页面当中。或者修改页面上的内容,对应的数据也会随之改变。这便是双向数据绑定。
$$edit$$
<div id="app">
<p>{{ message }}</p>
<input v-model="message" />
</div>
<!-- 国内被墙 -->
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.global.js"></script>
<script>
const App = {
data() {
return {
message: "修改我试试",
}
},
}
Vue.createApp(App).mount("#app")
</script>
$$demo <div id="app"> <p>{{ message }}</p> <input v-model="message" /> </div> <!-- 国内被墙 --> <!-- <script src="https://unpkg.com/vue@next"></script> --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.global.js"></script> <script> const App = { data() { return { message: "修改我试试", } }, } Vue.createApp(App).mount("#app") </script>
$$