vue-cli使用

1.在終端下運行如命令 創建指定名稱的項目

vue create 項目名稱          * 創建一個新的cli項目

2.vue項目中的src目錄構成:

1.| assets 文件夾:存放項目中的靜態資源文件,例如css,圖片資源
2.|components 文件夾 程式員封裝的,可以復用的組件,都要放到components目錄下
3.|main.js 項目的入口文件 整個項目的運行,都要先執行main.js
4.|app.vue 是項目的根組件 寫的什麼結構就會顯示什麼結構

esline空格語法報錯

'space-before-function-paren': ['error', 'never']

組件

預設導出

 export default{} 定義script標簽必須要加  
// 導入需要使用的vue組件 
 export default{}

組件裡面的this標識當前組件的實例

如果想啟用css預編譯器 就在style標簽後面加上lang="less"

使用組件的步驟

1. 使用import語法導入需要的組件

   import 組件 from '@/文件目錄'
   

2.使用components節點註冊組件

export default{ 
components:{
組件
  }
}

components

如果在聲明組件時沒有為組件指定name名稱,則組建的名稱預設就是註冊時候的名稱

3.以標簽的形式使用剛纔註冊的組件

<div> 
<組件></組件>
</div>

註冊全局組件

在vue項目的main.js入扣文件中 通過Vue.component()方法可以註冊全局組件 

示例代碼:

import Count from '@/component/Count.vue'

//參數1:字元串格式 表示組件的註冊名稱 
//參數2:需要被全局註冊的文件
Vue.component('MyCount',Count)

父子間的通信傳輸

props

props是自定義屬性,在封裝通用組建的時候,合理的使用props可以極大地提高組件的復用性

props是自定義屬性 ,數組形式,允許使用者通過自定義屬性為當前組件指定初始值

props:['init']

在調用組件的時候 通過下麵代碼,就可以調用自定義屬性props的值

<組件 init='props'><組件>

props中的數據可以直接在模板結構中被使用

props是只讀屬性的 不要直接修改props的值,否則會報錯

要想直接修改props的值,可以吧props的值轉存到data中,用this(指向當前組件),因為data里return的值是可讀可寫的

props中的default預設值

在聲明定義屬性是 可以通過default來定義屬性的預設值,示例代碼:

export default{ 
  props{ 
    自定義屬性1:{配置選項1}
    自定義屬性2:{配置選項2}
    自定義屬性3:{配置選項3}
    init{ 
      *如果使用init自定義屬性,沒有傳遞預設值,則使用default預設值*
      default:0
    }
  }
}

props的type值類型

export default{ 
  props{ 
    自定義屬性1:{配置選項1}
    自定義屬性2:{配置選項2}
    自定義屬性3:{配置選項3}
    init{ 
      *如果使用init自定義屬性,沒有傳遞預設值,則使用default預設值*
      default:0
      *規定props的值類型為number*
      type:Number
    }
  }
}

props的required屬性

required屬性設置為必填項,如果沒有則報錯

組件中的樣式衝突問題

在每個組件中的style中加入scoped屬性,及vue自動幫助在當前組件下所有的標簽加入data-v-不同的屬性
<style lang="less" scoped><style>

當有使用第三方組件庫,並且想修改預設樣式的需求,就可以用到/deep/

如果想給引用組件中的樣式單獨設置屬性 需要在屬性前面加入/deep/ 屬性

表示父元素子代選擇

<style lang="less" scoped>
.zs {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
/deep/ h4 {
  color: tomato;
}
</style>

生命周期

1. 實例創建完成,掛載beforeCreate函數

2. 載入的第二個階段,基本的porps,methods,data都已經載入完成,可以調用created函數

   created生命周期函數,經常在他的裡面調用methods中的方法,請求伺服器的數據,並且把請求中的數據轉存到data中,供template使用
   

   註意在created生命周期函數階段,不能操作dom

3. 基於數據和模板,在記憶體中編譯生成html結構

beforeMount()將要吧記憶體中編譯好的html結構渲染到瀏覽器中,此時瀏覽器中還沒有當前組件的Dom結構,(幾乎沒什麼意義)

4. mounted()生命周期函數已經把記憶體中的html結構渲染到瀏覽器之中,此時瀏覽器已經包含當前組件的DOM結構,是最早可以操作DOM的函數
   

5. 當數據改變的時候,會調用beforeUpdate函數,將要根據數據變化過後,最新的數據,重新渲染到組件的模板結構,但是還沒有渲染到頁面上

6. updated()函數階段,渲染已經得到的數據,完成渲染

當數據發生變化之後,為了能夠得到最新的DOM結構,必須將代碼寫到updated生命周期函數中

7. beforeDestory()生命周期函數是將要銷毀組件,此時尚未銷毀,組件還處在正常工作中的狀態
8. destory()組件已經完全銷毀!!!

組件之間的數據共用

父組件向子組件共用數據

父組件向子組件共用數據需要使用自定義屬性

在父組件中引用子組件 子組件添加屬性並把需要傳入的值賦值到屬性上,併在子組件中使用props接收,就可以在子組件中使用父組件的數據

    <Left :mess="message":users="userinfo"></Left>

  props: ['mess', 'users'],

    <p>父組件的message值是{{mess}}</p>
    <p>父組件的userinfo中的name值是{{users.name}}</p>

子組件向父組件共用數據

1. 在父組件中調用子組件

      <Right @numChange="getNewNum"></Right>

2. 在子組件中通過$emit方法讓父組件監聽到元素

         this.$emit('numChange', this.number)
   

3. 在父組件中renturn{數據}然後通過函數方法調用子組件的數據

     return{numFromSon}
     methods: {
       getNewNum(val) {
         this.nunFromSon = val
       },
     },
   

兄弟組件中的共用數據

EventBus使用步驟

1. 創建enentBus.js模塊,並向外共用一個vue的實例對象
2. 在數據發送方,調用bus.$emit('事件名稱',要發送的數據)方法觸發自定義事件
3. 在數據接收方,調用bus.$on('事件名稱','事件處理函數')方法註冊一個自定義事件

註意

在接收數據的時候,應該綁定在created()生命周期鉤子上

1. import Vue from 'vue'
   export default new Vue()
   

2. methods: {
      綁定的事件() {
        bus.$emit('share', this.需要傳出的值)
      },
    },
   

3. created(val) {
     bus.$on('share', (val) => {
       this.mesFormList = val
     })
   },
   

ref引用

什麼是ref引用?

ref用來輔助開發者在不依賴與jquery的情況下,獲取DOM元素或者組件的引用

每個vue的組件實力上都包含一個'$'refs對象,裡面存儲著對應的DOM元素或者組件的引用,預設情況下,組件的$refs指向一個空對象

使用ref

在元素上綁定屬性 如:

<h1 ref="myh1"></h1>

然後通過vm實例來操作$refs

this.$refs.myh1.style.color="red"

使用ref引用組件實例

使用ref屬性 為對應的組件添加引用名稱

      <Left ref="comLeft"></Left>

然後在父組件中操作this調用refs

    changeLeft() {
      this.$refs.comLeft.num = 0
    },

動態組件

實現動態組件渲染

vue中提供了一個內置的組件,專門用來實現動態組件的渲染

      <component :is="Left"></component>

也可以通過data來定義要渲染的組件

      <component :is="comName"></component>
data(){
return{
//吧left組件動態渲染
comName:'Left'
}
}

標簽是vue內置的組件作用是占位符

is屬性的是是標識要渲染的組件名字

is屬性的值應該是在組件components節點下註冊名稱

keep-alive的使用

<keep-alive>
        <component :is="conName"></component>
</keep-alive>

keep-alive防止component切換組件被銷毀

keep-alive對應的生命周期函數

• 當組件被緩存時,會自動觸發組建的deactivated聲明周期函數
• 當組件被激活時,會自動觸發組建的activated聲明周期函數

當組件第一次被創建的時候,既會執行created生命周期函數,也會執行activated生命周期函數

當組件被激活時,只會觸發activated生命周期不會觸發created生命周期函數,因為組件沒有重新被創建

include

在keep-alive中include屬性可以說明哪些不被展示 語法格式如下

      <keep-alive include="Left">
多個組件用逗號隔開

exclude

表示誰不被緩存,不可以和include同時使用

name

當一個組件使用name屬性的時候.組建的名稱就是name屬性的值

對比

1. 組件的註冊名稱主要應用場景是: 以標簽的形式,把註冊好的組件渲染和使用到頁面結構中去
2. 組件聲明的時候name名稱主要應用場景是:結合keep-alive標簽實現組件緩存功能.以及在調試工具中看到組件的name名稱

插槽語法

 <slot></slot>

官方規定每一個slot插槽都有一個name名稱

如果省略了slot的name屬性,則有一個預設名稱叫做default

使用組件的時候,在中間插入標簽,都會在slot插槽之中

v-slot命令

v-solt命令只能使用在component組件中 或者template標簽中

自定義指令

在directives節點下聲明私有自定義指令

v-bind

在指令第一次綁定到元素上的時候 會立即觸發bind函數

update()

在DOM更新的時候 會觸發update函數

全局自定義指定

全局共用的自定義指令需要通過‘‘value.directive()’'進行聲明

路由

什麼是前端路由

路由就是hash地址與組件之間的對應關係

前端路由的工作方式

1. 用戶點擊了頁面上的路由連接
2. 導致了url地址欄中hash值發生變化
3. 前端路由監聽了hash地址的變化
4. 前端路由把當前hash地址對應的組件渲染到瀏覽器中

監聽hash值的變化

window.onhashchange=()=>{ 
console.log('監聽hash地址的變化',location.hash)
}

vue-router插件的使用

• npm i [email protected] -S

• 在src目錄下新建router文件夾 裡面創建index.js路由模塊

• 初始化代碼

• // 1. 導入Vue和VueRouter 的包 
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  
  //調用Vue.use()函數 吧VueRouter安裝為Vue的插件 
  
  Vue.use(VueRouter)
  
  //創建路由的實例對象 
  const router = new VueRouter()
  
  //向外共用路由實例對象 
  export default router
  

• 在main.js中導入路由模塊,然後通過實例對象,進行掛載

• //導入路由模塊
  import router from '@/router/index.js'
  
  new Vue({
    render: h => h(App),
    // router 路由實例對象
    router
  }).$mount('#app')
  
  

• 在路由模塊(index.js)中導入需要的組件,然後在實例對象中通過routes來定義hash地址與組件之間的對應關係

• // 導入需要的組件
  import About from '@/components/About.vue'
  import Home from '@/components/Home.vue'
  import Movie from '@/components/Movie.vue'
  
  
  //創建路由的實例對象 
  const router = new VueRouter({
    // routes是一個數組, 作用是定義hash地址與組件之間的對應關係
    routes: [
      { path: '/home', component: Home },
      { path: '/movie', component: Movie },
      { path: '/about', component: About }
    ]
  })
  

router路由的基本用法

作用就是占位符,只要安裝配置了vue-router就可以使用這個組件標簽了

 <router-view></router-view>

    <!-- 當配置和安裝vue-router了就可以用router-link來替代普通的a鏈接 -->
    <router-link to="/home">首頁</router-link>
    <router-link to="/movie">電影</router-link>
    <router-link to="/about">關於</router-link>

路由的重定向

路由重定向是指用戶在訪問地址A的時候,強制跳轉到地址C,從而展示特定的組件頁面,通過路由規則的redirect屬性,指定一個新的路由

    { path: '/', redirect: '/home' }

子級路由重定向

  ]
    {
      path: '/about', component: About, redirect: '/about/tab1', children: [
        { path: '/about/tab2', component: Tab2 },
        { path: '/about/tab1', component: Tab1 },
      ]
    },

子級路由預設子路由

如果children數組中,某個路由規則的path值為空,則這條路由規則,就叫做預設子路由

嵌套路由

通過children屬性 嵌套聲明的子級路由規則

router-link聲明子級路由時帶上父級的路由地址

<router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>


{
      path: '/about',
      component: About,
      //通過children屬性 嵌套聲明的子級路由規則
      children: [
        { path: '/about/tab2', component: Tab1 },
        { path: '/about/tab1', component: Tab2 },
      ]
    }

動態路由

動態路由是指吧Hash地址中可變的參數定義為參數項,從而提高路由規則的復用性,在vue-router中使用英文的冒號,來定義陸游的參數項

要想在路由模塊中接收到porps傳參,需要在配置中加入props:true 開啟props傳參

    { path: '/movie/:id', component: Movie, props: true },
     組件中加入props數據
     props:['id' ]
     

this.$route 式路由的參數對象

this.$router 是路由的導航對象

聲明式導航 和 編程式導航

點擊鏈接實現的導航方式叫做聲明式導航

• 普通網頁中點擊鏈接 vue 中點擊都屬於是聲明式導航

router.beforeEach(function (to, from, next) {

 if (to.path === '/home') {

  *const* token = localStorage.getItem('token')

  if (token) {

   next()

  } else {

   next('/login')

  }

 } else {

  next()

 }

})

import ``'vant/lib/index.css'