【vue.js】入門

標籤：分享   node   function   傳統   識別   展現   route   標籤   color   

慕課網視頻學習筆記：http://www.imooc.com/learn/694

1.將html、js、css寫到一個尾碼名.vue的檔案中，區分這三種類型是通過<template>、<script>、<style>來區分，這個.vue檔案在打包的過程中會被轉換成瀏覽器能識別的傳統html、js、css。

2.使用vue.js官方提供的命令列工具，可以讓我們把關注點放在項目功能的實現上。

3.需要安裝依賴（cnpm install），可進入package.json中查看。比如vue-loader，其作用就是解析vue檔案使瀏覽器能識別。

4.頁面的產生，通過webpack打包工具將.vue檔案打包成html、js、css，其中js就是一個新的vue對象。

5.vue.js組件的重要選項：data、methods、watch

6.vue對象和頁面展現的聯絡（html和vue對象的粘合劑）

7.v-if直接不渲染，而v-show在代碼中是能看到的（用的css中display）。

8.items指向vue對象中的列表，item是迴圈體變數，通過迴圈體對象的屬性來取apple等值。

9.dothis是從methods中取方法

10.v-bind中變數字串和布爾值的判斷，比如imageSrc、red、classA、classB是字串，而isRed是布爾值，它是用於判斷red（red是對象中的key）是否展現的

11.入口檔案index.html會預設調用main.js檔案（src目錄下）

import Vue from ‘vue‘;import VueRouter from ‘vue-router‘;import App from ‘./App‘;

import vue from ‘vue’  打包時vue會從node_modules裡面取vue架構的相關東西。

import App from ‘./App‘;  來自統計目錄下的App檔案，省略了.vue尾碼

會自動把駝峰的寫法（在main.js中）轉為小寫或者帶橫杠-（index.html中）的寫法。

 12.組件一定要註冊才能使用

App.vue檔案中有<hello></hello>標籤，和剛剛的邏輯相同，也需要註冊，匯入components目錄下的hello.vue

export是es6的文法

 13.紅色框部分為es6寫法（app.vue中）

其相當於：   data:function(){return...}

14.app.vue中export出來的東西會在項目中自動產生new vue（{data。。。}），export的就是vue中的參數{。。。}

簡單理解：把紅色框部分理解為vue中的參數和屬性即可

在編寫app.vue的時候，可以模仿app.vue的寫法，把紅色框部分改成：   data（）{。。。}

【vue.js】入門