码迷,mamicode.com
首页 > 其他好文 > 详细

3. Vue单文件组件

时间:2019-12-24 14:04:33      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:code   一个   需要   之间   pre   rip   es5   lib   函数   

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

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‘)

3. Vue单文件组件

标签:code   一个   需要   之间   pre   rip   es5   lib   函数   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!