项目仍然是由 vue-cli 3 创建的。创建好之后去掉了 About 和 HelloWorld，加入了 Login，并将 Home 改造成三部分各自独立的文件结构。当然，顺便还按自己（或团队）的开发规范调整了下 tslint.json 中的配置。
App.vue、main.ts 和 router.ts 可以算得上是一个 Vue 应用的入口和基本配置。App.vue 中直接把控制权交给了 vue-router。注意，import 的时候不能省略 .vue 扩展名。
Login 组件中用到了双向绑定，由于属性（由 @Prop() 修饰）不可以在内部修改，甚至可以把它声明为 readonly（也许 Vue 3 会定义相关的规范）。注意到 keypress 事件有一个后缀，这在 Vue 中称为事件修饰符，可以用于快速处理一些特殊情况，比如 keypress.enter 表示Enter按下时。
在 Home 中使用 Login 组件时，Home 的 user 数据字段绑定到了 Login 的 user 属性上，.sync 修饰符表示这是一个双向绑定。前面 Login 的代码中，如果登录成功，Login 会通过 $emit("update:user", {...}) 来通知绑定数据发生变化，Vue 框架接收到这个通知并更新了绑定的 Home.user，这会导致计算属性 message 重算，并最终触发呈现“某用户已登录”。
Vue 入门很简单吧！
不过 Vue 本身含有非常丰富的功能，要用 Vue 搭建完整的应用，仍然需要了解大量 Vue 设计概念和操作技巧。建议读者们仔细阅读 Vue 官方提供教程和 API 手册，并保持在 Vue 相关技术社区的活跃度。
原码下载：点击此处下载
总结
以上所述是小编给大家介绍的Vue.js 十五分钟入门图文教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: