[Vue] 跟着 Vue 闯荡前端世界

到目前为止真的只是利用 vue-cli 建立个前端开发环境,先前花了几篇文章说明前端种种机制 webpack, eslint, npm .... 等,接着我们就来一同了解 Vue 相关所需具备的基本知识吧!


前言


本篇文章会说明一些开发上最基本所需具备的相关知识,让大家可以快速进入 Vue 的世界,但你我都知道的魔鬼往往都是藏在细节中,因此建议最好在入门后,直接扫过官方说明文档一轮,可以对细节了解地更全面。

主要 Vue 实例 (Instance)


开启项目根目录下 index.html 后,发现什么东西都没有,只有存在一个 id = "app" 的 div 元素。

故事的开始就是从这个 main vue instance 而来,开启 main.js 程序进入点可以看到被创建的主要 vue 实例。

  1. el 表示这个 vue instance 创建后会挂载取代  的元素
  2. router 是传入 vue-router 组件 (ES6 属性简写语法糖)
  3. template 是表示将 el 定义的标签取代为此 HTML 模板
  4. components 表示此 vue instance 所使用到的子组件,在此为 App 组件;因此在载入此 instance 后,因 template 中存在有  标签,因此  又会被 App 组件中的 template HTML 模板所取代。

App.vue 文件结构为 vue 所建议的组件撰写方式,就是在一份文件中撰写组件所需的 HTML、Javascript 及 CSS 代码;上文有提到 main vue instance 子组件有包含 App 组件,因此 main vue instance 中 template 包含的  标签就会被 App.vue 中定义的 Template HTML 模板取代,因此最终呈现在画面上就是此 HTML 元素。

其中的 router-view 标签为 vue-router 使用,会将符合 routing rule 的 component 渲染到这个标签中。

最终同一个元素的呈现在画面上转化过程如下图所示。

建立组件


vue 官方所建议的组件撰写方式就是将 HTML、JavaScript 及 CSS 写在一个副文件名为 vue 的文件中,各自以 Template、Script 及 Style 标签区隔,以下针对各项目进行介绍。

script

会在这边建立 vue 实例并 export 出去外部,而在建立 vue 实例的时候可以定义数据、属性、方法及生命周期触发事件行为,这些都可以帮助开发人员更灵巧地操作组件。

  • data : 定义组件数据 (在此建立了 birthYear 数字型态变量)
  • computed : 计算属性,可以设计 getter / setting 来操作特定数据
  • watch : 监听特定数据 / 计算属性的变动,可获得修改前后数值
  • method : 自定义方法供此组件使用
  • components : 若有包含其他子组件,可以利用此方法加入组件
  • 其他还有与 instance 生命周期相关 Hook 例如 mounted、updated.. 等可使用

template

这个区块就是放置组件需要呈现在画面上的 HTML 元素,其中 Vue 提供了一些如同 angular 1 默认的 directive 可以操作 (ex. v-if, v-show, v-for... )。预计呈现的画面如下。

这边介绍一下最常使用到的 directive 如下:

v-bind:prop (简写为 :prop)

单向绑定子组件之特定 props 数据,在此使用 v-bind:value 表示单向绑定 input 元素 props 中的 value 数据 (可简写为 :value ),而传递进去的数据为 age。

v-model

双向绑定子组件名为 value 的 props 数据,在此表示双向绑定 input 元素 props 中的 value 数据 ,而传递进去的数据为 age。说穿了 v-model 也只是语法糖而已,他会透过 v-bind:value + v-on:input 两种 directive 自动实践出 2 way binding 的效果;也就表示如果自己建立的组件如果想要具有 v-model 的效果,可以自行建立 props 的 value 数据,并且监听到 value 异动就 emit input 事件并传递新 value 值到父组件即可,而父组件因为设置 v-model 的关系会自动在收到 input 事件后自行更新数据,达到双向绑定效果。

如果要自行实现双向绑定也是可以,就是透过 v-bind 与 v-on 进行实现,但最大差别就是父祖件还需要在 v-on 中自行更新该值,才可达到双向绑定效果喔!

v-on:event (简写为 @event)

监听特定事件,在此使用 v-on:click 表示当 button 元素被触发 click 事件后,会 emit 该事件通知父组件并执行 showStatus 方法。

style

支持 CSS / SCSS / Stylus 等 Style 语法,可以透过 lang 标签设置;其中若希望此 style 只在组件中作用,可以加上 scoped 来进行限制。

检视结果


透过 v-bind 绑定的 input 在变动数据的时候是不会影响父层数据 (单向绑定)

透过 v-model 绑定的 input 在变动数据的时候是会影响父层数据 (双向绑定),并且由于我们透过 watch 监看 birthYear 数值变动,如果有异动会透过 toastr 输出前后修改值

最后击 Show Status Toastr 按键会触发 showStatus 方法,输出提示消息。

参考资讯


Vue 2 官方说明文档

测试代码已上传 GitHub 中,有需要的朋友可以参考一下。
若有更好的建议或做法再请不吝指导一下啰! 感谢!


希望此篇文章可以帮助到需要的人

若内容有误或有其他建议请不吝留言给笔者喔 !