Vue----单文件组件

 

引入:@1官方脚手架 @2挂载vm对象 @3组件引入并渲染到vm中

单文件组件也有全局组件和局部组件只是把一个组件单独写在一个.vue文件中,供别的组件引入然后注册

引入文件时:一般使用相对路径 上一下用../ 同级使用./ 下级使用/ @ 代表src文件夹

举例：

APP.vue文件

<template>

  <div>

    <Box1></Box1>

    <Nav1></Nav1>

  </div>

</template>

<script>

import Box1 from "./Box1.vue"

import Box1 from "@/Box1.vue"

// @代表src目录的意思

// 注册名不能跟Vue原生Dom重名，

// 注册名字是驼峰，使用时要用连字符

import Nav1 from "./Nav1.vue"

// 注册的组件使用时可以用双标签也可以用单标签；如果有插槽时就必须用双标签

export default {

  components: {

    Box1:Box1,

    Nav1

  }

}

// 如果，Vue的script注释了，在打包的时候vue的打包环境 会帮我们把这个文件解析成为一个对象 然后添加一个

// template属性 值为解析的<template>页面模板

// 也就是说 .vue文件中 可以不要<style>和<script>但是不能不写<template>

// style可以写多个

// 每个组件内只能有一个根元素 不要在根元素上写 v-for

 

</script>

<style>

</style>

 

Box.vue文件

<template>

    <div>

      <button @click="change">点击</button>

        <p>{{msg}}</p>

    </div>

</template>

 

  <script>

 

  export default {

    data:function(){

      return{

        msg:"66666"

      }

    },

    methods:{

      change(){

        this.msg="hello"

      }

    }

  }

  </script>

 

  <style>

 

  </style>