您的位置:首页 > Web前端 > Vue.js

目前前端最火的框架Vue,不学小心找不到工作

2019-03-25 16:20 381 查看

相信大家最近找工作的时候都会遇到很多公司都要求要会Vue的情况,那下面我就给大家说一下Vue的学习方法,让大家在工作中如鱼得水。

Vue 是什么

Vue是一套用于构建用户界面的渐进式框架。

Vue被设计为可以自底向上逐层应用。

Vue的核心库只关注视图层,易上手,便于和第三方库或既有项目整合。

现代化的工具链和各种类库结合使用,Vue也更适合做复杂的单页面应用SPA(SinglePage Web Application)

起步

假设您已经了解了关于HTML、CSS和JavaScript的相关知识。

创建一个文件,命名·hello.html·,通过如下方式引用Vue:

更多Vue的安装方式网上有介绍,不过对于新手来说,上面的使用方法更贴近Web开发。高阶开发者会使用更敏捷的开发工具,这里不做介绍。

声明式渲染

Hello Vue——全部代码

Hello Vue——界面和控制台

此时,我们已经成功的创建了第一个Vue应用,现在的数据和DOM已经被建立了关系,所有的东西都是响应式的,应用内的数据可以通过控制台显示。

除了文本插值,我们还可以这样绑定元素特性:

这里我们遇见一些新东西:v-bind,带有前缀v-的被称为指令,表示是Vue提供的特殊特性,它们会在渲染的DOM上应用特殊的响应式行为。v-bind 意义是绑定,讲元素节点的title特性和Vue实例的message属性保持一致。

条件与循环

控制切换一个元素是否显示,v-if 根据条件选择

在浏览器中刷新网页,在控制栏中输入app3.seen=false,即可看到指定内容消失:

这个例子演示了我们不仅可以把数据绑定到 DOM 文本或特性,还可以绑定到 DOM 结构。

接下来展示 v-for 循环,用来渲染一个数组的数据

看到界面显示的列表内容有三个,如下:

在控制台中输入 app4.todos.push({text:‘新项目’}),手动修改了todos的内容,实时看到网页内容修改,如下:

处理用户输入

v-on 添加一个事件监听器,通过它来调用Vue使用中定义的方法,实现交互。

建立一个文本区域,再创建一个按钮,写入逆转消息的方法,使用 v-on 绑定

看到原始内容:页面最下方文字区域和按钮

点击按钮,看到文字变化,逆转消息完成,再点击即可变回来

上述例子中,我们在reverseMessage方法中更新了应用状态,但是没有触碰DOM,因为所有的DOM操作都由Vue来处理,我们只需要关注逻辑层面即可。

Vue还提供 v-model 指令,轻松实现表单输入和应用状态之间的双向绑定。

可以看到,输入框的内容预先设定好,输入框上的文本与输入框内容相同

v-model把input中的内容同步到数据data中,文本显示区域实时变化,跟随状态。

组件化应用构建

组件系统是Vue的另一个重要的概念,允许我们使用小型、独立和可复用的组建构建大型应用。个人理解为组件化开发,相当于一个拼接积木的过程,把大项目无限拆分成不可分割或难以分割的小块,灵活的组合各个部件,完成整体的拼接。

在Vue中,一个组件本质上是一个拥有预定义选项的一个Vue实例。在Vue中注册组建很简单:

案例上要先注册一个组件,再定义各个元素和数据,v-for 进行遍历,v-bind 绑定每个item,todo作为组件的属性传入,设置组件的key为item.id,通过 prop 接口与父单元进行了良好的解耦,属性传入到组件中,在组件中构建并渲染到页面中。

在大型项目中,我们有必要将整个应用程序划分为组件,方便开发人员管理。未来使用组件的应用模版尽可能的使用子组件进行封装。

Vue组件与自定义元素的关系

自定义元素是Web组件规范的一部分,Vue的组件语法部分参考了该规范,Vue组件实现了Slot API与 is 特性,但是还有几个关键差别:

  1. Web Components 规范已经完成并通过,但未被所有的浏览器原生实现。目前Safari 10.1+、Chrome 54+和Firefox 63+原生支持Web Component。相比之下,Vue组件不需要任何 polyfill ,并且在所有支持的浏览器(IE9及更高版本)之下表现一致。必要时,Vue组件也可以包装于原生自定义元素之内。
  2. Vue 组件提供了纯自定义元素所不具备的一些重要功能,最突出的是跨组件数据流自定义事件通信以及构建工具集成

以上是Vue的介绍和部分核心基本功能,希望对您有所帮助。

请多关注后期的Vue开发讲解和案例拆分,欢迎读者私信提供意见和建议,未来会做改进。

我是一名前端开发程序员,自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理,送给每一位前端小伙伴,这里是小白聚集地,欢迎初学和进阶中的小伙伴

前端资料获取方式:

1.在你手机的右上角有【关注】选项,点击关注!

2.关注后,手机客户端点击我的主页面,右上角有私信,请私信回复:【学习】

电脑已经设置好了关键词自动回复,所以回复的时候请注意关键词哟~

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: