請稍等。。吃完飯回來寫
吃飯回來了~嘿
————————————————正經分割線—————————————————
先看我的目錄結構：這是配置好node環境和配置好webpack后，生成的原始框架。
具體配置方法移步官網：https://cn.vuejs.org/v2/guide/installation.html#命令行工具-CLI
官網沒有介紹框架的詳細信息，這里我補充一下：
腳手架目錄介紹 |
|
| CLI腳手架 |
webpack搭建的開發環境，使用es6語法，打包和壓縮js為一個文件，項目文件在環境中編譯而不是瀏覽器，實現頁面自動刷新 |
| 環境 |
node.js（安裝node和npm） |
| build 文件夾 |
構建客戶端和服務端，可以改變其端口號 |
| config 文件夾 |
對應的配置文件 |
| static 文件夾 |
靜態文件 |
| .gitignore |
git的忽略文件。。。不重要 |
| index.html |
！！** 入口文件 |
| package.json |
node的配置文件，說明一些需要的依賴。有了這個文件，在文件目錄下打開命令行，執行cnpm i 安裝依賴。 |
開發用的src 文件夾，介紹如下：
| src 文件夾 |
開發文件，src下的文件介紹： |
|
|
|
assets 文件夾 |
對應的圖片等資源文件 |
|
|
components 文件夾 |
放置所有自定義的 組件文件（文件名以 .vue 結尾，開頭大寫） |
|
|
router 文件夾 |
路由文件 |
|
|
App.vue |
根組件文件。（注意以 .vue 結尾的組件的文件名，開頭都要大寫） |
|
|
main.js |
* 直接關聯入口文件，執行完index.html后就會執行main.js的文件，作用就是處理以.vue結尾的組件文件，然后插入到index.html文件中.中轉站、處理器的作用。 內部配置如下： |
|
|
|
import Vue from ‘vue’： 指的是從node_modules的npm中把vue.js的依賴文件引入了進來。 |
|
|
|
import App from ‘./App’: 指的是把根目錄（src）下的App.vue文件引入進本js中進行處理 |
|
|
|
new Vue（{}）： 創建一個vue實例。 實例中的配置如下： |
|
|
|
el: ‘#app’ 綁定給index.html中的 <div id=‘app’> |
|
|
|
template: ‘<App/>’模板標簽 |
|
|
|
components: { App }：注冊局部組件
。。。 其他具體配置及解析見下邊源代碼 |
模板中，文件調用的順序【也可以說文件之間關聯的關系】：
1、index.html --> （第一個執行的頁面）
2、main.js --> (作用就是處理vue文件)
3、App.vue --> (根組件。如果這個根組件中有內容，就將根組件內容插入到index.html的div#app ) ->
4、components/xxx.vue --> (子組件)【根組件中再調用、注冊、引用子組件。如果子組件中有內容，就將子組件內容插入到根組件App.vue的div#app中 】
5、components/ 組件文件夾下，子組建的互相引用與配合
代碼案例
以下貼一個組件嵌套成功的demo，並對每個主要頁面的具體代碼加以注釋，說明每行代碼的作用
1. 入口文件：index.html 文件
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="author" content="xing.org1^">
6 <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 <title>xing.org1的第一個vue實例</title>
8 </head>
9 <body>
10 <div id="app"></div>
11 <!-- built files will be auto injected :構建的文件將自動注入，所以這個頁面不用添加任何東西，除了更改title和設置meta等必要-->
12 </body>
13 </html>
2. main.js文件（我叫他：中轉站、vue組件處理器）
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' //調取vue.js文件(使用import命令加載的Vue構建版本) import App from './App' //引入App.vue文件 import router from './router' //引入路由文件？ import Xingorg1 from './components/Xingorg1' //引入自定義的Xingorg1的子組件，注意區分大小寫。(他被注冊為了全局組件，任何頁面都可以像這樣引入) Vue.config.productionTip = false // 注冊全局組件 Vue.component('zujianName',Xingorg1); //第一個參數是自定義的、調用組件用的、標簽的名字，第二個參數是組件文件的名字，注意大小寫，不然找不到這個組件文件 // 注意全局組件的寫法，component沒有s，【你可以這么想，他是全局的只能有一個，所以不能加s ！！】 /* eslint-disable no-new */
/*實例化一個Vue對象 */ new Vue({ //實例化對象 el: '#app', //當前vue要控制的容器元素（這里是index.html中的id為app的div） router, //配置路由？ template: '<App/>', //模板：對應的組件調用的標簽 components: { App } //組件注冊：components。App就是注冊的文件，來源於App.vue })
為了方便觀看，再貼一下根組件與子組件的結構關系：
3. 根組件：App.vue
<!-- 第一部分： 模板 -->
<!-- <template>標簽不會被渲染出來，就和小程序里邊的block一樣。所以用途上可以去包裹一些內容，或者放一些循環指令在外部，以避免循環指令放在html的標簽上然后渲染出不必要的標簽 -->
<!-- template里邊，有且只能有一個根標簽！ 也就是說和div#app有並列的標簽時會報錯-->
<template>
<!-- 當前組件名字是什么，class的name就是什么(在App.vue中是id) -->
<div id="app">
<!-- 使用子組件第(3)步：調用一下引用進來並經過注冊的helloworld組件 -->
<HelloWorld></HelloWorld><!-- 調用了 HelloWorld子組件文件里自定義的組件標簽 HelloWorld-->
<zujianName>hh</zujianName><!-- 調用了 zujianName 子組件文件里自定義的組件標簽 zujianName-->
</div>
</template>
<!-- 第二部分： 行為 、處理邏輯-->
<script>
// 使用子組件第(1)步：引入 components文件夾下的helloworld.vue 組件:
import HelloWorld from './components/HelloWorld'
// 可以把組件理解為一個功能的頁面，可以是小功能，可以是大功能。開發中一個項目會分為多個組件
export default {
name: 'app',//name與組件名字一致
components: {//注冊局部組件。局部注冊組件這里，可能會定義多個組件，所以component這個單詞加上“s”
HelloWorld//使用子組件第(2)步：注冊，因為引進來了這個組件，所以在這里必須需要注冊這個組件
}
}
</script>
<!-- 第三部分： 解決樣式 -->
<!-- 樣式的寫法 和css中一樣-->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
4. 子組件 ./components下的HelloWorld.vue文件
<template>
<div class="helloworld">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {//自己寫的組件，data這里是一個方法，return出來的一定是一個對象
return {
msg: "Hello Xing.org1^!"
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!-- 翻譯：加上"scoped"屬性，可以僅將本頁面的CSS限制為該組件（私有作用域的概念） -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
5、另一個子組件 ./components下的Xingorg1.vue文件。
但是這個子組件身份特殊，因其是在main.js下注冊的全局組件，
main.js中已經執行了“引入”+“注冊”的前兩步驟，所以在所有頁面中都可以走第3步驟 ，即 直接調用【直接調用、直接調用（強行湊夠三遍）】注冊時自定義的 組件的名稱 了。
具體示例可以看App.vue中的這一行代碼：
<zujianName>hh</zujianName>，“zujianName”就是當初注冊時，自定義的組件的名字。
把他當成標簽直接調用即可。那么他這個文件中，template里邊的所有內容就被 調用的頁面 給引用了。
如下是Xingorg1文件的具體內容:
<template>
<!-- 組件 -->
<div class="xingorg1">
<ul>
<li v-for="user in users">
{{user}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'xingorg1',
data () {
return {
users: ["x","i","n","g","o","r","g","1"]
}
}
}
</script>
<style scoped>
/*本組件專用樣式*/
li{
padding: 5px;
text-align: left;
font-size: 18px;
list-style-type: none;
}
li:nth-child(even){
background: #dedede;
}
</style>
好了~這樣一個小demo就出來啦！
本文是學習騰訊課堂vue視頻的一個學習筆記，完整講解可以移步：https://ke.qq.com/course/256052#term_id=100301895
聲明：
請尊重博客園原創精神，轉載或使用圖片請注明：
博主：xing.org1^
出處：http://www.cnblogs.com/padding1015/