.vue文件介绍

.vue文件概念：

　　在项目中，一个.vue文件就是一个单文件组件，注意 每个组件的数据互不影响

在项目中的位置：

　　一般位于src/views 目录下；公用组件放于 src/common(新建) 目录下即可 

.vue文件的三大组成部分：

　　//1.html 结构部分

　　<template></template>

　　// 2.数据和逻辑

　　<script></script>

　　//3.样式部分

　　<style></style>

生成这三大部分的快捷键：

　　<> + 回车键

　　

使用组件的注意事项：

​ 　　1.html 必须用 一个根标签包裹 (就是template下面只有一个div)

  　　　　<template>
     　　　　 <div>
          　　　　<h1>我是组件1</h1>
      　　　　</div>  
 　　　　 </template>

​ 　　2.代码写到 exprot default 里面

  　　　　<script>
  　　　　　　export default {
  
 　　　　　　 };
  　　　　</script>　　　
　3.<style></style>标签： .vue文件的样式文件；lang="less";表示css的预处理器是less，可以使用less的嵌套和定义变量语法；
　　每个组件内最好写上scoped,scoped 的意思是只对当前组件起作用，对其他组件不起<template>

注册局部组件

• 顾名思义：在哪注册，就在哪可以使用

• 用法：
  1. 在需要用的地方，引包 import 名字 from '组件路径' 引入`
  2. 在 export default 里写一个属性： componments 传入一个对象，对象里写 这个组件名
  3. 组件名叫什么，那么在html 里就可以写这个名字的标签

代码如下：

<template>
  <div>
    <h1>这是我创建的第一个cli项目</h1>
    <hello></hello>
    <localvue></localvue>
    <localvue></localvue>

  </div>
</template>

<script>

// 注册局部组件,在哪注册，在哪使用   在App.vue里注册的只能在App.vue里面使用
import localvue from './components/localvue.vue'
export default {
  components:{
    localvue
  }

}
</script>

<style>
    
</style>

组件的name属性：

　　vue官方建议每个组件都写上 name属性

1. 直接在组件的内部写name:值即可

2. 不能用中文

3. 写了之后，chrome的vue插件中可以看到这个名字，更加利于检索，利于编码

   代码如下：

   <script>
   export default {
   	name:'hellovue'
   }
   </script>

 

 

To 哈尔滨冬天的雪！！！