Vue组件第六篇：Vue单文件组件

一：index.html

执行入口：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>联系一下单文件语法</title>
</head>
<body>

<div id="root">

</div>
<script type="text/javascript" src="../../js/vue.js"></script>
<!--这个叫做入口文件-->
<script type="text/javascript" src="./main.js"></script>

</body>
</html>

二：main.js

创建vue对象

// 浏览器不能直接支持es6的模块化语法
// import浏览器不认识。
// 所以，当没有引入脚手架的时候，不能运行。
import App from './App.vue'

new Vue({
    el: '#root',
    template: `<App/>`,
    components: {App}

})

三：APP.vue

分装APP组件

// APP的作用就是汇总所有组件
<template>
  <!-- 组件的结构-->
  <div>
    <school></school>
    <student></student>
  </div>
</template>

<script>
// 引入其他组件
// 脚手架当中vue可以写，可以不写
import school from "./School.vue";
import student from "./Student.vue";

// 这是最终的简化写法
export default {
  // 不写这个名字，别人就可以随意定义名字了。
  name: "App",
  data() {
    return {
      name: '尚硅谷',
      age: '11'
    }
  },
  methods: {
    showX() {
      alart('hello')
    }
  },
  components: {
    school, student
  }
}
</script>

四：student组件和school组件

// 组件=html+css+js,然后又三个标签分别对应这几个内容
<template>
  <!-- 组件的结构-->
  <div class="demo">
    <h2>学校名称: {{ schoolName }}</h2>
    <h2>学校地址: {{ address }}</h2>
    <button @click="showX">点我</button>
  </div>
</template>

<script>
// 交互的代码
// const school = Vue.extend({
//   data() {
//     return {
//       schoolName: '尚硅谷',
//       address: '北京昌平'
//     }
//   },
//   methods: {
//     showX() {
//       alart('hello')
//     }
//   }
// })
//
// // 默认暴露
// export default school


// export default Vue.extend({
//   data() {
//     return {
//       schoolName: '尚硅谷',
//       address: '北京昌平'
//     }
//   },
//   methods: {
//     showX() {
//       alart('hello')
//     }
//   }
// })

// 这是最终的简化写法
export default {
  // 不写这个名字，别人就可以随意定义名字了。
  name: "school",
  data() {
    return {
      schoolName: '尚硅谷',
      address: '北京昌平'
    }
  },
  methods: {
    showX() {
      alart('hello')
    }
  }
}
</script>

<style>
/*交互的代码*/
.demo {
  background-color: #orange;
}
</style>

// 组件=html+css+js,然后又三个标签分别对应这几个内容
<template>
  <!-- 组件的结构-->
  <div class="demo">
    <h2>学生名称: {{ name }}</h2>
    <h2>学生年龄: {{ age }}</h2>
    <button @click="showX">点我</button>
  </div>
</template>

<script>
// 交互的代码
// const school = Vue.extend({
//   data() {
//     return {
//       schoolName: '尚硅谷',
//       address: '北京昌平'
//     }
//   },
//   methods: {
//     showX() {
//       alart('hello')
//     }
//   }
// })
//
// // 默认暴露
// export default school


// export default Vue.extend({
//   data() {
//     return {
//       schoolName: '尚硅谷',
//       address: '北京昌平'
//     }
//   },
//   methods: {
//     showX() {
//       alart('hello')
//     }
//   }
// })

// 这是最终的简化写法
export default {
  // 不写这个名字，别人就可以随意定义名字了。
  name: "school",
  data() {
    return {
      name: '尚硅谷',
      age: '11'
    }
  },
  methods: {
    showX() {
      alart('hello')
    }
  }
}
</script>