vue.js

誰在影響著頁面薇搁？model中的data

Vue.js 官網(wǎng)

api學習步驟

1. 引文件
2. 寫結(jié)構(gòu)
3. 初始化js

簡介

是一套用于構(gòu)建用戶界面的漸進式框架脚曾。與其它大型框架不同的是管宵，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層幽勒，不僅易于上手洞翩，還便于與第三方庫或既有項目整合。另一方面沮翔，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時陨帆，Vue 也完全能夠為復(fù)雜的單頁應(yīng)用提供驅(qū)動。 (數(shù)據(jù)驅(qū)動編程)

MVVM

• m 數(shù)據(jù)模型
• v 視圖模型
• vm 一個同步

聲明式渲染

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進 DOM 的系統(tǒng)：

<div id="app">
  {{ message }}
</div>
|||||||||||||||||||||||||||||||
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

差值表達式--渲染文本（推薦使用）

位于標簽的innerHTML的位置

• 表達式
• 三元表達式

指令（以v-開頭）

位于標簽屬性位置,同樣可以使用表達式

v-text--渲染文本

不能渲染帶標簽的文本

v-html--(謹慎使用)

可以解析標簽采蚀，比較危險疲牵，永不用在用戶提交的內(nèi)容上

v-bind--(給屬性賦值)

可以用來動態(tài)綁定屬性 使用方式：v-bind:屬性名="data中的屬性" 簡寫方式：:屬性名="data中的屬性" 可以綁定任何屬性，此綁定在往后的組件開發(fā)中經(jīng)常使用 可以動態(tài)綁定樣式：:class="{'類名':布爾值}" true：有類名榆鼠，false：沒有類名纲爸；也可以 :class="{'類名':布爾值, '類名': 變量名}" ，可以通過更改變量的值妆够，來動態(tài)操作類名

v-for--（for循環(huán)--渲染數(shù)組和對象）

1. 渲染數(shù)組

1. v-for="item in arr", item是數(shù)組中的每一項的意思识啦，可以隨意负蚊，arr表示需要便利的數(shù)組
2. v-for="(item,index)in arr" index表示數(shù)組項的索引

2. 渲染對象

1. v-for="value in obj", value是對象鍵的值，可以隨意颓哮，obj表示需要便利的對象
2. v-for="(value,key,index)in obj" index表示數(shù)組項的索引

3. 迭代數(shù)字

v-for="item in 數(shù)字"

4. 改變數(shù)組

Vue.set() Array.prototype.aplice()或者Array.aplice()

5. :key

只要寫了 v-for 就必須寫上 :key --唯一標識家妆，提高性能

v-model--(用來雙向數(shù)據(jù)綁定)

只能在input/tettxtarea/select

v-on--(事件監(jiān)聽)

在methods屬性中定義函數(shù)，要獲取data中的屬性冕茅，需要加上this.伤极，this表示vue實例

1. v-on: 任意的事件類型="執(zhí)行的函數(shù)"
2. 簡寫形式：@任意的事件類型="執(zhí)行的函數(shù)"
3. 通過執(zhí)行函數(shù)添加參數(shù)
4. 通過執(zhí)行函數(shù)中添加$event參數(shù)傳遞事件對象--名字不能更改，不能加引號
5. 事件修飾符姨伤，可以給事件添加特殊功能：.prevent(阻止默認跳轉(zhuǎn))哨坪，.stop(阻止冒泡)
6. 可以給和按鍵相關(guān)的事件添加按鍵修飾符，常有的 keyup.enter,keyup.鍵盤碼

v-if 和 v-show

控制元素的顯示可隱藏乍楚，v-if="布爾值"齿税，v-show="布爾值"，true則顯示炊豪，false則隱藏 區(qū)別：v-if通過控制dom來控制元素顯示和隱藏凌箕；v-show通過控制display:none來控制元素顯示和隱藏； 使用場景：

1. 涉及到大量dom操作的時候词渤，我們需要使用v-show; 多次顯示和隱藏 使用v-show
2. 涉及到異步數(shù)據(jù)渲染的時候牵舱，需要使用v-if； 單次顯示和隱藏 使用v-if

v-if,v-else-if,v-else 條件判斷

      <p v-if="type ==='A'">A</p>
      <p v-else-if="type ==='B'">B</p>
      <p v-else-if="type ==='C'">C</p>
      <p v-else>not:A/B/C</p>
      ---
      var vm = new Vue({
        el: '#app',
        data: {
          isvisibilty: true,
          type: 'B'
        }
      })

v-cloak -- （解決元素閃爍的問題）

1. 給閃爍的元素加上v-cloak指令
2. 寫樣式：[v-cloak]{display:none},當vue實例結(jié)束編譯之后（當vue文件加載完成后）缺虐，v-clock會被刪除
3. 另外芜壁，可以使用v-text添加內(nèi)容，此時高氮，vue文件沒有加載時慧妄，元素不會得到內(nèi)容，就不存在閃爍問題

this指向

在vue中剪芍，this指向創(chuàng)建的實例對象

mounted--鉤子函數(shù)

表示頁面一加載就執(zhí)行函數(shù)里的內(nèi)容 注意：函數(shù)的名字不能隨意取塞淹，而且，不能寫在methods中

自動獲取焦點

• 1. ref="名字"--表示對dom的引用
• 2. 通過this.$refs.名字獲取dom操作元素
• 3. focus()自動獲取焦點

自定義指令

• 形式一

1. 通過全局方法Vue.directive()創(chuàng)建罪裹，包含兩個參數(shù)饱普，1.表示自定義指令的名字（全部小寫）；2.是一個對象状共，表示自定義指令的配置項
2. 配置項中是一些鉤子函數(shù)
   • inserted鉤子函數(shù)套耕，表示自定義指令插入到標簽中的時候就執(zhí)行
   • 參數(shù)(el,binding)：1.el:使用自定義指令的元素，2.binding表示自定義指令的信息
3. 使用：dom中加入v-myfocus

Vue.directive('myfocus',{
    inserted(el,binding){
        el.focus();
    }
})

• 形式二

Vue.filter()--創(chuàng)建過濾器

參數(shù)：過濾器名稱峡继，函數(shù)

{{item.timer | fmtTime('/')}}

Vue.filter('fmtTime'.function(time,seprator){
    var y = time.getFullYear();
    var m = time.getMonth()+1;
    var d = time.detDate();
    return y+seprator+m+seprator+d;
})

computed--計算屬性

根據(jù)data中已有的實行冯袍，計算得到一個新屬性 創(chuàng)建計算屬性，通過computed關(guān)鍵字碾牌，它是一個對象 這里的fullName就是一個計算屬性康愤，是一個函數(shù)儡循，但可以當做屬性來使用 好處：

• 有緩存的特性，多次使用翘瓮，只會計算一次贮折，提升性能

{{fullName}}

computed:{
    fullName(){
        return this.firstName+this.lastName;
    }
}

watch--監(jiān)聽器

用來監(jiān)聽data中的數(shù)據(jù)的值，當數(shù)據(jù)發(fā)生改變资盅，就執(zhí)行相應(yīng)的函數(shù)调榄，通過watch創(chuàng)建監(jiān)聽器，它是一個對象呵扛，函數(shù)名是監(jiān)聽的對象每庆，執(zhí)行的函數(shù)有兩個參數(shù)(newVal,oldVal) 開發(fā)時，能用computed就不用watch computed 有緩存的功能今穿，需要計算的時候缤灵，使用computed watch會一直監(jiān)聽，需要執(zhí)行異步操作時使用watch

watch:{
    firstName(newVal,oldVal){
        this.watchName = newVal + this.lastName;
    },
    lastName(newVal.oldVal){
        this.watchNamw = this.firstName + newVal;
    }
}

深度監(jiān)聽--監(jiān)聽對象

1. handeler:(newVal,oldVal){}--監(jiān)聽處理函數(shù)蓝晒，名字固定
2. deep:true--深度監(jiān)聽

watch:{
    user:{
        handler(newVal,oldVal){
            console.log(newVal.name)
        },
        deep:true
    }
}

搜索功能實現(xiàn)

數(shù)組的過濾

filter--有循環(huán)遍歷的功能

過濾條件：判斷是否包含字符串

indexof

return this.list.filter(value=>value.name.indexOf(this.searchVal) !== -1)

axios--get

axios--post

過渡和動畫

1. 使用 transition 標簽包裹

animate.css 動畫庫--第三方css動畫庫

1. 引入css文件
2. 使用transition標簽包裹
3. 添加屬性名="animated 添加類名"
   • enter-active-class="animated fadeInRight" 定義進入的動畫狀態(tài)
   • leave-active-class="animated fadeOutRight" 定義離開的動畫狀態(tài)

JavaScript 鉤子

刪除動畫

Vue組件

1. 什么是組件

2. 組件開發(fā)好處

   • 封裝功能性代碼腮出，提升開發(fā)效率

組件的創(chuàng)建

注意：

1. 模板template中只能有一個根節(jié)點
2. 組件的名字，如果使用駝峰命名的話芝薇，在使用的時候需要嘉盛"-",比如組件的名字叫indexA胚嘲，在使用時就叫index-A

創(chuàng)建方式一

使用Vue.extend()和Vue.component()兩個方法

• Vue.extend()函數(shù) 會返回一個組建的構(gòu)造器，它里面包含一個參數(shù)template洛二，他是一個對象馋劈，里面是一些配置項,指定組件顯示的模板
• Vue.component()函數(shù)會利用Vue.extend()函數(shù)返回的構(gòu)造器創(chuàng)建一個組件的實例，它有兩個參數(shù)晾嘶，一個是組件的名字妓雾，另外一個組件的構(gòu)造器

組件使用步驟

1. 定義組件（顯示的內(nèi)容）

var Index = Vue.extend({
//指定組件顯示的模板
    template: "<div>我是首頁</div>"
});

2. 注冊組件

Vue.component('index',Index);

3. 使用組件，就像使用HTML標簽一樣

<index></index>   

創(chuàng)建方式二

Vue.component()這個方法本質(zhì)上還是要調(diào)用Vue.extend()方法

Vue.component('indexB',{
    template: "<div>我是首頁</div>"
});

---
<index-b></index-b>  

創(chuàng)建方式三

通過指定模板創(chuàng)建垒迂，定義的模板需要在Vue管轄范圍之外

//模板一（推薦使用）
<template id="itcast">
    <div>我是首頁</div>
</template>
//推薦二（js標簽）
<script type="x-template" id="iecast">
    <div>我是首頁</div>
</script>
---
Vue.component('indexC',{
    template: "#itcast"
});

---
<index-c></index-c>  

組件中使用指令和事件

父子組件的創(chuàng)建

//創(chuàng)建father組件
Vue.component('father',{
    template:'<div>我是父組件<son></son></div>';
    //通過components屬性創(chuàng)建子組件
    components:{
    創(chuàng)建一個son組件
        son:{
            template:'我是子組件'
        }
    }
})

---使用---

<father></father>

父子組件和子組件間的傳值

1. 父子組件傳值給子組件

父組件向子組件傳值需要考慮兩個問題： 父組件怎么傳值：屬性動態(tài)綁定(v-bind) 子組件怎么接收：props：能夠獲得當前組件身上屬性對應(yīng)的值

//創(chuàng)建father組件
Vue.component('father',{
    //通過v-bind給指令械姻，給子組件中的props賦值
    template:'<div>我是父組件,我兒子叫{{sonName}},今年{{age}}<son :myName="sonName"></son></div>',
    data(){
        return{
            sonName:'小明',
            age:20
        }
    }
    //通過components屬性創(chuàng)建子組件
    components:{
    創(chuàng)建一個son組件
        son:{
           //1\. 聲明props，它的作用是娇斑，用來接收父組件傳過來的值策添，props可以跟一個數(shù)組，數(shù)組里的值是一個一個的字符串毫缆，可以當做屬性使用
           props:['myName'],
           template:'我是子組件,我叫{{myName}}'
        }
    }
})

2. 子組件給父組件傳值

1. 子組件傳值給父組件，需要用到$emit()方法乐导，這個方法可以傳遞兩個參數(shù)苦丁，一個是事件名，另外一個是需要傳遞的值-----（觸發(fā)一個事件tellFatherMyName物臂，并且傳遞一個值）
2. 父組件接收參數(shù)：注冊一個事件getMySonName旺拉，接收參數(shù)data

//創(chuàng)建father組件
Vue.component('father',{
    template:'<div>我是父組件,我兒子的名字是{{sonName}}
        <son @tellFatherMyName="getMySonName"></son>
    </div>';
    data(){
        return{
            sonName:''
        }
    },
    methods:{
        getMySonName(data){
            this.sonName=data
        }
    }
    //通過components屬性創(chuàng)建子組件
    components:{
    創(chuàng)建一個son組件
        son:{
            template:'我是子組件,我的名字{{myName}},<button @click="emitMyName">發(fā)送數(shù)據(jù)</button>',
            data(){
                return{
                    myName:'小明'
                }
            },
            methods:{
                emitMyName(){
                    this.$emit('tellFatherMyName',this.myName)
                }
            }
        }
    }
})

3. 兄弟組件傳值

創(chuàng)建動態(tài)組件

利用component標簽創(chuàng)建動態(tài)組件产上，他的is屬性指向誰，就顯示哪個組件

<ul>
<li @click="currentCom='index'">首頁</li>
<li @click="currentCom='productType'">蔬菜</li>
<li @click="currentCom='productType'">水果</li>
</ul>
<component :is="currentCom"></component>

//組件
Vue.component('index',{
    template:"<div>首頁</div>"
})
Vue.component('productType',{
    template:"<div>這里顯示商品編號</div>"
})

vue實例（組件）生命周期

在實例被創(chuàng)建之后立即被調(diào)用,在這一步蛾狗，實例已完成以下的配置：數(shù)據(jù)觀測（data observer）晋涣，屬性和方法的運算，watch/event時間回調(diào)沉桌。然而谢鹊，掛載階段還沒開始，dom還未開始留凭，$el屬性目前不可見佃扼。

created:function(){
    console.log(this.$el);
    console.log(this/$data);
    console.log(this.info);
}
模板編譯之后調(diào)用，
mounted:function(){
    console.log(this.$el);
    console.log(this/$data);
    console.log(this.info);
}

Vue-router 路由

路由初體驗

1. 引入路由文件

vue-router.js

2. 準備路由需要的組件

    Vue.component('index', {
      template: "<div>首頁</div>"
    })
    Vue.component('productType', {
      template: "<div>這里顯示商品編號</div>"
    })

3. 創(chuàng)建路由對象,在這個對象里配置路由規(guī)則

var routers = new Router()

4. 通過routes屬性配置路由規(guī)則蔼夜，它是一個數(shù)組兼耀，里面放的是對象，每個對象對應(yīng)一條規(guī)則求冷。并且每個對象都包含(name,path,component)--(路由規(guī)則的名稱瘤运，路徑，路徑對應(yīng)的組件)

   routes:[
        {name:'index',path:'/index',component:index},
        {name:'productType',path:'/product_type',component:productType}
   ]

5. 在vue實例中注冊路由匠题，這樣整個應(yīng)用程序中都會擁有路由

var vm = new Vue({
      el: '#app',
      router: routers,
      data: {

      }
    })

6. 通過router-view挖坑拯坟，路徑匹配到的組件都會渲染到這個坑里

<router-view></router-view>

7. vue路由中通過router-link(這是一個標簽)去做跳轉(zhuǎn)，他的to屬性梧躺，這個值必須和path中的路徑對應(yīng)
8. router-link似谁，將來會被渲染成a標簽，to屬性會被渲染成a標簽的href屬性掠哥，但它的值前面會加一個#巩踏，變?yōu)殄^點

<router-link to="/index">首頁</touter-link> <router-link to="/product_type">水果</router-link>

• 總結(jié)：步驟一共三步：1.問路，2.創(chuàng)建路由規(guī)則 3. 創(chuàng)建組件 4. 注冊路由 5.挖坑

路由參數(shù)

• 第一種方法

1. 路由加參數(shù)：:參數(shù)名--{name:'productType',path:'/product_type/:id',component:productType}
2. 在html中獲取路由參數(shù)续搀，通過$route.params.參數(shù)名

template: "<div>這里顯示商品編號{{$route.params.id}}</div>"

3. 在js中獲取路由參數(shù)塞琼，通過this.$route.params.參數(shù)名

template: "<div>這里顯示商品編號{{$route.params.id}}</div>",
mounted(){
    console.log(this.$route.params.id);
}

• 第二種方法(不影響路由path)

1. 直接在跳轉(zhuǎn)路徑后使用真正傳參的方式：/product_type?參數(shù)名=值

<router-link to="/product_type?id=22">水果</router-link>

2. HTML中獲取路由參數(shù)，通過$route.query.參數(shù)名

template:"<div>商品編號{{$route.query.id}}</div>"

3. js中獲取路由參數(shù)禁舷，通過this.$route.query.參數(shù)名

監(jiān)聽路由參數(shù)的變化-watch

'$route'表示監(jiān)聽對象彪杉，to表示將要去的路由對象，from表示你從呢個路由對象來

watch:{
    '$route'(to,from){
        console.log(to);
        console.log(from);
        if(to.perams.id === 22){
            console.log('胡蘿卜牵咙。派近。。')
        } else {
            console.log('蘋果')
        }
    }
}

嵌套路由和編程式導航

路由重定向

當不符合前邊的規(guī)則洁桌，此規(guī)格生效渴丸，path:表示輸入的所有路徑，redirect：表示，強制跳轉(zhuǎn)的路由地址

1. {name:'default',path:'*',redirect:'/index'}
2. {name:'default',path:'*',redirect:{name:'index'}

webpack

什么是webpack

webpack

webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler),分析你的項目結(jié)構(gòu)谱轨，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Sass戒幔，TypeScript等），并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用土童。

webpack起步

1. 安裝 cnpm i webpack#3.11.0 -g
2. 打包：webpack app.js index.js (改變代碼诗茎，都要重新打包)
3. 配置文件：webpack.config.js

var path = require('path')
module.exports={
  //配置入口文件
  entry:'./src/app.js',
  //配置輸出文件
  output:{
    //表示輸出文件的路徑(絕對路徑)
    path:path.join(__dirname,'dist'),
    //表示輸出文件的名字
    filename:'bundle.js'
  }
}

此時，命令中直接輸入webpack就可以献汗，自動創(chuàng)建一個文件夾dist敢订，這里邊放的是打包后的文件

3. webpack-dev-server(插件，解決以上問題)

• 1. cnpm init -y
• 2. cnpm i webpack-dev-server@2.9.7 webpack@3.11.0 -D
• 3. webpack.config.js中配置publicPath: '/dist',
• 4. index.html中修改 <script src="/dist/bundle.js"></script>
• 5. 運行：webpack-dev-server
• 6. 運行：webpack-dev-server --inline --hot --open --port 8090
• 7. 配置script："dev": "webpack-dev-server --inline --hot --open --port 8090"
• 8. npm run dev

單文件組件

• 全局組件的弊端：

1. 名字不能重復(fù)
2. template沒有語法高亮
3. 不支持css
4. 沒有構(gòu)建步驟

• 單文件組件

1. 擴展名：.vue 完整語法高亮; CommonJS 模塊; 組件作用域的 CSS 步驟：

// 1\. 安裝vue的包：  cnpm i vue -S
// 2\. 由于 在 webpack 中雀瓢，推薦使用 .vue 這個組件模板文件定義組件枢析，所以，需要安裝 能解析這種文件的 loader    cnpm i vue-loader vue-template-complier -D
// 3\. 在 app.js 中刃麸，導入 vue 模塊  import Vue from 'vue'
// 4\. 定義一個 .vue 結(jié)尾的組件醒叁，其中，組件有三部分組成： template script style
// 5\. 使用 import App from './components/App.vue' 導入這個組件
// 6\. 創(chuàng)建 vm 的實例 var vm = new Vue({ el: '#app', render:h => h(App) })
// 7\. 在頁面中創(chuàng)建一個 id 為 app 的 div 元素泊业，作為我們 vm 實例要控制的區(qū)域把沼；

vue.cil腳手架工具

• 準備工作：

1. 運行：cnpm i vue-cli -g
2. 新建一個文件夾（project）
3. 在此文件夾中打開終端，vue init webpack admin,出現(xiàn)? Project name (admin)表示成功吁伺，后一直按回車饮睬，。篮奄。出現(xiàn)? Use ESLint to lint your code? (Y/n)按n,繼續(xù)按回車捆愁，出現(xiàn)

? Should we run `npm install` for you after the project has been cre
ated? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

按上下鍵，選擇no窟却，完成昼丑。

4. 打開admin文件夾，打開終端夸赫，cnpm i, 完成后輸入npm run dev 出現(xiàn)I Your application is running here: http://localhost:8080,表示成功
5. 新建數(shù)據(jù)庫菩帝，數(shù)據(jù)庫名：itcast，編碼字符集utf-8
6. 導入sql文件D:\js高級資料\Vue\Vue_day06\代碼\shop2-server\db
7. config文件夾中default.json文件中更改用戶名密碼
8. D:\js高級資料\Vue\Vue_day06\代碼\shop2-server路徑下茬腿，打開終端呼奢，運行cnpm i
9. 運行node app,成功

element-ul框架

1. 下載 cnpm i element-ui -S
2. 完整引入----在 main.js 中寫入以下內(nèi)容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

以上代碼便完成了 Element 的引入。需要注意的是切平，樣式文件需要單獨引入握础。