.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 哈尔滨冬天的雪！！！