vue框架視頻學習第一天筆記

webpack編譯

webpack編譯文件基礎插件
- babel-cli
- babel-core
- babel-loader@7.1.5
- babel-preset-es2015
- babel-preset-stage-0
- babel-plugin-transform-runtime 為了編譯函數
- webpack
- webpack-dev-server
- webpack-cli
- url-loader
- file-loader
- css-loader
- style-loader
- extract-text-webpack-plugin@next 為了支持webpack4
- html-webpack-plugin
下載插件時注意
- babel-loader版本為7.1.5
- extract-text-webpack-plugin必須設置@next，因為正常下載版本不支持webpack4狸相；

webpack.config.js配置

rules設置中的依賴是倒敘執(zhí)行燃逻；
plugins設置中的插件是正序執(zhí)行努溃；
webpack.config.js配置代碼：

 //引入模塊
 const webpack=require("webpack");
 const path=require("path");
 const HtmlWebpackPlugin=require("html-webpack-plugin");
 const ExtractTextPlugin=require("extract-text-webpack-plugin");
 //配置
 module.exports={
     //1.入口文件
     entry:path.resolve(__dirname,"src/main.js"),//main默認入口文件
     //2.出口文件
     output:{
         path: path.resolve(__dirname,"dist"),
         filename: "my_bundle.js"
     },
     //3.模型文件
     module:{
         //轉化規(guī)則
         rules:[
             {
                 test:/\.js(x)?$/,
                 exclude:/node_modules/,
                 use:{
                     loader:"babel-loader",
                     options: {
                         presets: ["es2015","stage-0"]
                     }
                 }
             },
             {//配置css
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
                     fallback: "style-loader",
                     use: "css-loader"
                 })
             },
             {
                 test:/\.(eot|svg|ttf|woff)(\?\w*)?$/,
                 use:"url-loader?limit=50000"
             },
             {
                 test:/\.(png|git|jpg|jepg)$/,
                 use:"url-loader?limit=50000"
             }
         ]
     },
     devServer: {
         disableHostCheck: true
     },
     plugins:[
         new ExtractTextPlugin({
             filename:"my_style.css"
         }),
         new HtmlWebpackPlugin({template:"./src/index.html"})
     ],
     mode:"development"
 };

webpack運行
- webpack：目的是壓縮生成新的文件苔咪，將webpack.config.js設置中的入口文件壓縮后吃既，輸出到output.path路徑下斧蜕，通過html插件渺杉，將index.html放在輸出路徑下蛇数，并經壓縮后的js文件插入到html文件中；與npm run build效果相同是越；
  - 注：運行webpack命令耳舅，必須在webpack.config.js文件所在的目錄下運行；
- 在package.json中設置scripts選項中的參數dev和build，通過以下命令運行
  - npm run dev：運行webpack-dev-server浦徊；
  - npm run build：運行webpack馏予，生成壓縮文件，放在dist文件夾下盔性，將js文件插入到html文件中霞丧；
  - 注：運行此命令必須在package.json所在目錄下運行；否則會報日志錯誤冕香；

項目目錄結構

目錄結構
- src：存放人可以看懂的源代碼蛹尝，具備一定的功能劃分，MVC
- dist：存放真實上線的代碼悉尾，通過webpack打包后的文件突那；
- webpack.config.js：配置webpack的打包路徑和規(guī)則等；
- package.json：通過命令npm init -y快速創(chuàng)建构眯，顯示下載的插件信息
- node_module：項目中的包文件愕难，在gitHub上傳時，不用上傳惫霸；
命令：
- webpack：打包文件猫缭，生成dist目錄；
- webpack-dev-server：運行src下的代碼壹店，虛擬出打包后的js文件猜丹，在服務器端運行，多用于測試階段茫打；
  - 命令webpack-dev-server --inline --hot --open --port 1234即在瀏覽器中自動打開服務器居触；修改文件后保存妖混，服務器會自動更新老赤；其中--port xxxx可以設置端口號；
package.json
- 設置scripts屬性制市，將開發(fā)命令簡化抬旺，輸入過多的代碼，只需輸入對應的設置即可祥楣，如npm run dev
- 在package.json文件夾下
  - 運行npm i即可下載所有的依賴包开财，即node_module文件夾；包括devDependencies和depandencies兩個對應的依賴误褪；
  - 運行npm i --production只下載depandencies對應的依賴责鳍；
項目目錄結構圖:

項目目錄結構圖

es6語法

es5中模塊的導入和導出
- 導入自定義模塊：var cal=require("./cal.js")
- 導出：module.exports={};
es6中模塊的導入和導出
- 默認導出，導入
  - 導出：export default {};
  - 導入：import xxx from "./cal.js";
  - 注：導入時的變量名可以是任意的名字兽间；可以與導出時的對象名不同历葛；
- 聲明式導出導入（按需導入）
  - 導出：
    - 聲明與導出一同：export var obj1="xxx";或export var obj2={};
    - 先聲明后導出：聲明：var obj3={};導出：export {obj3};
  - 導入：
    - 代碼：import {obj1,obj2,obj3,obj4} from "./cal.js"
    - 注：導入時對象中屬性名必須與導出時相同；
- 全體導入（添加* as）
  - 代碼：import * as obj from "./cal.js"
  - 獲取的obj為一個對象嘀略，對象中默認導出的數據作為default屬性名的屬性值恤溶，其余的聲明式導出的數據作為屬性呈現乓诽；
  - obj的形式：
```
 {
    default: "我是默認導出的結果"
    obj1: "我是聲明式導出1"
    obj2: "我是聲明式導出1"
    obj3: "我是聲明式導出1"
    obj4: "我是聲明式導出1"
 }
```
- 注：import和export只能放在頂級作用域，不能放在函數內部咒程；
es6中的代碼變化
- 對象字面量：若對象中屬性名與屬性值為同一個名字鸠天，可以只寫一個；
  - 變量聲明：var name="guo"帐姻；
  - 定義對象：var obj={name:name}稠集，此時可以簡寫為var obj={name};
- 函數聲明的變化
  - 與es5的不同是，去掉了:function
```
 var obj={
     //es5書寫形式
     add:function(n1,n2){
       return n1+n2;
     }
     //es6簡寫形式
     add(n1,n2){
       return n1+n2;
     }
  }
```
- 解構賦值：將對象中的屬性名解構出來卖宠，直接使用巍杈；
  - 代碼:
```
 var objn={
     name1:"xiehe",
     age:3,
     showName(){
         console.log("this指向為:"+this)
     }
 };
 var {name1,age,showName}=objn;
```
- 箭頭函數：
  - 代碼：var add=()=>{};
  - 簡寫：
    - 條件：1）當參數是一個的時候，可以省略小括號扛伍；2）當返回值為一行代碼事件筷畦，可以省略return和大括號；
    - 代碼：var add=(c)=>{ return c(d) }刺洒；簡寫：var add= c => c(d)

Vue基礎知識

.vue文件的基本格式
- <template></template>：模板鳖宾，里面設置標簽節(jié)點，注意逆航，最外圍必須為一個標簽鼎文；
- <script></script>：設置此vue組件的配置，通過export default {配置}因俐；設置data,method的屬性等拇惋；
- <style scoped></style>：設置組件的樣式，若設置scoped代表只是該組件的樣式抹剩；不設置則為全局樣式撑帖；
.vue文件使用
- 依賴webpack對vue文件進行打包處理，將vue文件轉化為js文件插入到html模板中顯示澳眷；
- webpack不能對vue文件結構進行處理胡嘿，必須依賴插件將vue文件格式轉化為基本的dom結構；
- 依賴的插件
  - vue：下載模塊钳踊，引入該模塊衷敌，相當于通過script引入vue.js文件，通過實例調用進行使用
  - vue-loader：是一個webpack的loader拓瞪，可以將vue文件轉化為JS模塊缴罗；
  - vue-template-compiler：是對vue模板的編譯插件，不用引入模塊祭埂，但必須下載面氓；
- webpack.config.js配置
  - 引入vue-loader
    - 若下載的版本為14.x，則無需引入，無需配置侧但；
    - 若下載的版本為15.x矢空，則必須引入模塊，并設置rules和plugins禀横；
```
 //引入模塊屁药，注意必須用{}括起來；
 const { VueloaderPlugin } =require("vue-loader");
 //配置
 module.exports={
    //設置vue文件轉化規(guī)則
    module:{
      rules:[
         {
            test:/\.vue$/,
            use:"vue-loader"
         }
      ]
    }
    //設置插件
    plugins: [
      new VueloaderPlugin()
    ]
 }
```
- .vue文件為一個組件柏锄，將組件渲染到掛載點中顯示
  - 引入vue模塊酿箭，用于實例創(chuàng)建
  - 引入.vue文件：import App from "./app.vue"
  - 實例創(chuàng)建設置參數render，渲染組件
    - render值為匿名函數趾娃，函數中設置一個任意形參缭嫡，然后返回此形參函數，函數參數為該組件
```
 //引入Vue模塊
 import Vue from "vue";
 //引入自定義Vue文件
 import App from "./app.vue";
 //Vue實例創(chuàng)建
 new Vue({
     el:"#app",//掛載點
     render:function (createElement) {
         //返回函數值抬闷，形參可以是任何值
         return createElement(App)
     }
 });
```
Vue介紹
- 核心概念：
  - 組件化
  - 雙向數據流：基于ES5中的defineProperty來實現的妇蛀，IE9及以上瀏覽器才支持
    - 1）js內存屬性發(fā)生變化，影響頁面的變化笤成；
    - 2）頁面的改變评架，影響js內存屬性的改變；
- 結構
  - 開發(fā)一個登陸的模塊炕泳，登陸需要顯示的頭部纵诞、底部、中部培遵；
  - 組件：組合起來的一個部件
  - 細分代碼：
    - 頭部：頁面浙芙、樣式、動態(tài)效果
    - 代碼：template籽腕、style嗡呼、script
- 數據流
  - 常用指令
    - v-text="xxx"：是元素的innerText，純文本內容节仿；
    - v-html="xxx"：是元素的innerHTML晤锥，可帶格式的內容掉蔬；
    - v-if="xxx"：賦值為布爾值廊宪，決定標簽的存在與否；
    - v-show="xxx"：賦值為布爾值女轿，決定標簽的顯示和隱藏箭启，標簽始終存在；
    - v-for="(val,index) in ary"：賦值為數組蛉迹，指的是遍歷數組傅寡，即遍歷標簽；
    - v-bind:property="xxx"：綁定元素的屬性；注：在webstorm中省略為:property="xxx"荐操；單向數據綁定（內存js改變影響頁面）1
    - v-model：數據的雙向綁定芜抒；

class結合v-bind使用

class綁定格式：v-bind:class="表達式",最終表達式運算結束的結果賦值給該屬性名；
- 簡化：:class="表達式"托启；

class：表達式結果的分類

一個樣式：返回字符串
- 整體思想：通過判斷一個變量值的改變來賦值不同的類名宅倒；通過三目表達式來賦值，表達式返回的結果為一個字符串屯耸；
- 1）單個字符串或三元表達式：
  - 單個字符串：:class="'redcol'"拐迁，其中redcal為類名；
  - 三元表達式：:class="isRed疗绣？'redcol':'bluecol'线召，其中isRed為data屬性中設置的變量，而redcol和bluecol為類名多矮；
- 2）key和樣式清單對象：就是通過驗證變量中的樣式缓淹，返回對應的字符串類名，如：v-for="stu in stus" :class="{'A':'redcol','B':'bluecol'}[stu.score]"塔逃，其中[stu.score]代表的為A或B割卖。
多個樣式：返回對象
- 數組：
  - 1）數組中元素為變量，變量值為類名字符串患雏；
  - 代碼：其中bgc,col為變量鹏溯，bg1,redcol為類名；
```
  //template
  <h1 :class="[bgc,col]">這是動態(tài)綁定的測試文本</h1>
  //js
  data:{
      bgc:"bg1",
      col:"redcol"
  }
```
  - 2）數組中元素為對象淹仑，對象中key為類名丙挽，value為布爾值，可以直接設置布爾值匀借，也可以設置變量颜阐，變量值為布爾值；如：:class=[{bluecol:true},{bigFont:true},{bgcRed:isReds}]吓肋，其中bluecol為類名凳怨，isReds為變量；
- 對象：
  - 格式：:class={樣式類名：boolean,樣式類名2：變量}是鬼，其中樣式類名可不加雙引號肤舞，變量在data()中定義，變量值為布爾值均蜜；
  - 代碼：其中bg1,col為類名李剖；isCol為變量；
```
 <h1 :class="{bg1:true,col:isCol}">這是動態(tài)綁定的測試文本</h1>
  //js
  data:{
      isCol: false
  }
```
驗證代碼：

 <template>
     <div>
         <h1>驗證v-bind綁定class屬性</h1>
         <!--1.綁定一個類名-->
         <!--class屬性設置-->
         <div class="bigFont">我們的世界</div>
         <!--v-bind綁定一個類名-->
         <div :class="'redcol'">美好的明天aa</div>
         <div :class="isRed?'redcol':'bluecol'">我們的愛太無奈</div>
         <!--2.綁定多個類名-->
         <!--class屬性設置-->
         <div class="redcol bigFont">我是class屬性設置綁定兩個類名</div>
         <!--v-bind綁定多個類名-->
         <div :class=[{bluecol:true},{bigFont:true},{bgcRed:isReds}]>我是v-bind綁定多個類名</div>
         <div :class={bluecol:true,bigFont:true,bgcRed:isReds}>我是v-bind綁定多個類名</div>
         <!--3.驗證列表-->
         <ul>
             <!--整體思想：返回字符串-->
             <li v-for="stu in stus" :class="{'A':'redcol','B':'bluecol'}[stu.score]">我是name為{{stu.name}}的一列</li>
         </ul>
 
     </div>
 </template>
 <script>
     export default {
         data(){
             return {
                 isRed: false,
                 isReds: true,
                 stus:[{name:"jack",score:"A"},{name:"rose",score:"B"}]
             }
         }
     }
 </script>
 <style scoped>
     .redcol{
         color: red;
     }
     .bluecol{
         color: blue;
     }
     .bigFont{
         font-size: 30px;
     }
     .bgcRed{
         width: 300px;
         height: 100px;
         background-color: lightcoral;
     }
 </style>

style結合v-bind使用：綁定行間樣式
- 1）賦值為對象：v-bind:style="{}",其中{} 為：{color: bluecol, fontSize: size+'px'},其中bluecol和size為變量偶芍；變量值為字符串德玫；
- 代碼：
```
 //template
 <h1 v-bind:style="{color: bluecol, fontSize: size+'px'}">綁定行間樣式</h1>
 //js
 data: {
     bluecol: "blue",
     size: "30"
 }
```
- 2）賦值為變量名：v-bind:style="objdata"匪蟀，其中objdata為變量；注：color賦值為字符串類型萄窜；
- 代碼：
```
 //template
 <h1 v-bind:style="objdata">綁定行間樣式</h1>
 //js
 data: {
     objdata: {
         color: "blue",
         fontSize: "30px"
     }
 }
```
methods和v-on的使用
- 綁定事件的方法
  - 代碼：v-on:事件名="表達式 || 函數名"
    - 簡寫：@事件名="表達式 || 函數名"
  - 表達式：@click="isRed==!isRed"其中isRed為data中設置的變量撒桨；
  - 函數名：@click="changeCol()"其中changeCol為methods中設置的函數名查刻；
    - 注：若函數名不需要傳參，則可以省略()凤类，即：@click="changeCol"
- methods屬性，屬性值為一個對象
  - 對象：key是函數名佃延，值是函數體履肃；
- data屬性：屬性值為一個函數體坐桩，函數體內返回值為一個對象；
- 凡是在template中調用的變量或函數膘螟，不需要加this;
- 在script中調用變量碾局，必須加this净当；
v-for的使用
- 遍歷數組：v-for="(item,index) in stuAry"其中stuAry為data中設置的變量，變量值為數組俘闯；遍歷后獲得的item為數組元素埋合，index為對應元素的索引甚颂；
- 遍歷對象：v-for="(val,key,index) in objs其中objs為data中設置的變量，變量值為對象蹭睡；遍歷后獲得的val為對象中的屬性值赶么，key為對象中的屬性名辫呻，index為屬性名對應的索引值；
- v-for使用時祟昭，配合ul,li使用怖侦，需注意的是匾寝，在每個遍歷出的li中都要設置key屬性，通過v-bind綁定急凰，key值唯一香府，不能相同码倦；
- key：類似trank by的一個屬性；
  - 作用：告訴vue.js中的元素勿璃，與頁面之間的關聯补疑，當識別刪除元素的時候歹撒，是單個元素的刪除而不是整版替換暖夭，所以需要關聯其關系撵孤；必須設置邪码；
  - 注：2.2.0+的版本中咬清，當組件中使用v-for時，必須設置key屬性影钉；

小實例：列表的添加和刪除

vue文件代碼：

 <template>
     <div>
         <h1>英雄的武力值</h1>
         <ul>
             <li v-for="(item,index) in heros" :key="index" :class="{'A':'redcol','B':'bluecol','C':'greencol','D':'pinkcol'}[item.wu]">
                 {{item.name}},{{item.wu}}
                 <input type="button" style="margin-left: 200px;" @click="delBtn(index)" value="刪除">
             </li>
         </ul>
         <h4>添加英雄</h4>
         <form>
             <label for="user">英雄：</label>
             <input type="text" id="user" name="user" v-model="heroname"/>
             <br>
             <label for="wuli">武力等級：</label>
             <input type="text" id="wuli" name="wulizhi" v-model="herowu"/>
             <br>
             <input type="button" style="background-color: deepskyblue;" @click="addBtn" value="添加">
         </form>
     </div>
 </template>
 <script>
     export default {
         data(){
             return {
                 heroname:"",
                 herowu:"",
                 heros:[
                     {
                         id:1,
                         name:"喬峰",
                         wu:"A"
                     },
                     {
                         id:2,
                         name:"段譽",
                         wu:"B"
                     },
                     {
                         id:3,
                         name:"虛竹",
                         wu:"C"
                     },
                     {
                         id:4,
                         name:"郭靖",
                         wu:"D"
                     }
                 ]
             }
         },
         methods:{
             addBtn(){
                 this.heros.push({
                     id:this.heros.length+1,
                     name:this.heroname,
                     wu:this.herowu
                 });
                 this.heroname="";
                 this.herowu=""
             },
             delBtn(index){
                 this.heros.splice(index,1);
             }
         }
     }
 </script>
 <style scoped>
     ul> li{
         width: 500px;
         height: 30px;
     }
     .redcol{
         background-color: red;
     }
     .bluecol{
         background-color: skyblue;
     }
     .greencol{
         background-color: yellowgreen;
     }
     .pinkcol{
         background-color: hotpink;
     }
 </style>

父組件和子組件的使用

父組件：使用其他組件的組件，為父組件肆汹；
子組件：被使用的組件昂勉，為子組件扫腺；
父組件引用子組件
- 引入子組件對象；代碼：import headerVue from "./xxx.vue"
- 父組件聲明子組件：在export default {}中設置components屬性攒至，聲明子組件迫吐，聲明結構為"子組件標簽名"：子組件對象账忘；
- 引用子組件：在template中使用子組件標簽名鳖擒；
代碼：

 <template>
     <div>
         <h1>父組件和子組件</h1>
         <!--引入子組件-->
         <header-vue></header-vue>
         <body-vue></body-vue>
         <footer-vue></footer-vue>
     </div>
 </template>
 <script>
     //引入子組件對象
     import headerVue from "./components/header.vue";
     import bodyVue from "./components/body.vue";
     import footerVue from "./components/footer.vue";
 
     export default {
         //聲明子組件
         components:{
             "header-vue":headerVue,
             "body-vue":bodyVue,
             "footer-vue":footerVue
         }
     }
 </script>
 <style>
 </style>

全局組件創(chuàng)建和調用
- 創(chuàng)建位置：在引入Vue模塊的位置蒋荚，一般在main.js中設置；
- 方法：調用Vue類的靜態(tài)方法component
- 代碼：Vue.component("組件名",組件對象)
- 調用：可以在任何組件中調用惊奇；
- 代碼：main.js中創(chuàng)建全局組件
```
 import Vue from "vue";
 import App from "./app.vue";
 
 //引入全局組件對象
 import globalVue from "./components/global.vue";
 //創(chuàng)建全局組件
 Vue.component("global-vue",globalVue);
   
 new Vue({
     el: "#app",
     render(createEle){
         return createEle(App);
     }
 });
```

父組件與子組件之間的數據傳遞

父組件給子組件傳遞數據

父組件：給子組件標簽設置自定義屬性
- 屬性值為常量：直接設置赊时；
- 屬性值為變量：通過v-bind綁定行拢；
子組件：聲明傳遞過來的屬性名
- 聲明：在子組件對象中設置根屬性props舟奠，屬性值為數組，數組中元素為父組件設置的自定義屬性名抬纸，要一一對應耿戚；
- 調用：
  - 子組件template中調用膜蛔，直接用{{xxx}}皂股；
  - script中js調用，使用this.xxx;

驗證代碼：

父組件代碼：

 <template>
     <div>
         <h1>驗證父組件給子組件傳遞數據</h1>
         <!--設置常量值和變量值-->
         <!--屬性值為常量就斤，直接設置蘑辑；為變量洋魂，用v-bind設置-->
         <header-vue constdata="漂亮的美人" :changedata="bigdata"></header-vue>
     </div>
 </template>
 
 <script>
     //引入子組件對象
     import headerVue from "./components/header.vue";
 
     export default {
         //聲明子組件
         components: {
             "header-vue":headerVue,
         },
         //設置變量
         data(){
             return {
                 bigdata:"美好的世界",
             }
         }
     }
 </script>
 
 <style scoped>
 
 </style>

子組件代碼：

 <template>
     <div>
         <p>我是父組件傳遞過來的常量數據：{{constdata}}</p>
         <p @click="alertData">我是父組件傳遞過來的變量數據：{{changedata}}</p>
 
     </div>
 </template>
 <script>
     export default {
         //聲明父組件傳遞過來的數據
         props:["constdata","changedata"],
         methods:{
             alertData(){
                 //js中調用傳遞來的數據忧设，用this.xxx
                 alert(this.changedata);
             }
         }
     }
 </script>
 <style scoped>
     p{
         width: 500px;
         height: 200px;
         background-color: red;
     }
 </style>

子組件向父組件傳遞參數數據(通信vuebus)

思想：調用Vue類原型上的方法$on,$emit
調用原型上的方法：封裝一個js文件址晕，返回vue實例對象；哪里使用引入到哪里
父組件：
- 綁定click事件启搂，事件函數中，通過調用vue實例對象原型上方法$on牢撼，綁定一個監(jiān)聽事件熏版，接收子組件發(fā)送的參數捍掺；
子組件：
- 綁定click事件挺勿，事件函數中，通過調用vue實例對象原型上的方法$emit禾嫉，綁定同一個監(jiān)聽事件蚊丐，發(fā)送子組件傳遞給父組件的參數吠撮；

代碼：

父組件代碼：

 <template>
     <div>
         <!--調用子組件-->
         <sub-vue></sub-vue>
         <button @click="parLis">父組件監(jiān)聽某個事件的運行</button>
     </div>
 </template>
 
 <script>
     //引入vue實例對象
     import con from "./connect.js";
     //引入子組件
     import subVue from "./components/header.vue";
     export default {
         name: "app",
         //聲明子組件
         components: {
             "sub-vue": subVue,
         },
         methods: {
             parLis(){
                 //通過實例調用原型上的方法$on
                 //當事件觸發(fā)后泥兰，父組件就監(jiān)聽toPhone事件，當自己發(fā)射時膀捷，就會觸發(fā)全庸；
                 con.$on("toPhone",function (sonarg) {
                     console.log(sonarg)
                 })
             }
         }
     }
 </script>
 
 <style scoped>
 
 </style>

子組件代碼：

 <template>
     <div>
         <p>我是子級組件</p>
         <button @click="sonLis">子組件發(fā)射事件</button>
     </div>
 </template>
 <script>
     //引入connect.js文件
     import con from "../connect.js";
 
     export default {
         methods:{
             sonLis(){
                 //調用vue實例原型上的$emit方法
                 con.$emit("toPhone","子組件傳遞給父組件的參數信息");
             }
         }
     }
 </script>
 <style scoped>
     p{
         width: 500px;
         height: 200px;
         background-color: red;
     }
 </style>

父子組件傳遞數據圖解：

父子組件

Vue文檔
- VueAPI地址：API-Vue.js
- Vue功能圖解：
  
  VueAPI圖解