.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 哈爾濱冬天的雪！！！