Vue单文件组件
什么是单文件组件?单文件组件就是一个文件扩展名为.vue的single-file components (单文件组件)的文件。是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js并且还可以使用 webpack 或 Browserify 等构建工具。单文件组件的好处在 Vue 项目中,我们使用Vue.component来定义全局
什么是单文件组件?
单文件组件就是一个文件扩展名为 .vue
的 single-file components (单文件组件)的文件。是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、js
并且还可以使用 webpack 或 Browserify 等构建工具。
单文件组件的好处
在 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 等构建工具。
示例:这是一个名为demo.vue的单文件组件
<template>
<div class="demo">
<h2>姓名:{{name}}</h2>
<h2>家庭地址:{{address}}</h2>
<button @click="showName">点我提示当前名称</button>
</div>
</template>
<script>
export default {
name:'School',
data(){
return {
name:'张三',
address:'北京'
}
},
methods: {
showName(){
alert(this.name)
}
},
}
</script>
<style>
.demo{
background-color: orange;
}
</style>
在文件中我们可以看到 在<template></template>中定义组件的结构,在<script></script>标签里面写配置项,在<style></style>标签中写样式
一个.vue文件就是一组件 维护简单方便 文件内容条理清晰
更多推荐
所有评论(0)