前端培训-中级阶段(37)- vue 2.x 单文件组件

linong

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

上一节我们说了 vue 2.x 组件定义和使用、组件间的通信,这节我们来说说如果使用单文件组件。

什么是单文件组件?

我们之前使用的是全局引用、全局定义的方式。

  1. script 引入一个资源,然后全局绑定一个变量。比如 jQuery
  2. 然后我们用引入的资源操作。

因为这样使用有一些弊端,然后出现了模块化
单文件组件可以理解为 Vue 的模块化使用,他解决了一下问题。

  • 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
  • 字符串模板 (String templates) 缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \
  • 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏
  • 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript,而不能使用预处理器,如 Pug (formerly Jade) 和 Babel

单文件组件的定义及使用

单文件组件的后缀名为 .vue,我们一般通过 webpack 来构建。

一直有个概念页面为 结构层(模板 html)、逻辑层(数据 逻辑 js)、表现层(样式 css),正好这个在 Vue 的单文件组件中得到了良好的实现。

相比 js 和 css 分家的组件来说。这样的单文件组件我感觉更香呀。

<template>
    <div>这里是我们的模板定义的地方。注意只能有一个根节点呀</div>
</template>
<script>
// 这里是我们组件的数据部分。
// 这里不需要template,构建的时候会自动解析上面的模板
// 这里需要 export default 或者 module.exports ,因为这样才可以传递出去。
export default {
   
}
</script>
<style scoped>
 /***
  * 这里可以放我们的css,然编译之后可以抽离出去。
  * scoped 是让css 只在当前组件生效
 /
</style>

vue

如何使用

  1. webpack
  2. vue-loader

当然,vue 也有 Vue-CLI 工具。通过它我们可以很快的跑起我们的页面。

微信公众号:前端linong

clipboard.png

参考文献

  1. 前端培训目录、前端培训规划、前端培训计划
  2. 单文件组件
阅读 1.4k

javascript-lNong
只此一生,何必从众

Read-Search-Ask

24.4k 声望
6.6k 粉丝
0 条评论

Read-Search-Ask

24.4k 声望
6.6k 粉丝
文章目录
宣传栏