vue-单文件组件

Vue.js自定义的一种文件格式：.vue文件，称为单文件组件，就是将html、css、js封装在同一个文件内，从而实现了对一个组件的封装， 一个.vue 文件就是一个单独的组件。

1、编写单文件组件（.vue结尾的文件），由3部分组成；

//<template>、<style>、<script>
    <template>
        html
    </template>

    <style>
        css
    </style>

    <script>
        js
    </script>

*<template> ‐html代码,最多可以包含一个 根标签

<template>
  <div>
    hello vue
    <input type="text" ref="mytext"/>
    <button @click="hand">add</button>

    <ul>
      <li v-for="data in datalist" :key="data">
        {{data}}
      </li>

    </ul>
  </div>
</template>

*<script> ‐js代码,最多可以包含一个 

<script>
export default {
  data(){
    return{
      datalist:[]
    }
  },
  methods:{
    hand(){
      //console.log("tiramisu",this.$refs.mytext.value) //获取值
      this.datalist.push(this.$refs.mytext.value)  //添加到数组中
    }
  }
}
</script>

 *<style>‐ css代码。可以包含多个，src的路径是相对的