計(jì)算屬性 監(jiān)聽

• methods 里面用來(lái)設(shè)置方法 在模板得表達(dá)式里使用這個(gè)方法 '{{}}'

雙向數(shù)據(jù)綁定

• v-modul

• v-on dom事件綁定類型 簡(jiǎn)寫為 @

組件開發(fā)

• 先寫組件 可以高效

• 1.創(chuàng)建組件
  let component =Vue.extend({
  <template></template>
  })
  2.注冊(cè)組件

  Vue.component('hehe',component)

3.使用組件
//使用組件 把組件名當(dāng)作標(biāo)簽名來(lái)用

• 全局組件 與局部組件

• 1. 全局組件 通過(guò)Vue.component 注冊(cè)的組件都是全局組件
  2. 局部組件 注冊(cè)在實(shí)例的內(nèi)部

  在new Vue ({

  components:{
    'hehe':component
    
  }
  

  })

  3. 組件的簡(jiǎn)寫
  • Vue.component('hehe',{
    template:'<組件模板名>
    })
  4. 組件模板
     <template>
     <div id="tp1">
     </div>

  </template>

  • template 只能有一個(gè)根元素

  • 組件里的date 是一個(gè)對(duì)象
    data(){
    return{
    name：'韓梅梅'
    }

    }

  5. 全局組件嵌套
  • 組件里套組件
    • 父組件嵌套子組件 把子組件的模板放在父組件里面

• 局部組件的嵌套

  • components:{
    'Fa':{
    template:"#fa",
    components:{
    'Son':{template:'#son'}
    }
    },

  }

- 然后在父組件里使用子組件就可以了

• 局部組件里有固定的關(guān)系

組件里的通信

+ 自定義屬性 <son hehe='123'  ></son>
props 可以通過(guò)用來(lái)傳遞參數(shù),可以傳遞多個(gè) props:['hehe','age']
  - 父組件可以通過(guò)將自己的數(shù)據(jù)通過(guò)props  自定義屬性傳遞子組件
  - props 的數(shù)據(jù)對(duì)于子組件來(lái)說(shuō)只能使用不能修改

生命周期

• beforeCreate 可以數(shù)據(jù)請(qǐng)求

• createted 可以數(shù)據(jù)請(qǐng)求 可以修改數(shù)據(jù)

• beforeMount 可以數(shù)據(jù)請(qǐng)求 可以修改數(shù)據(jù)

• mounted dom的初始化操作

• beforeUpdate 數(shù)據(jù)修改的時(shí)候觸發(fā) dom 是修改之前 注意修改數(shù)據(jù)死循環(huán)

  • updated 數(shù)據(jù)修改的時(shí)候觸發(fā) dom 是修改之后 注意修改數(shù)據(jù)死循環(huán)

• beforeDestory 組件銷毀卸載的時(shí)候觸發(fā) 能獲得dom 擦屁股 全局事件監(jiān)聽 全局計(jì)時(shí)器

• destoryed 組件銷毀卸載的時(shí)候觸發(fā) 沒(méi)有dom 擦屁股 全局事件監(jiān)聽 全局計(jì)時(shí)器

• 過(guò)濾器

• 全局過(guò)濾器 Vue.filter('name',處理函數(shù))

• 局部過(guò)濾器 組件里注冊(cè) template:'',
  components:'',
  filters:{
  "name" :()=>{

      }
  
    }
  

• 監(jiān)聽 watch 監(jiān)聽某一個(gè)數(shù)據(jù)的改變 dom數(shù)據(jù)是修改前的數(shù)據(jù)

• 是一個(gè)對(duì)象 watch：{

  監(jiān)聽的數(shù)據(jù)：（newvalue,oldvalue)=>{
    console.log('數(shù)據(jù)變了')
  }
  }
  

• 計(jì)算屬性

• computed 計(jì)算屬性 可以和data里的數(shù)據(jù)進(jìn)行關(guān)聯(lián) 得到一個(gè)新的數(shù)據(jù)

指令

• npm run serve 本地開發(fā)環(huán)境啟動(dòng)

• npm run build 編譯打包 （使用的是webpack 打包）打包后的路徑為絕對(duì)路徑

• main.js 為vue項(xiàng)目的入口組件

• App.vue 單文件組件

  • 組件的組成
    模板： <template>

    • <div>

      <div>

      </div>

  </template>
  <script>
  export default {
  data(){
  return {
  數(shù)據(jù)
  }
  },
  methods:{
  方法
  },
  }
  </script>
  <style>
  </style>

  • 使用import App from './App.vue' 來(lái)引入組件

• 組件嵌套

  • 想在哪里引入組件 就在那個(gè)組件里使用 類似 “import App from './App.vue'”引入組件

  • 然后在export defaul 里使用 components：{"組件名","給使用在頁(yè)面相當(dāng)于標(biāo)簽名的起名字"} 注冊(cè)組件

spa(單頁(yè)面應(yīng)用) mpa（多頁(yè)面應(yīng)用）

• vue就是使用的單頁(yè)面應(yīng)用
• seo 搜索引擎優(yōu)化
• 優(yōu)點(diǎn)：頁(yè)面切換流暢 組件的切換
  組件開發(fā) 組件復(fù)用可以提高開發(fā)效率
  缺點(diǎn)：首屏加載過(guò)慢
  seo優(yōu)化不好

tower

• 項(xiàng)目開發(fā)的成員增加及任務(wù)分配

項(xiàng)目開發(fā)

• 如何控制組件的切換

• 動(dòng)態(tài)組件
• 路由

• 動(dòng)態(tài)組件 控制組件的切換

  • 動(dòng)態(tài)組件 is屬性
    <component :is='"state"?"xixi":"hehe"'></component>
    可以使用所有的標(biāo)簽 不一定是component

• 路由 重點(diǎn)

• 1.在router里的index.js 引入

• 2.根據(jù)地址欄的改變來(lái)控制組件的切換

• 3.原理：監(jiān)聽地址欄的改變
  根據(jù)地址欄的變化匹配路由表渲染不同的的組件
  安裝路由模塊 npm install vue-router

  <router-link to="/home"></router-link> 控制地址欄的改變
  <router-link> 默認(rèn)渲染為a標(biāo)簽 通過(guò)tag 來(lái)改變樣式 例如 tag="li" 渲染為li
  <router-view></router-view> 是一個(gè)容器 來(lái)渲染組件

a. 配置路由表
1.引入vue import Vue from 'vue'
2.引入路由 import Router from 'vue-router'
3.在vue中使用路由 Vue.use(Router)
4.創(chuàng)建路由對(duì)象 let router=new Router({
routes:[
{
path:"/home", 12
component:Home
},
{
path:"/Singer",
component:Singer
}
]

})
5.拋出路由 export default router

b. 在實(shí)例中注冊(cè)路由

• 在main.js 中 引入組件 import router from "./router/index.js'
• 在 new Vue 中寫入 'router'

c. 在根組件里App.vue 中寫上 <router-link to="/home"></router-link>
<router-link to="/singer"></router-link>
實(shí)現(xiàn)地址欄改變

d. <router-view></router-view> 跳轉(zhuǎn)到不同的頁(yè)

重定向

• path:'/',
  redirect:'/home'

  默認(rèn)根路徑為 'home'

• 動(dòng)態(tài)路由匹配

• path:'/singer/:hehe',
• ':' 表示在singer后面還需要添加一個(gè)變量才能跳到歌手頁(yè) 隨便什么變量都可以
• 動(dòng)態(tài)路由匹配可以傳參 通過(guò)params 傳遞參數(shù)

• 路由模式 hash #
  history 打包后可能404 需要與后端配置完成

- active-class= 'sel' 給選中的當(dāng)前頁(yè)加類名

編程式導(dǎo)航 與 聲明式導(dǎo)航

• 用標(biāo)簽的叫聲明式導(dǎo)航 a標(biāo)簽 <router-link>也是
• 用js代碼寫的叫編程式導(dǎo)航 window.history.push=""

• 編程式導(dǎo)航

• <button @click='jump("/home")'>首頁(yè)</button>

• <button @click='jump("/singer")'>歌手</button>

  在methods：{
  jump(path){
  this.$router.push('/home')
  }

  }

  • 這段代碼就能實(shí)現(xiàn)編程式導(dǎo)航 點(diǎn)擊button實(shí)現(xiàn)組件的跳轉(zhuǎn)

  • 使用push 和replace的區(qū)別 頁(yè)面棧
    a=>b=>c=>d 使用push返回時(shí)會(huì)依次返回
    使用replace返回 直接返回到第一層

路由傳參

• this.router('/hehe')

• 命名路由 給 {
  name:'Singer'
  path:"/Singer",
  component:Singer

  }
  

  • 當(dāng)路由的名字很長(zhǎng)時(shí)，使用命名路由
    this.$router.push({name:'rank'})同樣可以跳轉(zhuǎn)到組件

• 三種路由傳參方式

• 路由傳參
• params this.$router.push({name:'rank',params:{us:123,ps:123}})
• query 傳參 this.$router.push({name:'rank',query:{us:123,ps:123}})
  • this.$router.push({path:'rank',query:{us:123,ps:123}})
  • path 與params 不能一起用

嵌套路由

• 在需要嵌套的的組件（父組件）里寫一個(gè) <router-view></router-view>
• 在根組件里引入嵌套組件
• 在需要嵌套的組件里寫一個(gè)children 注冊(cè)組件

- {
  path:'/my',
  component:my,
  children:[
    {
      path:'login',
    component:Login
    },
  ]

}
 - 次級(jí)組件里不能使用"/" "/"表示根組件
 - 可以有多個(gè)次級(jí)組件 一直嵌套

命名視圖

• <router-view></router-view>
• <router-view name='a'></router-view>
• <router-view name='b'></router-view>

- 注冊(cè)組件變?yōu)?components  
- components:{
    default:Rank, //默認(rèn)的組件
    a:Login, 
    b:Info

}  

- 作用：同一個(gè)路由里渲染不同的組件

路由守衛(wèi) 路由導(dǎo)航 路由攔截器

全局前置守衛(wèi)

• 所有的路由跳轉(zhuǎn)之前 都被全局前置守衛(wèi)處理
• router.beforeEach((to,from,next)=>{
  to 表示目標(biāo)路由
  from 表示現(xiàn)在路由
  next 表示是否繼續(xù)
  next('path') 直接跳轉(zhuǎn)某一路徑

})

• 用處 登錄狀態(tài)的檢測(cè)

全局后置守衛(wèi)

router.afterEach((to,from)=>{
console.log('全局后置')
console.log('from',from)
console.log('to',to)

})

局部守衛(wèi)

• 在組件的路徑里書寫 只對(duì)你寫的這個(gè)組件有用

• {
  path:'/my',
  component:My,
  beforeEnter(to,from,next){

   console.log('路由獨(dú)享守衛(wèi)  局部路由守衛(wèi)')
   next()
  

  }
  }

  • 只針對(duì)與某一個(gè)路由 當(dāng)某一個(gè)組件(個(gè)別組件需要登錄檢測(cè))需要使用時(shí) 可以使用局部路由守衛(wèi)

全局解析守衛(wèi)

• 使用場(chǎng)景和使用方式與全局前置類似 區(qū)別于在執(zhí)行的時(shí)機(jī)不一樣
• 區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用。

組件內(nèi)的守衛(wèi)

• beforRouteUpdate

• 組件內(nèi)的守衛(wèi)更新之前 動(dòng)態(tài)路由 參數(shù)發(fā)生修改 組件時(shí)復(fù)用的不會(huì)重新創(chuàng)建銷毀
• created 生命周期只有在創(chuàng)建的時(shí)候執(zhí)行一次 vue12.pm

• beforeRouteEnter 內(nèi)部沒(méi)有this
• beforeRouteUpdate 動(dòng)態(tài)路由的組件動(dòng)態(tài)路由改變的時(shí)候不用重新創(chuàng)建而是復(fù)用 獲取參數(shù)
• beforeRouteLeave 組件離開的時(shí)候執(zhí)行 復(fù)用組件 之前的切換 不算離開

插槽

• 插槽 slot

• 通常我們?cè)诮M件的標(biāo)簽里寫東西時(shí)顯示不出來(lái)的 要使它顯示出來(lái) 就需要在你想要顯示的地方引入slot slot里的內(nèi)容就相當(dāng)于你想要顯示的內(nèi)容
• 具名插槽
• 給每一個(gè)插槽取一個(gè)名字
  <p slot="top">在上面</p>

使用的話： <slot name="top"></slot>

vue動(dòng)畫

• 1.在官網(wǎng)下載animate.css
  2.在需要用動(dòng)畫的組件引入 @import '../base/animate.css';
  3.在需要做動(dòng)畫的地方加上一個(gè)<transition></transition>
  4.在transition 上添加 動(dòng)畫 enter-active-class="zoomIn animated"
  leave-active-class="rotateOut animated"

• animated 必須要 動(dòng)畫效果可以自己選擇

Vuex

• 提供全局狀態(tài)管理的模塊
  多組件共享狀態(tài)
  1.又多個(gè)組件用了同一變量
  2.變量發(fā)生改變后組件要發(fā)生變化

  例子：音樂(lè)播放器里的播放器 所有的歌曲都會(huì)觸發(fā)這個(gè)組件 并且每首歌播放 里面的數(shù)據(jù)就是當(dāng)前這首歌的全部數(shù)據(jù)

• state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；

• view，以聲明方式將 state 映射到視圖；

• actions，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。

• 有一個(gè)store文件 在main.js 里面進(jìn)行注冊(cè)

使用方式

• 1.創(chuàng)建配置

  • 引入vue
    引入vuex
    使用Vuex
    創(chuàng)建Vuex的store對(duì)象
    拋出

• 2.注冊(cè)store
  參考路由在main.js 的實(shí)例中注冊(cè)store 就會(huì)有$store 對(duì)象

• 3.使用全局狀態(tài)值
  this.$store.state.數(shù)據(jù)的key值

• 4.修改全局狀態(tài)值
  vuex 中規(guī)定 修改全局狀態(tài)值必須通過(guò)mutations 里的方法
  this.$store.commit('mutations里的函數(shù)名'，傳遞的參數(shù))

• 5.其他優(yōu)化
  actions 存放異步操作 1.減少異步代碼的重復(fù) 2.統(tǒng)一管理異步請(qǐng)求 3.時(shí)間旅行
  對(duì)象
  組件里通過(guò) $store disptach 觸發(fā)action 里的方法
  action里執(zhí)行異步 執(zhí)行完畢再通過(guò)commit 觸發(fā)mutation

  • getters 當(dāng)成vuex 里的計(jì)算屬性
    是一個(gè)對(duì)象
    創(chuàng)建一個(gè)新的變量 該變量和state值相互關(guān)聯(lián)

• 6. 輔助函數(shù)
     值 state getters
     將值映射到計(jì)算屬性
     mapState mapGetters

     函數(shù) mutations actions
     將函數(shù)映射到methods

核心概念

• Mutation Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)：

• mutations: {
  increment (state) {
  // 變更狀態(tài)
  state.count++
  }

}

• 在你需要使用的組件的methods里

  • this.$store.commit('mutations里的函數(shù)名'，傳遞的參數(shù)) 使用這個(gè)方法
  • 第二個(gè)傳遞的參數(shù)可以用來(lái)修改值

• State 用來(lái)存儲(chǔ)你想要改變的全局變量 想要改變的變量都要放到state里面

  • 例如：let store=new Vuex.Store({
    //全局狀態(tài) 全局變量
    state：{
    toggle:false
    },

  })

• actions 處理異步請(qǐng)求 例如 ajax請(qǐng)求數(shù)據(jù)

• 作用：1.減少異步代碼的重復(fù) 2. 統(tǒng)一管理異步 3.時(shí)間旅行

• 在actions里面寫方法

  • actions：{
    changeNameNet(context,params){
    let {commit}=context
    //模擬異步操作

    setTimeout(()=>{
    commit('changeName',params)

    },1000)
    }
    }

• 在使用這個(gè)方法的組件里 methods來(lái)
  組件里通過(guò) $store disptach 觸發(fā)action 里的方法
  action里執(zhí)行異步 執(zhí)行完畢再通過(guò)commit 觸發(fā)mutation(其實(shí)也是同步，還是要經(jīng)過(guò)mutation 來(lái)實(shí)現(xiàn))

• this.$store.dispatch('changeName',{name:'aaaa'})

getters 計(jì)算屬性相當(dāng)于

• 創(chuàng)建一個(gè)新的變量 該變量和state值相互關(guān)聯(lián)
• getters:{
  testNum(state){
  return ((state.num*2)+5)
  }

}

使用方法 {{this.$store.getters.testNum}}

輔助函數(shù)

• 值 state getters
  將值映射到計(jì)算屬性
  mapState mapGetters

  函數(shù) mutations actions
  將函數(shù)映射到methods

• 例子：{{tis.$store.state.name}}

  • 1. 在之前使用 import {mapState} from 'vuex' ,然后直接在要使用的組件里的computed里寫 ...mapState('name','num')
  • 2. 在組件模板里直接使用 '{{name}}' 相當(dāng)于 {{this.$store.state.name}}

  • getters和state一樣

• mutations

  • 1. 在之前使用 import {mapMutations} from 'vuex' ,然后直接在要使用的組件里的methods里寫 ...mapMutations(['changeName','changeToggle'])
  • 2. 在組件模板里methods里的使用 this.changeName({name:'aaa'}) 就相當(dāng)于 this.$store.commit('changeName',name:'aaa')

  • 想要避免出現(xiàn)重名的時(shí)候 就把...mapMutations里不用傳數(shù)組 改為對(duì)象的形式 key值為你的新改的名字

  • actions 異步方法一樣的用法

• module 模塊化

• 要想使用模塊化 就要在store文件下創(chuàng)建模塊 Amodule，Bmodule 創(chuàng)建一個(gè)index.js 封裝state，mutation，actions，getters，在index里面導(dǎo)入Amodule使用import

• let store=new Vue.Store({
  module:{
  'A':Amodule,

  }
  })

• 為了防止重名 在每個(gè)模塊里面加上 namespace：true;

項(xiàng)目 移動(dòng)端的兼容問(wèn)題

• 移動(dòng)端適配 : rem+flex+vw vh
  rem 1rem=根元素字體大小的字高 根據(jù)html的footsize
  em 1em = 1字高 body中的 font-size
  px

• pc端適配 : 百分比+媒體查詢
  大于最大尺寸 內(nèi)容不變 留白變大
  最大尺寸
  內(nèi)容層百分比布局
  最小尺寸
  內(nèi)容不變 產(chǎn)生滾動(dòng)條
  480 -750 -1136 -1440 -1920 -2440

• 響應(yīng)式（移動(dòng)pc適配） 媒體查詢 柵格 bootstrap 官網(wǎng)首頁(yè)

  響應(yīng)式布局 媒體查詢 柵格 bootstrap

• 第一步 在public里面的index.html 設(shè)置

  • document.documentElement.style.fontSize=document.documentElement.clientWidth/10+'px'
    console.log( document.documentElement.style.fontSize)

• 第二步 在style文件夾里面 mixin.less 寫下面的東西 選取設(shè)備分辨率 谷歌瀏覽器的最小為12px 例如 375

• 在variable 里面設(shè)置根元素的分辨率大小 以后想要改的話 直接修改@remSize 的值 //設(shè)置根元素的分辨率大小
  @remSize:37.5px;

• .w(@px){
  width: unit(@px/@remSize,rem);
  // @px=375
  // width: 100rem;
  // unit(數(shù)量，單位) 給數(shù)量添加單位
  }
  .h(@px){
  height: unit(@px/@remSize,rem);
  }
  .t_c(){
  text-align: center;
  }
  .l_h(@px){
  line-height: unit(@px/@remSize,rem);
  }
  // 固定布局
  .fixed(@top,@bottom,@left,@right,@color){
  position: fixed;
  top: unit(@top/@remSize,rem);
  bottom: unit(@bottom/@remSize,rem);
  left: unit(@left/@remSize,rem);
  right:unit(@right/@remSize,rem);
  background:@color ;
  }

項(xiàng)目開發(fā)

• 使用public文件下的圖片直接寫根路徑

-  <img src="/favicon.ico" alt=""> 

• public
  使用根路徑 字符串變量都行
  其他文件夾 使用相對(duì)路徑 字符串ok 變量必須通過(guò)import 引入圖片

-   1.import  img from   "../assets/logo.png"
        
-  2.data(){
return{
  // img1:"/favicon.ico",
  // img2: img //"../assets/logo.png"
    }
}   

- 3.    <img :src="img1" alt=""> 
        <img :src='img2'> 

?

網(wǎng)絡(luò)請(qǐng)求

+  第三方插件 axios
 - 在created 里發(fā)起ajax請(qǐng)求
    - 

Es6 拋出方式

+ export const login=()=>{
    //具名拋出 一個(gè)文件可以使用多個(gè)具名拋出

?
? }
?
export default 一個(gè)文件只能又一個(gè)

?