HM.DAY-01
##### 複習javascript
*webpack屬性配置css
-----------javascripthtml
module.exports={
mian:'.src/mian.js'
},
// 出口
output:{
Filename:'./build.js',指定js文件
path:path.join(_dirname,'dist') 最好是絕對路徑
表明當前目錄的上一級的dist
},
module:{
同樣的功能rules: webpack2.x以後新加的
loaders:[require('./a.css||./a.js')
{test:/\.css$/,
loader:'style-loader!css-loader',
// 順序是反過來的2！1
},
{test:/\.(jpg|svg)$/,
loader:'url-loader?limit=4096&name=[name].[ext]',
// 順序是反過來的2！1
[name].[ext]內置提供的，由於自己是先讀這個文件
options：{
limit:4096,
name:'[name].[ext]'
}
},
plugins:[
// 插件的執行順序是依次執行的
new htmlWebPlugin({
template:'./src/index.html',
})
// 將src下的template屬性描述的文件根據當前配置的output.path,將文件移動到該目錄
]
]
}
#### 今日重點vue
*運行起來Vuejava
*vue經常使用指令react
*組件的使用webpack
###### webpack-ES6的處理es6
*ES6的模塊，vue自己默認支持ES6的模塊導入導出web
*babel數組
-babel-loader(內部依賴babel-core)
+關鍵字（presets es2015）
+函數（plugins babel-plugin-transform-runtime）
##### ES6中的模塊
*默認
-導入‘import[,..xx] [,..from] './xx.ext' ’
-導出 ‘export default obj’;
*聲明式
-1.導出 ‘export var obj=xxx;’
-2.導出 ‘export bar obj2={ };’
-3.單獨導出 ‘export { stu };’
-導入 ‘import {obj, obj2 stu} from './xxx.js';直接使用obj’
*全體
*默認導出和聲明式導入在使用上的區別
-要注意，聲明式導入的時候，必須{名稱}名稱要一致（按需導入）
-默認導入，能夠隨意的使用變量名
-------------------javascript
{
default:"我是默認導出的結果"
import xxx from './cal.js'會獲取到整個對象的defalut屬性
obj1：「我是聲明式導出1」
obj2:"我是聲明式導出2"
obj3:"我是聲明式導出3"
obj4:"我是聲明式導出4"
}
import *allObj from './cal.js'獲取的就是一整個對象
*import 和 export必定寫在頂級，不要包含在{}內
###### ES6中的代碼變化
------javascript
var name='abc';
var person={name};簡寫->varperson={name:name};
聲明函數
var cal={
add=function(){
return 1;
},
add2(){
return 2;
}
add3:function (n1,n2){
return n1+n2;
},
add4(n1,n2){ //幹掉了：function(n1,n2)
return n1+n2;
}
}
-----------------------
*單屬性的key和變量的名相同，而要使用的值作vaulue，
*就能夠簡寫{name}->{name:name}
*es6中的函數聲明
-就是幹掉了：function
##### vue單文件方式
*單文件就是以*.vue結尾的文件。最終經過webpack也會編譯成*.js在瀏覽器運行
*內容：<template></template>+<script></script>+<style></style>
*1:template中只能有一個根節點2.x
*2:script中 按照export default{配置}來寫
*3：style中 能夠設置scroped屬性，讓其只在template中生效
##### 以單文件的方式啓動
*webpack找人理解你的單文件代碼
-vue-loader,vue-template-compiler,代碼中依賴vue，
*啓動命令
##### vue介紹
*2014年誕生，2013年react 09年angular.js
*做者：尤雨溪
*核心概念：組件化 雙向數據流（基於es5中的defineProperty來實現的），ie9級才支持
*angular核心：模塊化 雙向數據綁定（髒檢測：一個數組（&watch））
-開發一個登錄的模塊、登錄須要顯示的頭部、底部、中部
-組件：組件：組合起來的一個部件（頭部、底部、中部）
-細分代碼：
+頭部：頁面、樣式、動態效果
+代碼：template style script
*框架對比，建議學完vue再看
*https://cn.vuejs.org/v2/guide/comparison.html#React
#### 數據流
*1向：js內存屬性發生改變，影響頁面的變化
*2.向：頁面的改變影響js內存屬性的改變
##### vue中經常使用的v-指令演示
*經常使用指令
*v-text 是元素的innerText只能在雙標籤中使用
*v-html 是元素的innerHTML，不能包含{{xxx}}
*v-if 元素是否移除或插入
*v-show 元素是否顯示或隱藏
*v-model 雙向數據綁定，v-bind 是單向數據綁定（內存JS改變頁面）
##### class 結合v-bind 使用
*須要根據可變的表達式的結果給class賦值，就須要用到v-bind：class="xxx"
*v-bind:屬性名=「表達式」，最終表達式運算結束的結果賦值給改屬性名
- 簡化寫法是：‘：屬性名=「表達式」 ’
*class:結果的分類
-一個樣式：返回字符串（三元表達式和key和樣式的清單對象）
-多個樣式：返回對象（樣式作key，true和flase作值）
##### methods和v-on的使用：
*綁定時間的方式
-‘v-on:事件名=「表達式||函數名」’
-簡寫：‘@事件名=「表達式||函數名」’
*函數名若是沒有參數，能夠省略（）只給一個函數名稱
*聲明組件內函數，在export default這個對象的根屬性加上methods屬性，其是一個對象
-key 是函數名 值是函數體
*在export default 這個對象的根屬性加上data屬性，其是一個函數，返回一個對象
-對象的屬性是咱們初始化的變量的名稱
*凡是在template中使用變量或函數，不須要加this
*在script中使用就是須要加上this
##### v-for的使用
*可使用操做數組（item,index）
*可使用操做對象（value,key,index）
*key是相似trank by的一個屬性
*爲的是告訴vue,js中的元素，與頁面之間的關聯，與視圖刪除元素的時候，是單個元素的刪除而不是整版替換，因此須要關聯其關係，設置（必須，性能）
*2.2.0+的版本里，當在組件中使用v-for時，key如今是必須的。
##### 漂亮的列表
####父子組件的使用
*父和子，使用的是父，被用的是子
*父須要聲明子組件，引入子組件對象，聲明方式以下：
組件內生成組件：
--------------javascript
import 子組件對象from'./xxx.vue';
{
components:{
組件名：子組件對象
}
}
*全局組件，使用更爲方便，不須要聲明，直接用
*在mian.js中引入一次，在main.js中使用‘vue.component('組件名'，組件對象)；’
*全部的組件就能夠直接經過組件名，使用
##### 父傳子
*父組件經過子組件的屬性進行傳遞
-方式有2：
+常量:prop1=「常量值」
+變量:prop2="變量名"
*子組件須要聲明
-根屬性props：['prop1','prop2']
-在頁面中直接使用{{prop1}}
-在js中應該如何使用prop1？ this.prop1獲取
-在頁面中直接使用{{prop1}}
*vueBus的通訊使用實現子組件通訊父組件
###### 子向父組件通訊（vuebus）（擴展）
*經過new Vue()這樣的一個對象，來$on('事件名'，fn(prop1,prop2))
*另外一個組件引入同一個vuebus，來$emit('事件名'，prop1,prop2)
###### 看文檔的對象分類
*1.全局的表明vue.的
*2.實例的表明this.或者new Vue().
*3.選項表明 new Vue()的參數
或者 export default裏邊的屬性
-
每一个你不满意的现在，都有一个你没有努力的曾经。