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 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
layui table 参数设置方法
2018/08/14 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
html5.2 dialog简介详解
2018/02/27 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
描述内存分配方式以及它们的区别
2016/10/15 面试题
管理提升方案
2014/06/04 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
学生保证书格式
2015/02/27 职场文书
卫生主题班会
2015/08/14 职场文书