前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.js来构建一个中大型的前端项目,同时做好相应的部署与优化工作。
文章将以PPT图片附加文字介绍的形式展开,不会涉及知识点的具体代码,点到为止。有兴趣的同学可以查看相应的文档进行了解。
Vue.js简介
从上图的介绍中我们不难发现Vue.js是一款轻量级的以数据驱动的前端JS框架,其和jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示,而Vue通过操作数据来实现页面的更新与展示。下面便是Vue数据驱动的概念模型:
Vue.js主要负责的是上图绿色正方体ViewModel的部分,其在View层(即DOM层)与Model层(即JS逻辑层)之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。
当View层的视图发生改变时,Vue会通过DOM Listeners来监听并改变Model层的数据。相反,当Model层的数据发生改变时,其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能,也是Vue.js数据驱动的原理所在。
Vue实例
在一个html文件中,我们直接可以通过script标签引入Vue.js,然后就可以在页面里写Vue.js代码了。上图中我们通过new Vue()构建了一个Vue的实例,在实例中,可以包含挂在元素(el),数据(data),模板(template),方法(methods)与生命周期钩子(created等)等选项。不同的实例选项拥有不同的功能,如:
(1)el表明我们的Vue需要操作哪一个元素下的区域,'#demo'表示操作id为demo的元素下区域。
(2)data表示Vue 实例的数据对象,data 的属性能够响应数据的变化。
(3)created表示实例生命周期中创建完成的那一步,当实例已经创建完成之后将调用其方法。
Vue常用指令
在Vue项目的开发中,我们使用的最多的应该就属Vue的指令了。通过Vue提供的常用指令,我们可以淋漓尽致地发挥Vue数据驱动的强大功能。以下便是图中常用指令的简单介绍:
(1)v-text: 用于更新绑定元素中的内容,类似于jQuery的text()方法
(2)v-html: 用于更新绑定元素中的html内容,类似于jQuery的html()方法
(3)v-if: 用于根据表达式的值的真假条件渲染元素,如果上图P3为false则不会渲染P标签
(4)v-show: 用于根据表达式的值的真假条件显示隐藏元素,切换元素的 display CSS 属性
(5)v-for: 用于遍历数据渲染元素或模板,如图中P6为[1,2,3]则会渲染3个P标签,内容依次为1,2,3
(6)v-on: 用于在元素上绑定事件,图中在P标签上绑定了showP3的点击事件
关于更多的Vue指令可以查看Vue2.0文档,地址:https://vuefe.cn/api/#指令
Vue.js技术栈
构建大型应用
vue-cli构建
在使用vue-cli之前我们需要安装node.js,利用其提供的npm命令来安装vue-cli。安装node.js只需去其官网下载软件并安装即可,地址为:https://nodejs.org/en/
安装完成之后我们打开电脑的cmd命令行工具依次输入上图中的命令:
这样我们的一个基于webpack的vue项目目录就构建好了。
单文件组件
父子组件通信
那么像这样在以单文件组件为核心的项目开发中,我们一定会想到一个问题,就是.vue父子组件之间是如何交换数据来实现通信的呢?在Vue2.0中提供了props来实现父组件向子组件传递数据,通过$emit来实现子组件向父组件传递数据。当然如果是较为复杂和普遍的数据交互,建议大家使用vuex来同一管理数据。详情请见:https://vuefe.cn/guide/compon...使用Props传递数据
插件使用
接下来我们介绍下在基于webpack的vue项目中我们是如何使用插件的,主要有两种情况:
(1)通过import直接引入:这种方式可以在需要调用插件的.vue文件中使用,不过需要注意和实例的创建顺序问题,或者也可以通过require引入。
(2)import + components注册:此方式为Vue组件的使用方式,可以在一个组件中注册并使用一个子组件。
部署及优化
当我们搞定整个Vue项目的前端编码阶段后,我们需要对我们的前端项目文件进行部署和优化工作,主要的几个方式如下:
(3)使用Webpack hash处理缓存:当我们需要对发布到线上的文件进行修改时,重新编译的文件名如果和之前版本的相同会引起浏览器无法识别而加载缓存文件的问题。这样我们需要自动的生成带hash值的文件名来阻止缓存。详见:https://segmentfault.com/a/11...
(4)使用v-if减少不必要的组件加载:v-if指令其实很有用处,它可以让我们项目中暂时不需要的组件不进行渲染,等需要用到的时候在渲染,比如某个弹窗组件等。这样我们可以减少页面首次加载的时间和文件量。
除了以上几点的优化,还有很多优化选择,有兴趣的童鞋可以好好地了解下webpack的API文档,毕竟webpack的功能十分强大。
数据驱动实例
这是我之前利用Vue.js数据驱动的原理写的一个拼图游戏,希望能够供大家进一步了解Vue数据驱动的理念。
演示地址:拼图游戏
代码地址:拼图代码
总结
本文以PPT图片附加文字介绍的形式简单介绍了Vue.js的知识点及开发流程,并将前端自动化、组件化、工程化的理念贯穿其中,由浅入深地阐述了Vue.js“简单却不失优雅,小巧而不发大匠”的独特魅力。
本文为劳卜原创文章,首发于微信公众号:前端呼啦圈(Love-FED)
转载请注明来自——微信公众号:前端呼啦圈(Love-FED)
前端开发之走进Vue.js相关推荐
- 前端开发之走进Vue.js(入门者看过来)
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
- Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
- 走进Vue.js 1.0-姜威-专题视频课程
走进Vue.js 1.0-16818人已学习 课程介绍 Vue.js是一个用来开发web界面的前端框架,小巧的外表,不失优雅的代码结构.全新的MVVM理念.以及不乏工匠精神的周边工具. ...
- 前端开发技术:HTML5 JS 前端开发主要功能!
HTML5广义上讲是前端开发学科的代名词,包含HTML5.CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称.如PC端网站.管理系统.手机网页应用(WebApps).混合应用(H ...
- 前端_快速入门Vue.js框架
文章目录 快速入门Vue.js框架 0.前言 1.Vue.js框架 1.1.Vue简介 1.2.第一个Vue程序 1.3.el:挂载点 2.Vue指令 2.2.v-html 2.3.v-on 2.4. ...
- 前端开发工程师(VUE框架)招聘
前端开发工程师(VUE框架) 岗位职责: 1.熟练运用HTML/JS/CSS等前端技术,精通JavaScript.Ajax.DOM.html.css等前端技术 2.熟练使用VUE前端框架,理解VUE框 ...
- 【哈士奇赠书活动 - 24期】-〖前端工程化:基于Vue.js 3.0的设计与实践〗
文章目录 ⭐️ 赠书 - <前端工程化:基于Vue.js 3.0的设计与实践> ⭐️ 内容简介 ⭐️ 作者简介 ⭐️ 精彩书评 ⭐️ 赠书活动 → 获奖名单 ⭐️ 赠书 - <前端工 ...
- 为什么43%前端开发者想学Vue.js
根据JavaScript 2017前端库状况调查 Vue.js是开发者最想学的前端库.我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因. 我最近曾与Evan ...
- java socket中属性详解_前端开发:关于Vue组件中的data属性值是函数而不是对象的详解...
最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中的data属性值为什么是函数而不是对象.首先来了解一下Vue组件的使用理念:在Vue组件使用 ...
最新文章
- NOIP2012-摆花
- 解决sublime3不能编辑插件default settings的问题
- IntelliJ 通过 Cloud Toolkit 登陆远程服务器终端 Terminal
- 基于ssm在线视频教育网站源码
- python 调用海康linux下psdatacall_demo,实现获视频取码流并返回到python,以及上传信息到人脸库的方法
- php-java-net-python-刺绣添加厂商信息计算机毕业设计程序
- 金错刀讲小米产品实战
- 多人如何通过小程序上传照片、视频、素材、文章,然后点赞投票评选?
- 拉普拉斯变换 性质 及常用函数变换
- 使用SimpleEmail邮件发送之QQ邮箱
- PPT里面的工具都是宝,用好不得了,这10个技巧你不得不知!
- Unity中模型的面数问题
- Android App包瘦身优化
- java何时new_何时使用lambda,何时使用Proc.new?
- Linux运维之道-基础命令
- 测试工程师的未来发展方向在哪里?
- 百度离线地图示例之四:热力图
- 〈大学〉问——王守仁
- echarts 使用案例:针对map地图中显示数据格式化
- 安卓的sqlite增删改