在很多 Vue 项目中,我们使用 Vue.component 来定义全局组件,紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。

这种方式在很多中小规模的项目中运作的很好,在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中,或者你的前端完全由 JavaScript 驱动的时候,下面这些缺点将变得非常明显:

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

文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法,并且还可以使用 webpack 或 Browserify 等构建工具。

——————————————————————————————————————————————

要使用单文件组件,我们需要在项目中安装以下依赖:

①安装npm:npm全称是Node Package Manager,是基于Node.js的包管理器,也是整个Node.js社区最流行,支持的第三方模块最多的包管理器:

npm -v

由于网络问题,安装cnpm:

npm install -g cnpm --register=https://register.npm.taobao.org

②安装vue-cli:

cnpm install -g @vue/cli

③安装webpack:webpack是JavaScript打包器(module bundler)

cnpm install -g webpack

安装完之后,可以在命令行输入d:进入D盘,然后输入vue ui,会自动打开图形化管理页面,在这里我们可以直观的在D盘创建一个新的项目:

 项目的包管理器:package management选择“npm”选项➡next➡选择“默认设置”➡创建项目。

——————————————————————————————————————————————

单文件组件整个页面分为三块:模板(视图区域)+脚本区域+样式区域

<template>
</template>

<script>
</script>

<style>
</style>

在其他组件中使用到单文件组件时,首先在script中引入组件:

例如:import HelloWorld from './components/test.vue'

然后在components内局部注册,之后就可以在模板中使用该组件。

___________________________________________________________________________________

引申一下组件的声明:使用Vue.component来创建一个新的组件: 

 

注意:一个组件的模板(template)必须有一个根节点(最外层用<div>标签包裹起来)!

组件的事件监听:

在组件模板的<button>标签上用 v-on:click 绑定一个函数,然后用method来声明这个函数:

 这时候我们通过this.$emit()方法去触发一个事件,第一个参数是事件名称,后面一个参数是可携带的参数,这时候在组件的标签中,就可以用事件绑定的方式接收到emit函数触发的事件:

在页面上,我们同样使用method属性去声明这个clicknow方法:

此外在组件的模板中我们可以使用<slot></slot>插槽,这样在组件的标签内部,我们就可以插入任意的html内容:

Logo

前往低代码交流专区

更多推荐