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 相关文章推荐
Js组件的一些写法
Sep 10 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
JavaScript之map reduce_动力节点Java学院整理
Jun 29 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
JavaScript实现简单进度条效果
Mar 25 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
JavaScript代码实现简单计算器
Dec 27 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
Zend的Registry机制的使用说明
2013/05/02 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
phpStudy配置多站点多域名和多端口的方法
2017/09/01 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
vue toggle做一个点击切换class(实例讲解)
2018/03/13 Javascript
解决bootstrap模态框数据缓存的问题方法
2018/08/10 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python中的字符串类型基本知识学习教程
2016/02/04 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
民族团结先进个人事迹材料
2014/06/02 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
Python的property属性详细讲解
2022/04/11 Python
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技