Vue.js 十五分钟入门图文教程


Posted in Javascript onSeptember 12, 2018

TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误。

Vue.js 十五分钟入门图文教程

Vue 很早就支持 TypeScript,但配置起来比较麻烦,幸好有了 Vue CLI 3.0。安装好 vue-cli 之后,使用 vue create 项目名称 来创建项目,vue 脚本手架自动创建以项目名称命名的目录。

Vue.js 十五分钟入门图文教程

vue-cli 3 生成的项目结构比较科学,尤其是通过 componentsviews 将作为控件的组件和作为页面的组件分离开来,结构更清晰。可以理解为 views 中定义的组件是要配置在路由中的,而 componets 中定义的组件是被其它组件调用的。

Vue.js 十五分钟入门图文教程

HTML 需要定义一个 <div> 作为 Vue 应用的容器,main.ts 中会通过 new Vue(...) 生成应用实例并将之与容器绑定。注意 HTML 中定义的 <div id="app"></div> 会被 App.vue 模板中定义的 <div id="app">...</div> 替换掉。

Vue.js 十五分钟入门图文教程

Vue 是一个组件化的框架,组件是 Vue 的基本元素。一个 Vue 应用是由若干组件构成的,组件与组件之间的嵌套或并列关系,最终可以用树形来表示。main.ts 中创建的 Vue 实例是最顶层组件。

Vue.js 十五分钟入门图文教程

每个 Vue 组件都有三个组成部分,即骨架(HTML)、样式(CSS/LESS/SCSS)和脚本(JavaScript/TypeScript)。可以在一个 .vue 文件中写完三个部分,也可以将样式和脚本部分分别写成独立的文件。笔者推荐独立文件的方式。

既然我们选用 TypeScript,使用上图所示的 class-style 来实现 Vue 组件更为适合。

Vue.js 十五分钟入门图文教程

除了 class-style 之外,也可以使用 config-style。配置风格是最早支持的风格,将 Vue 的各类成员(属性、数据、计算属性、方法等)独立定义,易于理解 Vue 实例的内部结构,但初学者容易搞不清楚 this 指向。

Vue.js 十五分钟入门图文教程

Vue 定义的组件需要注册才能在其它组件中使用。注册的方式分为全局和局部两种。使用 TypeScript 和类风格开发 Vue 应用时,推荐使用局部注册。局部注册比较符合模式化开发思想。

Vue.js 十五分钟入门图文教程

Vue 可以通过 {{ }} 语法在文本中插值。但是如果要将值插入属性,则应使用 : 号修饰属性名。组件属性(指 HTML 标签参数)可随意定义,加 @Prop() 修饰即可,如果属性是必须的,应该使用 : 来定义;可选属性则使用 !: 来定义。

Vue.js 十五分钟入门图文教程

在 HTML 或自定义组件标签中使用 @ 前缀的事件名,可以绑定事件处理函数。Vue 实现了部分 HTML 事件,比如 @click 可以直接绑定。组件也可以“定义”自己的事件,不需要提前声明,只需要 this.$emit() 直接触发即可。

Vue.js 十五分钟入门图文教程

Vue 本身是数据驱动渲染,所以数据(包括属性、计算属性等)变化可以触发界面数据呈现,但是界面的输入要反馈给组件,就需要用触发事件的方式来反馈。双向绑定是用于更新属性事件的语法糖,使用 :属性名.sync="..." 绑定。子组件中通过触发 update:属性名 事件来更新父组件中绑定的数据。

Vue.js 十五分钟入门图文教程

路由主要用于组织视图(页面)关系。最基本的要求是为路由配置每个路径对应的组件。name 可以当作路径的简短别名。路由操作一般会使用注入到 Vue 实例中的 $router 对象,常用 $router.push()$router.replace() 来跳转,二者的区别在于对 URL 历史的影响(可以想像)

路由项配置中的 component 可以指定为导入的的组件类,也可以指定一个异步(返回 Promise 的)函数,该函数动态加载组件并返回包含该组件类的 Promise 对象。上例中使用的 import() 动态引入语法。

做一个简单的登录界面加深对前面知识的理解和记忆。该示例特意避免了 Ajax 调用,以降低其复杂程度。

Vue.js 十五分钟入门图文教程

没有 Ajax 实现的远程认证,我们只能假设用户输入 pass 时为正确密码。用户名可任意输入,如果验证成功则会显示该用户已登录。

Vue.js 十五分钟入门图文教程

项目仍然是由 vue-cli 3 创建的。创建好之后去掉了 AboutHelloWorld,加入了 Login,并将 Home 改造成三部分各自独立的文件结构。当然,顺便还按自己(或团队)的开发规范调整了下 tslint.json 中的配置。

Vue.js 十五分钟入门图文教程

App.vue、main.ts 和 router.ts 可以算得上是一个 Vue 应用的入口和基本配置。App.vue 中直接把控制权交给了 vue-router。注意,import 的时候不能省略 .vue 扩展名。

Vue.js 十五分钟入门图文教程

Login 组件中用到了双向绑定,由于属性(由 @Prop() 修饰)不可以在内部修改,甚至可以把它声明为 readonly(也许 Vue 3 会定义相关的规范)。注意到 keypress 事件有一个后缀,这在 Vue 中称为事件修饰符,可以用于快速处理一些特殊情况,比如 keypress.enter 表示Enter按下时。

Vue.js 十五分钟入门图文教程

在 Home 中使用 Login 组件时,Homeuser 数据字段绑定到了 Loginuser 属性上,.sync 修饰符表示这是一个双向绑定。前面 Login 的代码中,如果登录成功,Login 会通过 $emit("update:user", {...}) 来通知绑定数据发生变化,Vue 框架接收到这个通知并更新了绑定的 Home.user,这会导致计算属性 message 重算,并最终触发呈现“某用户已登录”。

Vue 入门很简单吧!

不过 Vue 本身含有非常丰富的功能,要用 Vue 搭建完整的应用,仍然需要了解大量 Vue 设计概念和操作技巧。建议读者们仔细阅读 Vue 官方提供教程和 API 手册,并保持在 Vue 相关技术社区的活跃度。

原码下载:点击此处下载

总结

以上所述是小编给大家介绍的Vue.js 十五分钟入门图文教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
js数组的基本使用总结
Jan 18 Javascript
Vue通过ref父子组件拿值方法
Sep 12 #Javascript
webpack4 升级迁移的实现
Sep 12 #Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 #Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
Sep 12 #Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 #Javascript
浅谈webpack4 图片处理汇总
Sep 12 #Javascript
vue二级菜单导航点击选中事件的方法
Sep 12 #Javascript
You might like
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
简单的js计算器实现
2016/10/26 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
vue 粒子特效的示例代码
2017/09/19 Javascript
js数组去重的方法总结
2019/01/18 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
Node配合WebSocket做多文件下载以及进度回传
2019/11/07 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
浅谈Python中数据解析
2015/05/05 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
django中cookiecutter的使用教程
2020/12/03 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
英格兰足协官方商店:England Store
2019/07/12 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
shell的种类有哪些
2015/04/15 面试题
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
大学生求职信例文
2014/06/29 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书