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

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

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

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

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

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

每个 vue 组件都有三个组成部分，即骨架（html）、样式（css/less/scss）和脚本（javascript/typescript）。可以在一个 .vue 文件中写完三个部分，也可以将样式和脚本部分分别写成独立的文件。笔者推荐独立文件的方式。

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

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

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

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

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

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

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

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

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

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

项目仍然是由 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 十五分钟入门图文教程，希望对大家有所帮助