項(xiàng)目搭建

1.手動(dòng)搭建

1. 第一次搭建下載
    npm install vue@next
    npm install -g @vue/cli
2.創(chuàng)建項(xiàng)目
    vue create demo1     @vue/cli版本在3.0以上使用
    vue init webpack demo1   @vue/cli版本在3.0以下使用
3.啟動(dòng)項(xiàng)目
    npm run serve

2.可視化界面創(chuàng)建

vue ui

項(xiàng)目結(jié)構(gòu)

• node_modules 依賴文件夾
• public 靜態(tài)資源，正常編寫城西 不需要操個(gè)文件夾
  • favicon.ico 頁面圖標(biāo)
  • index.html 頁面文件 所有的頁面最終都會(huì)編譯到這個(gè)文件里面 并在瀏覽器打開
• src 項(xiàng)目程序文件夾
  • assets 靜態(tài)資源目錄
  • components 所有組件
    • 規(guī)范：所有組件文件名 首字母大寫
  • router 路由
  • store vuex 全局狀態(tài)管理（比如公共變量）
  • views 頁面文件夾
    • 規(guī)范：頁面文件名首字母大寫
      組件組合到頁面，頁面組合到主頁面
• app.vue 項(xiàng)目主頁面文件 容納所有組件的容器面組合完畢之后 被編譯到 public中的index.html
  vue是一個(gè)單頁面的框架
  App.vue 就是這個(gè)單頁面的模版
  views文件夾中的頁面文件 最終都會(huì)在App.vue中打開
  App.vue最終會(huì)轉(zhuǎn)化成public/index.html中的頁面代碼
• main.js 程序主入口文件

.vue文件內(nèi)結(jié)構(gòu)

• 頁面結(jié)構(gòu)
  • 一個(gè)根目錄下只能有一個(gè)template標(biāo)簽，一個(gè)template只能有一個(gè)子元素（通常都是div，且通常都要設(shè)置id），所有的頁面在template中 寫
  • tempalte可以在子元素內(nèi)嵌套tempalte標(biāo)簽 非必要不推薦
• 邏輯代碼
  • script標(biāo)簽
  • 引入文件 import
  • 導(dǎo)出頁面設(shè)置 export default{}
    • name 定義頁面名字
    • data(){ return {
      所有頁面數(shù)據(jù)以鍵值對(duì)的形式寫在return中
      }}
• 頁面樣式
  • style標(biāo)簽
  • scoped 防止樣式穿透 （沖突，樣式只在本頁面生效）
  • lang="less" 定義語法規(guī)則

編寫頁面流程

• 編寫組件
• 編寫頁面
  • 導(dǎo)入當(dāng)前頁面所需要的所有組件
    • 導(dǎo)入 import 首字母大寫
    • 注冊(cè) components 首字母大寫
    • 使用 直接將注冊(cè)的組建名以標(biāo)簽的形式用 首字母大寫
      單標(biāo)簽 <Test />
      雙標(biāo)簽 正常寫
  • 將組件組裝成完整的頁面
• 編寫路由
  • 在路由文件中的routers數(shù)組中進(jìn)行路由設(shè)置
    每一個(gè)頁面路由都是數(shù)組內(nèi)的一個(gè)對(duì)象
    ｛
    path:'頁面路由路徑',
    name:'頁面名字',
    component:()=>import('頁面文件路徑')
    ｝

基礎(chǔ)語法

• data()
  是一個(gè)有返回值的函數(shù) 返回值為一個(gè)對(duì)象
  頁面中所有用到的數(shù)據(jù)都以鍵值對(duì)的形式
  所以 頁面數(shù)據(jù) 也稱之為 data中的屬性
• 數(shù)據(jù)綁定
  • v-bind 簡(jiǎn)寫為 ： 單項(xiàng)數(shù)據(jù)綁定，只能用來讀取data中的數(shù)據(jù)
    通常同來設(shè)置標(biāo)簽上 屬性的值
  • v-model 雙向數(shù)據(jù)綁定，可以讀取，也可以修改data中的數(shù)據(jù)
    通常同來跟form表單搭配使用
• 渲染
  • {{}}模版語法
    以子元素的形式標(biāo)簽內(nèi)
    在雙括號(hào)內(nèi)可以 讀取data 或 計(jì)算屬性 中的值
    還可以寫一些簡(jiǎn)單的單行表達(dá)式(判斷。三目運(yùn)算符)
  • v-text
    寫在起始標(biāo)簽上
    讀取data中的數(shù)據(jù) 并將其寫入標(biāo)簽內(nèi)的文本中
    等同于 innerText
  • v-html
    寫在起始標(biāo)簽上
    讀取data中的數(shù)據(jù) 并將其寫入標(biāo)簽內(nèi)的文本中
    等同于 innerHTML
• 條件語句
  • v-if
  • v-else-if
  • v-else
    以上三個(gè) 如果判斷不通過 則不渲染元素
  • v-show
    v-show判斷不通過，正常渲染元素 但是會(huì)給元素加 display:none
• 循環(huán)語句
  • v-for
    • 對(duì)象：三個(gè)參數(shù) （參數(shù)名可自定義）
      • 第一個(gè)參數(shù) 對(duì)象鍵值對(duì)的值
      • 第二個(gè)參數(shù) 對(duì)象鍵值對(duì)的鍵
      • 第三個(gè)參數(shù) 索引值
    • 數(shù)組：兩個(gè)參數(shù)
      • 第一個(gè)參數(shù) 數(shù)組中的元素
      • 第二個(gè)參數(shù) 元素索引值
        循環(huán)對(duì)象 循環(huán)的是對(duì)象中的鍵值對(duì)
        注意?。。?！
        寫v-for的標(biāo)簽內(nèi) 必須寫 :key
        :key的值為絕對(duì)不會(huì)重復(fù)的值 首選id 次選索引值
• 事件綁定
  • v-on： 縮寫 @
  • 在起始標(biāo)簽上綁定事件 及事件所 觸發(fā)的函數(shù)
  • <p v-on:click="事件函數(shù)"></p>
  • <p @click="事件函數(shù)"></p>
  • 事件修飾符
    • once 當(dāng)前事件 只執(zhí)行一次
      prevent 阻止默認(rèn)事件
      stop 阻止事件冒泡
      captrue 時(shí)間捕獲
      <button @click.once="say">事件修飾符</button>
  • 事件傳參
    <button @click="event_($event)">函數(shù)傳參</button>
• 函數(shù)
  • 所有的函數(shù)都寫在methods對(duì)象里面

計(jì)算屬性

• 以函數(shù)的形式寫在 computed中
• 使用時(shí) 直接將函數(shù)名當(dāng)作data中的數(shù)據(jù)使用
• 以對(duì)象的形式編寫時(shí) 有g(shù)et函數(shù)和set函數(shù)
• set函數(shù) 通常用來做數(shù)據(jù)的操作
  • 直接修改計(jì)算屬性的值時(shí)才會(huì)觸發(fā)
• get函數(shù) 通常用來獲取及輸出最終的值
  • 當(dāng)計(jì)算屬性的值被修改時(shí)觸發(fā)
  • 必須有返回值
  • 以函數(shù)的形式寫計(jì)算屬性時(shí) 默認(rèn)編寫的是get函數(shù)

偵聽器

• 以函數(shù)的形式寫在watch對(duì)象中
• 偵聽data內(nèi) 數(shù)據(jù)的變化 如果數(shù)據(jù)被修改 則直接觸發(fā)相應(yīng)的函數(shù)
• 函數(shù)名為偵聽的data中的數(shù)據(jù)名
• 常用于雙向數(shù)據(jù)綁定（form表單）

計(jì)算屬性和偵聽器的區(qū)別

• 計(jì)算屬性是數(shù)據(jù)在使用之前對(duì)數(shù)據(jù)進(jìn)行處理，使用的是修改之后的數(shù)據(jù)
• 偵聽器是數(shù)據(jù)發(fā)生變化時(shí)（數(shù)據(jù)已被修改和使用），觸發(fā)偵聽器

父向子傳參

• 1. 子組件內(nèi)定義一個(gè)自定義屬性
     父組件內(nèi)引入自組件 并給子組件的自定義屬性賦值（父組件中的值）

子向父?jìng)鲄⒌姆椒?/h3>

• 1. 子組件中調(diào)用父組件的方法（通過自定義屬性，單向數(shù)據(jù)綁定），并傳入?yún)?shù)
• 2. $emit
  • 在子組件內(nèi)定義方法，在方法里用 this.$emit('函數(shù)名','子組件向父組件傳的參數(shù)')定義自定義方法
  • 在父組件內(nèi)引入子組件，并在父組件中調(diào)用子組件中定義好的 自定義函數(shù)
  • 并定義一個(gè)函數(shù)，為子組件的方法編寫事件函數(shù)
    此函數(shù)有默認(rèn)參數(shù)，參數(shù)為 子組件定義的函數(shù)傳過來的數(shù)據(jù)
  • 在父組件的data中，定義一個(gè)變量，用來存 子組件 傳過來的數(shù)據(jù)
• 3. $refs
     • 在父組件中 引入的子組件標(biāo)簽中設(shè)置 ref='名字自定義'(這里存子組件的所有數(shù)據(jù))
     • 在父組件中通過 this.$refs.第一步自定義的名字.數(shù)據(jù)名 來獲取子組件中的數(shù)據(jù)

插槽

• 1. 如果只有一個(gè)插槽 不具名插槽
     • 在子組件中 需要設(shè)置插槽處寫 <slot></slot>
     • 父組件中

                <子組件名>
                    任意html代碼
                </子組件名>

• 2. 有多個(gè)插槽 具名插槽
     • 子組件中
       <slot name="插槽名"></slot> 每個(gè)都需要寫name 不寫代碼會(huì)亂
     • 父組件中
       v-slot： 可以簡(jiǎn)寫為#

            <子組件名>
                <template v-slot:插槽名>
                   html代碼 
                </template>
                <template v-slot:插槽名>
                   html代碼 
                </template>
            </子組件名>

• 3. 作用域插槽

• 子組件

 <slot name="插槽名" :屬性名（自定義）="子組件data中的數(shù)據(jù)名"></slot>

• 父組件

            <子組件名>
                <template #插槽名="{屬性名}">
                    <p>{{屬性名}}</p>
                </template>
            </子組件名>

路由的嵌套

• 聲命式

    <router-link to="跳轉(zhuǎn)路徑"></router-link>
    <router-view></router-view>寫在想要頁面顯示的地方

• 編程式
  this.replace("跳轉(zhuǎn)路徑") 不可退回歷史頁面
  .this.go(-1) 后退一個(gè)歷史頁面