【前端Vue】Vue從0基礎完整教程第1篇：vue基本概念,vue-cli的使用【附程式碼文件】

程序员一诺yinuo發表於2024-03-09

前端Vue

Vue從0基礎到大神學習完整教程完整教程（附程式碼資料）主要內容講述：vue基本概念，vue-cli的使用，vue的插值表示式，{{ gaga }}，{{ if (obj.age > 18 ) { } }}，vue指令，綜合案例 - 文章標題編輯vue介紹,開發vue的方式,基本使用,如何覆蓋webpack配置,目錄分析與清理,vue單檔案元件的說明,vue透過data提供資料,透過插值表示式顯示資料,安裝vue開發者工具,v-bind指令,v-on指令,v-if 和 v-show,v-model,v-text 和 v-html。day-08vuex介紹,語法,模組化,小結。面經PC端-element (上)初始化,request,router,login模組,layout模組,dashboard模組（瞭解）。面經PC端 - Element (下)Article / list 列表,Article / add 新增,Article / del 刪除,Article / upd 修改,Article / preview 預覽,yarn-補充。vue指令（下），成績案例，計算屬性，屬性監聽v-for,樣式處理,基本結構與樣式,基本渲染,刪除,新增,處理日期格式,基本使用,計算屬性的快取的問題,成績案例-計算屬性處理總分和平均分,計算屬性的完整寫法,大小選,基本使用,複雜型別的監聽-監聽的完整寫法,成績案例-監聽資料進行快取,配置步驟（兩步）,使用演示。vue指令（下），成績案例，計算屬性，屬性監聽v-for,樣式處理,基本結構與樣式,基本渲染,刪除,新增,處理日期格式,基本使用,計算屬性的快取的問題,成績案例-計算屬性處理總分和平均分,計算屬性的完整寫法,大小選,基本使用,複雜型別的監聽-監聽的完整寫法,成績案例-監聽資料進行快取,配置步驟（兩步）,使用演示。元件化開發，元件通訊，todo案例，作業什麼是元件化開發,元件的註冊,全域性註冊元件,元件的樣式衝突 ,元件通訊 - 父傳子 props 傳值,v-for 遍歷展示元件練習,單向資料流,元件通訊 - 子傳父,props 校驗,佈局,任務元件todo,列表,刪除,修改：不做了！下面程式碼其實就是我想讓大家練習,新增,剩餘數量,清空已完成,小選與大選,篩選：作業,本地儲存,附加練習_1.喜歡小狗狗嗎,附加練習_2.點選文字變色,附加練習_3. 迴圈展示狗狗,附加練習_4.選擇喜歡的狗。v-model，ref 和 $refs，$nextTick，dynamic 動態元件，自定義指令，插槽，案例：商品列表v-model 語法糖,v-model給元件使用,動態元件的基本使用,自定義指令說明,自定義指令 - 區域性註冊,自定義指令 - 全域性註冊,自定義指令 - 指令的值,預設插槽 slot,後備內容 (預設值),具名插槽,作用域插槽,案例概覽,靜態結構,MyTag 元件,MyTable 元件。生命週期，單頁應用程式與路由，vue-router研究生命週期的意義,生命週期函式(鉤子函式),元件生命週期分類,SPA - 單頁應用程式,路由介紹,vue-router介紹,vue-router使用,配置路由規則,路由的封裝,vue路由 - 宣告式（a標籤轉跳）導航,vue路由 - 重定向和模式,vue路由 - 程式設計式（JS程式碼進行轉跳）導航,綜合練習 - 面經基礎版,元件快取 keep-alive。面經 H5 端 - Vant（上）初始化,vant,axios封裝,router,主題定製-瞭解,登入&註冊。面經 H5 端 - Vant（下）列表,詳情,收藏與喜歡,我的（個人中心）。Day01_vuex今日學習目標(邊講邊練),1.vuex介紹,2.vuex學習內容,3.vuex例子準備,vuex-store準備,5.vuex-state資料來源,【vuex-mutations定義-同步修改,【vuex-mutations使用,8.vuex-actions定義-非同步修改,9.vuex-actions使用,10.vuex-重構購物車-準備Store,11.vuex-重構購物車-配置項(上午結束),vuex-getters定義-計算屬性,13.vuex-getters使用,14.vuex-modules定義-分模組,15.分模組-影響state取值方式,16.分模組-名稱空間,擴充套件: 使用Devtools除錯vuex資料。

全套筆記資料程式碼移步：前往gitee倉庫檢視

感興趣的小夥伴可以自取哦，歡迎大家點贊轉發~

vue基本概念

Vue

為什麼要學習vue （vue/react/angular）
- 公司對vue有要求 [BOSS直聘](<
- 開發更加的效率和簡潔，並且容易維護。

vue介紹

[vue 中文網]( 尤雨溪
[Vue.js 是什麼](
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式javascript框架。

漸進式的概念

漸進式：逐漸增強，可以在專案中使用vue的一部分功能，也可以使用vue的全家桶來管理整個專案。

angular: 全家桶

框架的概念

[我們所說的前端框架與庫的區別？](

Library

代表：moment axios
庫，本質上是一些函式的集合。每次呼叫函式，實現一個特定的功能工具箱
使用庫的時候，把庫當成工具使用，需要自己控制程式碼的執行邏輯。

Framework

代表：vue、angular、react、bootstrap
框架，是一套完整的解決方案
使用框架的時候，框架實現了大部分的功能，我們只需要按照框架的規則寫程式碼

庫和框架的區別

使用庫的時候，很自由，只要呼叫庫提供的各種各樣的方法就行，也可以不用其他的一些方法
使用框架的時候，需要按照框架的規則寫程式碼，限制會非常多，但同時框架的功能也很強大，可以極大的提升開發的效率。

vue是 MVVM 的框架

MVVM思想：一種軟體架構模式，決定了寫程式碼的方式。
- M：model資料模型(ajax獲取到的資料)
- V：view檢視（頁面）
- VM：ViewModel 檢視模型
MVVM透過資料雙向繫結讓資料自動地雙向同步 不在需要操作DOM
- V（修改檢視） -> M（資料自動同步）
- M（修改資料） -> V（檢視自動同步）

1. 在vue中，不推薦直接手動操作DOM！！！

2. 在vue中，透過資料驅動檢視，不要在想著怎麼操作DOM，而是想著如何運算元據！！

開發vue的方式

開發vue有兩種方式

傳統開發模式：基於html/css/js檔案開發vue
工程化開發方式：在webpack環境中開發vue，這是最推薦的方式。
現代化的專案也都是在webpack環境下進行開發的。

vue-cli的使用

vue-cli也叫vue腳手架,vue-cli是vue官方提供的一個全域性命令工具，這個命令可以幫助我們快速的建立一個vue專案的基礎架子。

開箱即用
零配置
webpack、babel

基本使用

全域性安裝命令

npm install -g @vue/cli
# OR
yarn global add @vue/cli

檢視版本vue

vue --version

初始化一個vue專案

vue create 專案名(不能用中文)

啟動專案

yarn serve
yarn build

如何覆蓋webpack配置

注意：我們在專案無法找到webpack.config.js檔案，因為vue把它隱藏。

如果需要覆蓋webpack的配置，可以修改vue.config.js檔案，覆蓋webpack配置檔案

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 配置埠號
  devServer: {
    port: 3000
  }
})

目錄分析與清理

public/index.html不用動，提供一個最基礎的頁面
src/main.js不用動，渲染了App.vue元件
src/App.vue預設有很多的內容，可以全部刪除

<template>
  <div>123</div>
</template>

assets資料夾與components直接刪除

vue單檔案元件的說明

一個.vue檔案就是一個元件,後續開發vue，所有的功能都是基於元件實現。

安裝外掛

一個單檔案元件由三部分構成

template(必須) 影響元件渲染的結構 html
- 只能有一個根元素
script 邏輯 js
style 樣式 css less scss
- style用於提供元件的樣式，預設只能用css
- 可以透過lang="less"開啟less的功能，需要安裝依賴包

yarn add less-loader@7.2.1 less -D

vue的插值表示式

vue透過data提供資料

vue中透過template可以提供模板，但是這樣的資料是寫死的。

vue可以透過data提供資料，注意：data必須是一個函式，並且返回一個物件

<script>
export default {
  data () {
    return {
      money: 100,
      msg: 'hello'
    }
  }    
}
</script>

透過插值表示式顯示資料

插值表示式, 小鬍子語法 mustach語法 {{ }}

作用: 使用 data 中的資料渲染檢視（模板）

基本語法, 支援三元運算子

{{ msg }}
{{ obj.name }}
{{ msg.toUpperCase() }}
{{ obj.age > 18 ? '成年' : '未成年' }}

vue中插值表示式的注意點

(1) 使用的資料在 data 中要存在
```
<h1>{{ gaga }}</h1>
```
(2) 能使用表示式, 但是不能使用 if for
```
<h1>{{ if (obj.age > 18 ) { }   }}</h1>
```
(3) 不能在標籤屬性中使用
```
<h1 id="box" class="box" title="{{ msg }}"></h1>
```

安裝vue開發者工具

直接透過谷歌應用商店安裝需要梯子
透過極簡外掛下載外掛，本地安裝。

vue指令

vue指令, 實質上就是特殊的 html 標籤屬性, 特點: v- 開頭

每個 v- 開頭的指令, 都有著自己獨立的功能, 將來vue解析時, 會根據不同的指令提供不同的功能

v-bind指令

描述：插值表示式不能用在html的屬性上，如果想要動態的設定html元素的屬性，需要使用v-bind指令
作用：動態的設定html的屬性
語法：v-bind:title="msg"
簡寫：:title="msg"

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

v-on指令

基本使用

語法：
1. v-on:事件名=“要執行的少量程式碼"
2. v-on:事件名=“methods中的函式名"
3. v-on:事件名=“methods中的函式名(實參)"

最基本的語法

<button v-on:事件名="事件函式">按鈕</button>，需要在methods中提供事件處理函式

<button v-on:click="fn">搬磚</button>
<button v-on:click="fn1">賣房</button>

  // 提供方法
  methods: {
    fn () {
      console.log('你好啊')
      // console.log(this)
      this.money++
    },
    fn1 () {
      this.money += 10000
    },
  }

需要傳遞引數

<button v-on:事件名="事件函式(引數)">按鈕</button>，需要在methods中提供事件函式，接受引數

<button v-on:click="addMoney(1)">搬磚</button>
<button v-on:click="addMoney(10000)">賣房</button>

methods: {
  addMoney (money) {
    this.money += money
  }
}

如果事件的邏輯足夠簡單，可以不提供函式

<button v-on:click="money++">搬磚</button>
<button v-on:click="money += 10000">賣房</button>

vue中獲取事件物件(瞭解)

需求: 預設a標籤點選會跳走, 希望阻止預設的跳轉, 阻止預設行為 e.preventDefault()

vue中獲取事件物件

(1) 沒有傳參, 透過形參接收 e

(2) 傳參了, 透過$event指代事件物件 e

<template>
  <div id="app">
    <a @click="fn" href="
    <a @click="fn2(100, $event)" href="
  </div>
</template>

<script>
export default {
  methods: {
    fn(e) {
      e.preventDefault()
    },
    fn2(num, e) {
      e.preventDefault()
    }
  }
}
</script>

v-on 事件修飾符

vue中提供的事件修飾符

.prevent 阻止預設行為

.stop 阻止冒泡

<div id="app">
  <a @click.prevent="fn" href="
</div>

按鍵修飾符

需求: 使用者輸入內容, 回車, 列印輸入的內容

在監聽鍵盤事件時，我們經常需要判斷詳細的按鍵。此時，可以為鍵盤相關的事件新增按鍵修飾符

@keyup.enter 回車
@keyup.esc 返回

<div id="app">
  <input type="text" @keyup="fn"> <hr>
  <input type="text" @keyup.enter="fn2">
</div>

v-if 和 v-show

基本使用

v-show 和 v-if 功能: 控制盒子的顯示隱藏

v-show

語法: v-show="布林值" (true顯示, false隱藏)

原理: 實質是在控制元素的 css 樣式, display: none;
v-if

語法: v-if="布林值" (true顯示, false隱藏)

原理: 實質是在動態的建立或者刪除元素節點

應用場景:

如果是頻繁的切換顯示隱藏, 用 v-show

v-if, 頻繁切換會大量的建立和刪除元素, 消耗效能
如果是不用頻繁切換, 要麼顯示, 要麼隱藏的情況, 適合於用 v-if

v-if 是惰性的, 如果初始值為 false, 那麼這些元素就直接不建立了, 節省一些初始渲染開銷

<template>
  <div id="app">
    <h1 v-show="isShow">v-show盒子-{{ msg }}</h1>
    <h1 v-if="isShow">v-if盒子-{{ msg }}</h1>
  </div>
</template>

v-else 和 v-else-if

<div id="app">
  <h1 v-if="isLogin">尊敬的超級vip, 你好</h1>
  <h1 v-else>你誰呀, 趕緊登陸~</h1>

  <hr>
  
  <h1 v-if="age >= 60">60歲以上, 廣場舞</h1>
  <h1 v-else-if="age >= 30">30歲以上, 搓麻將</h1>
  <h1 v-else-if="age >= 20">20歲以上, 蹦迪</h1>
  <h1 v-else>20歲以下, 唱跳rap籃球</h1>
</div>

案例-摺疊皮膚

需求: 點選展開或收起時，把內容區域顯示或者隱藏

靜態結構：

<template>
  <div id="app">
    <h3>案例：摺疊皮膚</h3>
    <div class="box">
      <div class="title">
        <h4>芙蓉樓送辛漸</h4>
        <!-- 按鈕位置 -->
        <span class="btn">
          收起
        </span>
      </div>

      <!-- 切換顯示隱藏的部分  -->
      <div class="container">
        <p>寒雨連江夜入吳,</p>
        <p>平明送客楚山孤。</p>
        <p>洛陽親友如相問，</p>
        <p>一片冰心在玉壺。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    height: 320px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .box {
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #303133;
      transition: .3s;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      padding: 0 20px;
      border-top: 1px solid #ccc;
    }
    .btn {
      /* 滑鼠改成手的形狀 */
      cursor: pointer;
    }
  }
}
</style>

完整程式碼：

<template>
  <div id="app">
    <h3>案例：摺疊皮膚</h3>
    <div class="box">
      <div class="title">
        <h4>芙蓉樓送辛漸</h4>
        <!-- 按鈕位置 -->
        <span class="btn" @click="isShow = !isShow">
          {{ isShow ? '收起' : '展開' }}
        </span>
      </div>

      <!-- 切換顯示隱藏的部分 (資料驅動) -->
      <div v-show="isShow" class="container">
        <p>寒雨連江夜入吳,</p>
        <p>平明送客楚山孤。</p>
        <p>洛陽親友如相問，</p>
        <p>一片冰心在玉壺。</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    }
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;
  #app {
    width: 400px;
    height: 320px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    .box {
      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      border: 1px solid #ebeef5;
      background-color: #fff;
      overflow: hidden;
      color: #303133;
      transition: .3s;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
    .container {
      padding: 0 20px;
      border-top: 1px solid #ccc;
    }
    .btn {
      /* 滑鼠改成手的形狀 */
      cursor: pointer;
    }
  }
}
</style>

v-model

基本使用

**作用: 給表單元素使用, 雙向資料繫結 **

資料變化了, 檢視會跟著變
檢視變化了, 資料要跟著變

輸入框內容變化了(監聽使用者的輸入, 監聽input事件), 資料要跟著變

語法: v-model='值'

<input type="text" v-model="msg">

v-model 處理其他表單元素

v-model 會忽略掉表單元素原本的value, checked等初始值

textarea, select, checkbox

v-model 修飾符

number

如果想自動將使用者的輸入值, 用parseFloat轉成數字型別, ，可以給 v-model 新增 number 修飾符：
```
<input v-model.number="age" type="number">
```
如果這個值如果這個值無法轉數字，則會返回原始的值。
trim

如果要自動過濾使用者輸入的首尾空白字元，可以給 v-model 新增 trim 修飾符：
```
<input v-model.trim="msg">
```
lazy

在change時而非input時更新，可以給 v-model 新增 lazy 修飾符：
```
<input v-model.lazy="msg">
```

v-text 和 v-html

v-text指令

解釋：更新元素的 textContent/innerText。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

<h1 v-text="msg"></h1>

v-html指令

解釋：更新DOM物件的 innerHTML,html標籤會生效

<h1 v-html="msg"></h1>

**在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 [XSS 攻擊](

只在可信內容上使用 v-html，永不用在使用者提交的內容上。

綜合案例 - 文章標題編輯

靜態結構：

<template>
  <div class="article-case">
    <div class="form-preview">
      <h2>文章標題</h2>
      <small>文章頻道</small>
      <a class="btn-edit" href="#">編輯</a>
    </div>

    <div class="form-edit">
      <div class="form-item">
        <div class="label">標題：</div>
        <div class="input">
          <input type="text" placeholder="請輸入標題" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">頻道：</div>
        <div class="input">
          <select>
            <option value="">請選擇頻道</option>
            <option value="前端">前端</option>
            <option value="運維">運維</option>
            <option value="測試">測試</option>
          </select>
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="cancel">取消</button>
          <button class="submit">確認</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleCase',
  data() {
    return {
      edit: false,
      article: {
        title: '如何成為一名前端老鳥？',
        channel: '前端',
      },
      form: {
        title: '',
        channel: '',
      },
    };
  },
  methods: {
    
  },
};
</script>

<style scoped lang="less">
.form-preview {
  position: relative;
  display: flex;
  align-items: center;
}
.form-preview h2 {
  font-size: 18px;
  font-weight: normal;
}
.form-preview small {
  font-size: 12px;
  display: inline-block;
  padding: 2px 6px;
  background: #27ba9b;
  color: #fff;
  border-radius: 2px;
  transform: scale(0.8);
}
.form-preview .btn-edit {
  font-size: 12px;
  display: none;
  text-decoration: none;
  color: #069;
  margin-left: 20px;
}
.form-preview:hover .btn-edit {
  display: block;
}
.form-edit {
  padding-top: 20px;
}
.form-item {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.form-item .label {
  width: 60px;
  text-align: right;
  font-size: 14px;
}
.form-item .input {
  flex: 1;
}
.form-item input,
.form-item select {
  appearance: none;
  outline: none;
  border: 1px solid #ccc;
  width: 200px;
  height: 40px;
  box-sizing: border-box;
  padding: 10px;
  color: #666;
}
.form-item input::placeholder {
  color: #666;
}
.form-item .cancel,
.form-item .submit {
  appearance: none;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 10px;
  margin-right: 10px;
  font-size: 12px;
  background: #ccc;
}
.form-item .submit {
  border-color: #069;
  background: #069;
  color: #fff;
}
</style>

完整程式碼：

<template>
  <div class="article-case">
    <div class="form-preview" v-show="!edit">
      <h2>{{ article.title }}</h2>
      <small v-if="article.channel">{{ article.channel }}</small>
      <a class="btn-edit" href="#" @click.prevent="openEdit">編輯</a>
    </div>
    <div class="form-edit" v-show="edit">
      <div class="form-item">
        <div class="label">標題：</div>
        <div class="input">
          <input v-model="form.title" type="text" placeholder="請輸入標題" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">頻道：</div>
        <div class="input">
          <select v-model="form.channel">
            <option value="">請選擇頻道</option>
            <option value="前端">前端</option>
            <option value="運維">運維</option>
            <option value="測試">測試</option>
          </select>
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="cancel" @click="edit = false">取消</button>
          <button class="submit" @click="submit">確認</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ArticleCase',
  data() {
    return {
      edit: false,
      article: {
        title: '如何成為一名前端老鳥？',
        channel: '前端',
      },
      form: {
        title: '',
        channel: '',
      },
    };
  },
  methods: {
    openEdit() {
      this.edit = true;
      this.form = { ...this.article };
    },
    submit() {
      this.article = { ...this.form };
      this.edit = false;
    },
  },
};
</script>

<style scoped lang="less">
.form-preview {
  position: relative;
  display: flex;
  align-items: center;
}
.form-preview h2 {
  font-size: 18px;
  font-weight: normal;
}
.form-preview small {
  font-size: 12px;
  display: inline-block;
  padding: 2px 6px;
  background: #27ba9b;
  color: #fff;
  border-radius: 2px;
  transform: scale(0.8);
}
.form-preview .btn-edit {
  font-size: 12px;
  display: none;
  text-decoration: none;
  color: #069;
  margin-left: 20px;
}
.form-preview:hover .btn-edit {
  display: block;
}
.form-edit {
  padding-top: 20px;
}
.form-item {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.form-item .label {
  width: 60px;
  text-align: right;
  font-size: 14px;
}
.form-item .input {
  flex: 1;
}
.form-item input,
.form-item select {
  appearance: none;
  outline: none;
  border: 1px solid #ccc;
  width: 200px;
  height: 40px;
  box-sizing: border-box;
  padding: 10px;
  color: #666;
}
.form-item input::placeholder {
  color: #666;
}
.form-item .cancel,
.form-item .submit {
  appearance: none;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 10px;
  margin-right: 10px;
  font-size: 12px;
  background: #ccc;
}
.form-item .submit {
  border-color: #069;
  background: #069;
  color: #fff;
}
</style>

未完待續，同學們請等待下一期

全套筆記資料程式碼移步：前往gitee倉庫檢視

感興趣的小夥伴可以自取哦，歡迎大家點贊轉發~

【前端Vue】Vue從0基礎完整教程第2篇：day-08【附程式碼文件】
2024-03-14
前端Vue
【前端Vue】Vue從0基礎完整教程第3篇：面經PC端-element (上)【附程式碼文件】
2024-03-20
前端Vue
Vue前端】vue使用筆記0基礎到高手第2篇：Vue進階知識點介紹（附程式碼，已分享）
2024-02-17
Vue前端筆記
一個從0到1的webpack打包vue基礎教程
2018-04-28
WebVue
Vue影片 | 【Vue2 + Vue3 前端教程】完整版
2022-12-07
Vue前端
Vue-Cli 專案基礎搭建
2019-05-06
Vue
vue 前端關於token的使用（基礎）
2020-12-15
Vue前端
【前端Vue】Vue3+Pinia小兔鮮電商專案第1篇：認識Vue3,1. Vue3組合式API體驗【附程式碼文件】
2024-03-17
前端VueAPI
使用vue-cli搭建VUE專案
2018-08-07
Vue
【前端Vue】Vue3+Pinia小兔鮮電商專案第2篇：什麼是pinia,1. 建立空Vue專案【附程式碼文件】
2024-03-21
前端Vue
VUE 全家桶 vue-cli 2 | vue-cli 3
2018-05-16
Vue
搭建Vue從Vue-cli到router路由護衛
2019-11-11
Vue路由
vue - vue基礎/vue核心內容
2022-05-01
Vue
Vue-Cli 3.0從0 開始搭建專案（篇1）
2019-05-04
Vue
vs code 新建程式碼片段 vue 基礎程式碼
2019-08-14
Vue
vue-property-decorator基礎教程
2024-04-30
Vue
vue - vue基礎/vue核心內容（2）
2022-05-02
Vue
Vue的完整學習筆記(介紹，基礎語法，元件開發與通訊，模組化概念，webpack，vue-cli，vue-router，vuex，axios)
2020-07-20
Vue筆記元件WebiOS
VUE基礎
2024-08-17
Vue
Vue 系列一之 Vue 基礎
2019-01-13
Vue
面試-前端基礎速刷-Vue
2024-10-08
面試前端Vue
「基礎搭建」從零開始，基於 Webpack5 搭建一個 Vue-Cli
2022-03-16
WebVue
vue-cli構建vue專案
2018-08-07
Vue
webpack4+Vue搭建自己的Vue-cli
2018-08-29
WebVue
基於vue-cli構建vue-router的入門級demo
2019-03-18
Vue
vue-cli + mock
2024-03-31
VueMock
vue-cli搭建
2019-03-21
Vue
從0開始使用vue-element-admin
2018-10-10
Vue
vue - vue基礎/vue核心內容（終結篇）
2022-05-03
Vue
全網最硬核的Ant-Design-Vue從Vue-cli遷移至Vite
2022-05-19
VueVite
Vue 前端程式碼風格指南
2021-12-17
Vue前端
Vue-cli 工具 / 通過 Vue-cli 工具重構 todoList
2018-09-08
Vue
Vue-vue基礎快速入門
2020-12-11
Vue
使用Vue-cli和NutUI快速擼一個Vue專案
2019-04-09
VueUI
手把教你搭建SSR(vue/vue-cli + express)
2019-06-13
VueExpress
vue 快速入門系列 —— vue-cli 下
2021-08-17
Vue
vue 快速入門系列 —— vue-cli 上
2021-08-11
Vue
基於Vue-cli和Vux的webpack配置
2019-03-04
VueUXWeb

【前端Vue】Vue從0基礎完整教程第1篇：vue基本概念,vue-cli的使用【附程式碼文件】

全套筆記資料程式碼移步： 前往gitee倉庫檢視

感興趣的小夥伴可以自取哦，歡迎大家點贊轉發~

vue基本概念

vue介紹

漸進式的概念

框架的概念

vue是 MVVM 的框架

開發vue的方式

vue-cli的使用

基本使用

如何覆蓋webpack配置

目錄分析與清理

vue單檔案元件的說明

vue的插值表示式

vue透過data提供資料

透過插值表示式顯示資料

安裝vue開發者工具

vue指令

v-bind指令

v-on指令

基本使用

vue中獲取事件物件(瞭解)

v-on 事件修飾符

按鍵修飾符

v-if 和 v-show

基本使用

v-else 和 v-else-if

案例-摺疊皮膚

v-model

基本使用

v-model 處理其他表單元素

v-model 修飾符

v-text 和 v-html

v-text指令

v-html指令

綜合案例 - 文章標題編輯

未完待續， 同學們請等待下一期

全套筆記資料程式碼移步： 前往gitee倉庫檢視

感興趣的小夥伴可以自取哦，歡迎大家點贊轉發~

相關文章

全套筆記資料程式碼移步：前往gitee倉庫檢視

未完待續，同學們請等待下一期

全套筆記資料程式碼移步：前往gitee倉庫檢視