3. Vue单文件组件

传统组件的问题和解决方案

1.问题

  • 全局定义 的组件必须保证组件的名称不重复
  • 字符串模板缺乏语法高亮, 在HTML有多行的时候,需要用到丑陋的
  • 不支持 CSS意味着当HTML和JavaScript组件化时,CSS 明显被遗漏
  • 没有构建步骤限制, 只能使用HTML和ES5 JavaScript,而不能使用预处理器(如: Babel)
    2.解决方案
    针对传统组件的问题,Vue 提供了一个解决方案一使用 Vue单文件组件。

Vue单文件组件的基本用法

单文件组件的组成结构

  • template 组件的模板区域
  • script 业务逻辑区域
  • style 样式区域
<template>
<!--这里用于定义vue组件的模板内容-->
</temp1ate>
<script>
//这里用于定义vue组件的业务逻辑
    export default {
        data: () { return {} },//私有数据
        methods: {} //处理函数
        // ... 其它业务逻辑
</script>

//建议为每个style都添加一个scoped的指令,从而防止组件样式之间的冲突问题,保证每个组件的样式都是自己私有的,不会影响到其他的组件
<style scoped>
/*这里用于定义组件的样式*/
</style>

webpack中配置vue组件的加载器

1 运行 npm i vue-loader vue-template-complier -D命令
2 在webpack.config.js配置文件中,添加vue-loader的配置如下:
```
//导入插件
const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘)

原文地址:https://www.cnblogs.com/songsongblue/p/12090784.html

时间: 2024-10-14 11:06:51

3. Vue单文件组件的相关文章

webpack入坑之旅(五)加载vue单文件组件

这是一系列文章,此系列所有的练习都存在了我的github仓库中vue-webpack,在本人有了新的理解与认识之后,会对文章有不定时的更正与更新.下面是目前完成的列表: webpack入坑之旅(一)不是开始的开始 webpack入坑之旅(二)loader入门 webpack入坑之旅(三)webpack.config入门 webpack入坑之旅(四)扬帆起航 webpack入坑之旅(五)加载vue单文件组件 webpack入坑之旅(六)配合vue-router实现SPA 需要什么? 在经过前面的四

基于VSCode的vue单文件组件模板设置---一次设置,可爽终生

第一步: 第二步: 第三步: 打开vue.json文件后,如果是初次设置,应该如下图所示,绿色注释部分不用管,注意那两个白色大括号 第四步:在大括号内全部粘贴如下代码,保存即可完成vue模板的设置 "Print to vue": { "prefix": "vue", "body": [ "<template>", "  <div></div>", &q

vue单文件组件的构建

在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件组件来解决这些问题. 我们建议你参考 webpack-simple ,只要遵循指示,你就能很快的运行一个用到 .vue 组件 . 这是vue-cli的项目模板. npm install -g vue-cli vue init webpack-simple my-project cd my-proje

Vue单文件组件基础模板

背景 相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中 我暂时就想到这两点,童鞋们可以在评论里帮我补充:因为有这么多优点,所以决定有必要将vue组件的常用配置项提炼出来,形成一个组件模板,方便日后项目开发复用 <template> <div> <h1>{{title}}</h1> <ChildComponents></

vue 单文件组件中样式加载

在写单文件组件时,一般都是把标签.脚本.样式写到一起,这样写个人感觉有点不够简洁,所以就想着把样式分离出去. 采用import加载样式 在局部作用域(scoped)采用@import加载进来的样式文件,想法是美好的.以为这样加载进来的样式文件也只对当前组件有效:可现实是残酷的,这样加载进来的样式无法限制其作用域. <style scoped> @import "样式文件"; </style> 解决方案 采用 src属性加载样式. <style src=&q

华视身份证读卡器获取uid号vue单文件组件版本

<template> <div id="app" ref="app"> <object ref="CertCtl" classid="clsid:F48AE9BC-809E-423c-81E8-FE27F1C1A981" id="CertCtl" name="CVR_IDCard" width="0" height="0&quo

vue单文件组件构建vue项目的若干技巧或建议

接触vue一年了,由于早前都是碎片化的学习与练习,缺乏深入的理解与总结,所以感觉收效甚微.最近利用闲暇时间撸了一个基于vue全家桶的天气应用webapp并做一些项目总结,以巩固自己所学,加深对vue的理解. 前端框架的选择 在web移动端应用快速崛起的今天,webapp,hybird app挤压传统原生app的趋势越发明显,产品的快速更新迭代.跨平台适配,催生了越来越多五花八门的前端框架.为了应对各式各样的产品需求,适应快速高效的开发工作,我们也必须跟上步伐,所以掌握一门甚至多门前端框架显得尤为

vue单文件组件实例2:简单单文件组件

? Introduce.vue: <template> <div class="intro"> 单位介绍 </div> </template> <script> </script> <style scoped> .intro{ font-size:20px; color:#000; margin:20px auto; } </style> Employment.vue: <templa

vue - 单文件组件定义与使用

1.组件的定义 <template name="组件名称"> <view> ...... </view> </template> <script> export default { name: "组件名称", //组件外层属性 props: { 属性名称: { type: String,//属性类型 value: "值" }, ...... }, //组件生命周期 created:fun