Vue.js 十五分钟入门图文教程
TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误。 Vue 很早就支持 TypeScript,但配置起来比较麻烦,幸好有了 Vue CLI 3.0。安装好 vue-cli 之后,使用 vue create 项目名称 来创建项目,vue 脚本手架自动创建以项目名称命名的目录。 vue-cli 3 生成的项目结构比较科学,尤其是通过 HTML 需要定义一个 作为 Vue 应用的容器,main.ts 中会通过 new Vue(...) 生成应用实例并将之与容器绑定。注意 HTML 中定义的 会被 App.vue 模板中定义的 替换掉。
Vue 是一个组件化的框架,组件是 Vue 的基本元素。一个 Vue 应用是由若干组件构成的,组件与组件之间的嵌套或并列关系,最终可以用树形来表示。main.ts 中创建的 Vue 实例是最顶层组件。 每个 Vue 组件都有三个组成部分,即骨架(HTML)、样式(CSS/LESS/SCSS)和脚本(JavaScript/TypeScript)。可以在一个 既然我们选用 TypeScript,使用上图所示的 class-style 来实现 Vue 组件更为适合。 除了 class-style 之外,也可以使用 config-style。配置风格是最早支持的风格,将 Vue 的各类成员(属性、数据、计算属性、方法等)独立定义,易于理解 Vue 实例的内部结构,但初学者容易搞不清楚 this 指向。 Vue 定义的组件需要注册才能在其它组件中使用。注册的方式分为全局和局部两种。使用 TypeScript 和类风格开发 Vue 应用时,推荐使用局部注册。局部注册比较符合模式化开发思想。 Vue 可以通过 在 HTML 或自定义组件标签中使用 Vue 本身是数据驱动渲染,所以数据(包括属性、计算属性等)变化可以触发界面数据呈现,但是界面的输入要反馈给组件,就需要用触发事件的方式来反馈。双向绑定是用于更新属性事件的语法糖,使用 路由主要用于组织视图(页面)关系。最基本的要求是为路由配置每个路径对应的组件。 路由项配置中的 component 可以指定为导入的的组件类,也可以指定一个异步(返回 Promise 的)函数,该函数动态加载组件并返回包含该组件类的 Promise 对象。上例中使用的 做一个简单的登录界面加深对前面知识的理解和记忆。该示例特意避免了 Ajax 调用,以降低其复杂程度。 没有 Ajax 实现的远程认证,我们只能假设用户输入 pass 时为正确密码。用户名可任意输入,如果验证成功则会显示该用户已登录。 项目仍然是由 vue-cli 3 创建的。创建好之后去掉了 App.vue、main.ts 和 router.ts 可以算得上是一个 Vue 应用的入口和基本配置。App.vue 中直接把控制权交给了 vue-router。注意, Login 组件中用到了双向绑定,由于属性(由 在 Home 中使用 Login 组件时, Vue 入门很简单吧! 不过 Vue 本身含有非常丰富的功能,要用 Vue 搭建完整的应用,仍然需要了解大量 Vue 设计概念和操作技巧。建议读者们仔细阅读 Vue 官方提供教程和 API 手册,并保持在 Vue 相关技术社区的活跃度。 原码下载: 总结以上所述是小编给大家介绍的Vue.js 十五分钟入门图文教程。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |