慕課網視頻學習筆記: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(){。。。}