7. Vue 单文件组件
2020-07-13 05:55
78 查看
Vue 单文件组件
-
概述
在很多 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 等构建工具。
这是一个文件名为
Hello.vue的简单实例,还可以使用预处理器来构建简介和功能丰富的组件,如 Pug,Babel (with ES2015 modules),和 Stylus。
使用
<template> <div> <!-- 这部分用于编写HTML模板--> <h1>这是用户中心!</h1> </div> </template> <script> export default { // 这部分用于书写js代码 name: "UserCenter", data(){ return { } }, methods:{ } } </script> <style lang="stylus" scoped> /*这部分用于编写CSS样式*/ </style>
相关文章推荐
- vue做的单页面组件(单文件组件)不起作用,webpack已经打包成功,页面中没有结果
- Vue.componen的缺点和单文件组件
- 使用字蛛压缩字体后在vue组件中使用无效,在控制台发现转换为base64文件了,而且还是 0kb显示,跪求大神破解
- vue组件内部引入远程js文件
- 用webpack2.0构建vue2.0单文件组件超级详细精简实例
- Vue单文件组件
- vue单文件组件和路由实现简单的两个页面
- 浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
- 单文件组件.vue 文件
- vue中的单文件组件
- Vue单文件组件的如何使用方式介绍
- 在vue组件中引入公共文件,js,css,component
- vue项目搭建(由于是初学者,路由及文件的放置有些不规范,一般子组件建议放于components下)
- vue 在组件里引入 remote js 文件
- 解决 vue component(组件)里面每个.vue文件的style互相影响的问题
- 使用vue.js单文件组件,使用vue-cli脚手架,并升级node.js版本
- Vue cli2标准版安装的目录介绍(cli3和cli2冲突解决办法)及Vue单文件组件
- Vue.js一个文件对应一个组件实践
- Webpack + vue-loader构建单文件vue组件
- vue插件(自定义组件或js文件使用),vue.extend(),vue.component()注册组件