TypeScript将静态类型检查引入到JavaScript中，这样在JavaScript中编写中型和大型应用程序时，可以应用工具来避免一些错误。

TypeScript已经被Vue支持了很长时间，但是配置起来很麻烦，这要感谢Vue CLI 3.0。安装vue-cli后，使用vue create项目名称创建项目，vue脚本手持设备会自动创建一个以项目名称命名的目录。

vue-cli 3生成的项目结构更加科学，尤其是作为控件的组件通过组件和视图与作为页面的组件分离，结构更加清晰。可以理解，视图中定义的组件将在路由中配置，而组件中定义的组件由其他组件调用。

HTML需要定义一个div作为Vue应用的容器，应用实例将由新的Vue生成(.)并绑定到容器。请注意，HTML中定义的div id='app'/div将被div id='app '替换./div在App.vue模板中定义。

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

每个Vue组件都有三个组件，即骨架(HTML)、样式(CSS/LESS/SCSS)和脚本(JavaScript/TypeScript)。你可以一次写三个部分。vue文件，或者您可以将样式和脚本部分编写为单独的文件。我推荐独立文档的方式。

由于我们选择了TypeScript，所以使用上图所示的类样式来实现Vue组件更合适。

除了类样式，还可以使用配置样式。配置样式是最早支持的样式。通过定义各种成员(属性、数据、计算属性、方法等)，很容易理解Vue实例的内部结构。)独立的Vue，但是初学者很难理解这个方向。

Vue定义的组件需要注册后才能在其他组件中使用。有两种注册方式：全局和本地。当使用TypeScript和类样式开发Vue应用程序时，建议使用部分注册。本地注册符合模式发展的思路。

Vue可以通过{{}}语法插入文本。但是，如果要在属性中插入值，应该使用：来修改属性名称。组件属性(HTML标签参数)可以随意定义，可以通过@Prop()进行修改。如果属性是必要的，它们应该由：定义。使用可选属性！

您可以通过在HTML或自定义组件标记中使用前缀为@的事件名称来绑定事件处理程序。Vue实现了一些HTML事件，比如@click可以直接绑定。组件也可以“定义”自己的事件，无需提前声明，只需要这个。$emit()直接触发它们。

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

路由主要用于组织视图(页面)关系。最基本的要求是配置与每条路由路径相对应的组件。名称可以用作路径的简称。路由操作通常使用注入到Vue实例中的$router对象，并且经常使用$router.push()和$router.replace()进行跳转。两者的区别在于对URL历史的影响(可以想象)

路由项目配置中的组件可以指定为导入的组件类，也可以指定为异步(返回承诺)函数，该函数动态加载组件并返回包含组件类的承诺对象。上例中使用的Import()动态引入了语法。

做一个简单的登录界面，加深对之前知识的理解和记忆。这个例子故意避免了Ajax调用，以降低其复杂性。

如果没有Ajax实现的远程身份验证，我们只能假设用户输入的密码是正确的。用户名可以任意输入。如果身份验证成功，它将显示用户已登录。

该项目仍由vue-cli 3创建。创建后，删除了“关于”和“地狱世界”，添加了“登录”，并将“主页”转换为三个独立的文件结构。当然，顺便说一下，tslint.json中的配置是根据团队的开发规范进行调整的。

App。Vue、main.ts和router.ts可以看作是vue应用的入口和基本配置。在App.vue中，控制权直接交给vue-router。请注意。导入时不能省略vue扩展名。

在Login组件中使用双向绑定，因为属性(由@Prop())不能在内部修改，甚至可以声明为readonly(可能Vue 3会定义相关规范)。请注意，keypress事件有一个后缀，在Vue中称为事件修饰符，可以用来快速处理一些特殊情况，例如在按键时。回车表示按下回车。

在主页中使用登录组件时，主页的用户数据字段绑定到登录的用户属性，并且。sync修饰符表示这是双向绑定。在前面的Login代码中，如果Login成功，login将通过$emit('update:user '，{)通知绑定数据的更改.})，Vue框架收到此通知并更新绑定的Home.user，这将导致计算属性消息被重新计算，并最终触发“用户已登录”的呈现。

开始使用Vue非常简单！

但是Vue本身包含了很多功能，要用Vue构建一个完整的应用，还需要了解很多Vue的设计理念和操作技巧。建议读者仔细阅读Vue提供的官方教程和API手册，并在Vue的相关技术社区保持活跃。

原代码下载：点击此处下载

摘要

以上是边肖介绍的15分钟Vue.js入门图文教程，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！