什么是<template/>标签

template是html5新元素，主要用于保存客户端中的内容，表现为浏览器解析该内容但不渲染出来，可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。

关于单文件组件

vue的单文件相当于一个页面中的组件，包含了关于该组件的html-css-js文件集合，这么做的目的有利于项目的管理和整合，官方说法是有构建步骤。

在<template/>标签下只能有一个子节点元素，如果写多个如<div/>这样的标签则会报错，如下所示

<template>
    <div></div>
    <div></div>
</template>
//run --> throw error
-Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

.vue文件可包含html-css-js，webpack自动打包成三个文件?

在.vue文件中，dom结构可以写在<template/>标签下，而针对该dom结构的样式文件则作为<template/>标签的兄弟元素<style/>存在，同样的控制该dom结构的脚本程序写在另一个兄弟元素<script/>之中，这样一来，每个组件自己对应的结构样式都在同一个文件之中，便不会与其它的组件搞混了。

style标签有哪些属性?分别是什么意思?

<style/>标签包含scoped和module属性，分别表示css作用域和css模块，一般会写上scoped属性，表示样式仅对当前组件以及其子组件的模板部分生效

script标签中的export default是什么意思?

可以从全文仅有的一张图中看到，<script/>标签下第一行代码是export default {……}，这是ES6新增的模块部分的语法，采用模块的方式，每个文件都自成一个模块，采用export和import来暴露和引用接口。一个文件或模块中，export 和 import可以有多个，但export default只能有一个，使用该命令之后别的模块引用时就可以不需要知道所要加载的模块变量名

export default下可以写哪些东西?

可以写很多东西，包括变量和方法，对象等，只要是想作为开放的接口都可以写，在.vue文件中一般写上data() {}以及method等,data指的是在该组件中定义的模板数据，而如果你对<template/>中的元素绑定了点击方法，如<button @click="login">，则可如下所示：

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
          login: function() {
              console.log(this.username,this.password);
          }
        }
}
</script>

动力节点在线课程涵盖零基础入门，高级进阶，在职提升三大主力内容，覆盖Java从入门到就业提升的全体系学习内容。全部Java视频教程免费观看，相关学习资料免费下载!对于火爆技术，每周一定时更新!如果想了解更多相关技术，可以到动力节点在线免费观看Vue入门视频教程学习哦!