Vue系列入门教程(1)——初识Vue

IT 文章6天前更新 小编
0 0 0

[v_act]1、前置知识储备[/v_act]
[list]html
css
js[/list]
[v_act]2、两种学习路径[/v_act]
1)稳扎稳打系统学习(要求较高)
Vue系列入门教程(1)——初识Vue
2)先用后学再理解(我们入门教程采用这一种)
Vue系列入门教程(1)——初识Vue

[v_act]1、Vue官网[/v_act]
官网直达:https://cn.vuejs.org/
官网教程直达:https://cn.vuejs.org/v2/guide/
[v_act]2、什么是Vue?[/v_act]
官网描述如下:

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

ad

程序员导航

优网导航旗下整合全网优质开发资源,一站式IT编程学习与工具大全网站

简而言之,Vue就是一个前端框架,用于降低用户界面(UI)复杂度
[v_act]3.Vue特点[/v_act]
1) 轻量级的框架
Vue.js 能够自动追踪依赖的模板表达式和计算属性,提供 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API,使读者更加容易理解,能够更快上手。

2) 双向数据绑定
声明式渲染是数据双向绑定的主要体现,同样也是 Vue.js 的核心,它允许采用简洁的模板语法将数据声明式渲染整合进 DOM。

3) 指令
Vue.js 与页面进行交互,主要就是通过内置指令来完成的,指令的作用是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

4) 组件化
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。

ad

AI 工具导航

优网导航旗下AI工具导航,精选全球千款优质 AI 工具集

在 Vue 中,父子组件通过 props 传递通信,从父向子单向传递。子组件与父组件通信,通过触发事件通知父组件改变数据。这样就形成了一个基本的父子通信模式。

在开发中组件和 HTML、JavaScript 等有非常紧密的关系时,可以根据实际的需要自定义组件,使开发变得更加便利,可大量减少代码编写量。

组件还支持热重载(hotreload)。当我们做了修改时,不会刷新页面,只是对组件本身进行立刻重载,不会影响整个应用当前的状态。CSS 也支持热重载。

5) 客户端路由
Vue-router 是 Vue.js 官方的路由插件,与 Vue.js 深度集成,用于构建单页面应用。Vue 单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,传统的页面是通过超链接实现页面的切换和跳转的。

6) 状态管理
状态管理实际就是一个单向的数据流,State 驱动 View 的渲染,而用户对 View 进行操作产生 Action,使 State 产生变化,从而使 View 重新渲染,形成一个单独的组件。
[v_act]4、Vue优点[/v_act]
1)Vue.js 可以进行组件化开发,使代码编写量大大减少,读者更加易于理解。

2)Vue.js 最突出的优势在于可以对数据进行双向绑定(在之后的编写中我们会明显地感觉到这个特点的便捷)。

ad

免费在线工具导航

优网导航旗下整合全网优质免费、免注册的在线工具导航大全

3)使用 Vue.js 编写出来的界面效果本身就是响应式的,这使网页在各种设备上都能显示出非常好看的效果。

4)相比传统的页面通过超链接实现页面的切换和跳转,Vue 使用路由不会刷新页面。
[v_act]5、注意事项[/v_act]
Vue必须在ES5版本以上的环境下使用,一些不支持ES5的旧浏览器中无法运行Vue。

开发工具可以根据自己习惯选择,可以使用:
1)Visual Studio Code:官网下载:https://code.visualstudio.com/
可以安装一些插件,方便开发:
Vue系列入门教程(1)——初识Vue
2)Vue赞助方开发工具:Hbuild,官网下载:https://www.dcloud.io/hbuilderx.html
在此我们使用HbuildX来开发,下载就不说了,HbuildX是免安装的,内置Vue语法,开箱即用,附上HBuildX快捷键:
Vue系列入门教程(1)——初识Vue

© 版权声明

相关文章

暂无评论

暂无评论...