一起学Vuejs（四）----- 单文件组件

不积跬步，无以至千里；不积小流，无以成江海。

 

Vuejs语言基础

 

单文件组件：

工程中的 .vue 文件，里面包含html，css， js ，实现了对一个组件的封装，一个.vue 文件就是一个单独的组件。

由于.vue文件是自定义的，浏览器不认识，对该文件进行解析时，需要安装vue-loader 对.vue文件进行解析（vue-loader是基于webpack的）。

其中， template 中都是 html 代码，定义在页面中显示的内容；script中都是 js 代码，定义这个组件中所需要的数据和及其操作；style 里面是css 样式，定义这个组件的样式，scoped 表明这里写的css 样式只适用于该组件，可以限定样式的作用域。

 

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<style scoped> //scope防止样式冲突
h1 {
  font-weight: normal;
}
</style>

 

 

博客借鉴：https://www.cnblogs.com/SamWeb/p/6391373.html