【AI Generated】從零學習Vue.js

来源:https://www.cnblogs.com/yuito/p/-/vue
-Advertisement-
Play Games

從零學習Vue.js 目錄 引言 準備工作 Vue.js 基礎 3.1 Vue 實例 3.2 模板語法 3.3 數據綁定 3.4 計算屬性和偵聽器 3.5 Class 與 Style 綁定 3.6 條件渲染 3.7 列表渲染 3.8 事件處理 3.9 表單輸入綁定 Vue.js 組件 4.1 組件基 ...


從零學習Vue.js

目錄

  1. 引言
  2. 準備工作
  3. Vue.js 基礎
    • 3.1 Vue 實例
    • 3.2 模板語法
    • 3.3 數據綁定
    • 3.4 計算屬性和偵聽器
    • 3.5 Class 與 Style 綁定
    • 3.6 條件渲染
    • 3.7 列表渲染
    • 3.8 事件處理
    • 3.9 表單輸入綁定
  4. Vue.js 組件
    • 4.1 組件基礎
    • 4.2 組件註冊
    • 4.3 父子組件通信
    • 4.4 插槽
    • 4.5 動態組件
    • 4.6 非同步組件
  5. Vue Router
    • 5.1 路由基礎
    • 5.2 動態路由匹配
    • 5.3 嵌套路由
    • 5.4 路由守衛
    • 5.5 路由元信息
    • 5.6 導航守衛
    • 5.7 路由懶載入
  6. Vuex 狀態管理
    • 6.1 Vuex 基礎
    • 6.2 核心概念
    • 6.3 模塊化
    • 6.4 中間件
    • 6.5 輔助函數
  7. 項目實戰
    • 7.1 項目初始化
    • 7.2 組件設計
    • 7.3 路由配置
    • 7.4 狀態管理
    • 7.5 API 集成
    • 7.6 部署與優化
  8. 進階概念
    • 8.1 自定義指令
    • 8.2 混入
    • 8.3 插件
    • 8.4 服務端渲染 (SSR)
    • 8.5 Vue 3 新特性
  9. 總結與展望

1. 引言

Vue.js 是一個用於構建用戶界面的漸進式 JavaScript 框架。它的設計理念是儘量簡單，同時提供足夠的靈活性和性能來應對複雜的應用需求。本書將帶你從零開始學習 Vue.js，逐步掌握其核心概念和高級特性。

2. 準備工作

在開始學習 Vue.js 之前，你需要具備以下基礎知識：

  • HTML/CSS 基礎
  • JavaScript 基礎

此外，你需要準備以下開發工具：

  • 一個現代瀏覽器（如 Chrome 或 Firefox）
  • 一個代碼編輯器（如 VS Code 或 Sublime Text）
  • Node.js 和 npm（用於管理項目依賴）

安裝 Node.js 和 npm：

  1. 訪問 Node.js 官網 下載並安裝適用於你操作系統的版本。
  2. 安裝完成後，打開終端（或命令提示符）並運行以下命令，確認安裝成功：
    node -v
npm -v

3. Vue.js 基礎

3.1 Vue 實例

Vue.js 應用的核心是 Vue 實例。你可以通過創建一個新的 Vue 實例來啟動一個 Vue 應用。

<!DOCTYPE html>
<html>
<head>
  <title>Vue.js 學習</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">{{ message }}</div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

3.2 模板語法

Vue.js 使用一種基於 HTML 的模板語法，允許你聲明式地綁定數據到 DOM。

<div id="app">
  <p>{{ message }}</p>
  <p v-bind:title="message">滑鼠懸停查看消息</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

3.3 數據綁定

Vue.js 提供了兩種主要的數據綁定方式：插值和指令。

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

3.4 計算屬性和偵聽器

計算屬性用於對數據進行計算和處理，而偵聽器用於監聽數據的變化。

<div id="app">
  <p>原始消息: {{ message }}</p>
  <p>反轉消息: {{ reversedMessage }}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    computed: {
      reversedMessage: function () {
        return this.message.split('').reverse().join('');
      }
    }
  });
</script>

3.5 Class 與 Style 綁定

你可以動態地綁定 HTML 元素的 class 和 style。

<div id="app">
  <div v-bind:class="{ active: isActive }">Class 綁定</div>
  <div v-bind:style="styleObject">Style 綁定</div>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      isActive: true,
      styleObject: {
        color: 'red',
        fontSize: '20px'
      }
    }
  });
</script>

3.6 條件渲染

使用 v-if 指令可以根據條件渲染元素。

<div id="app">
  <p v-if="seen">現在你看到我了</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      seen: true
    }
  });
</script>

3.7 列表渲染

使用 v-for 指令可以渲染一個列表。

<div id="app">
  <ul>
    <li v-for="item in items" v-bind:key="item.id">
      {{ item.text }}
    </li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, text: '蘋果' },
        { id: 2, text: '香蕉' },
        { id: 3, text: '橙子' }
      ]
    }
  });
</script>

3.8 事件處理

使用 v-on 指令可以監聽 DOM 事件。

<div id="app">
  <button v-on:click="greet">點擊我</button>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      greet: function () {
        alert(this.message);
      }
    }
  });
</script>

3.9 表單輸入綁定

使用 v-model 指令可以實現表單輸入與應用狀態的雙向綁定。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

4. Vue.js 組件

4.1 組件基礎

組件是 Vue.js 的核心概念，用於構建可復用的 UI 片段。

<div id="app">
  <my-component></my-component>
</div>
<script>
  Vue.component('my-component', {
    template: '<p>這是一個組件</p>'
  });
  var app = new Vue({
    el: '#app'
  });
</script>

4.2 組件註冊

組件可以全局註冊或局部註冊。

<!-- 全局註冊 -->
<script>
  Vue.component('my-component', {
    template: '<p>這是一個全局註冊的組件</p>'
  });
</script>

<!-- 局部註冊 -->
<script>
  var Child = {
    template: '<p>這是一個局部註冊的組件</p>'
  };
  var app = new Vue({
    el: '#app',
    components: {
      'my-component': Child
    }
  });
</script>

4.3 父子組件通信

父組件可以通過 props 向子組件傳遞數據，子組件可以通過事件向父組件發送消息。

<div id="app">
  <child-component v-bind:message="parentMessage"></child-component>
</div>
<script>
  Vue.component('child-component', {
    props: ['message'],
    template: '<p>{{ message }}</p>'
  });
  var app = new Vue({
    el: '#app',
    data: {
      parentMessage: '來自父組件的消息'
    }
  });
</script>

4.4 插槽

插槽允許你在組件中插入內容。

<div id="app">
  <alert-box>
    <strong>註意!</strong> 這是一個重要的消息。
  </alert-box>
</div>
<script>
  Vue.component('alert-box', {
    template: `
      <div class="alert-box">
        <slot></slot>
      </div>
    `
  });
  var app = new Vue({
    el: '#app'
  });
</script>

4.5 動態組件

動態組件允許你在同一個掛載點動態切換多個組件。

<div id="app">
  <component v-bind:is="currentComponent"></component>
  <button v-on:click="currentComponent = 'component-a'">顯示 A</button>
  <button v-on:click="currentComponent = 'component-b'">顯示 B</button>
</div>
<script>
  Vue.component('component-a', {
    template: '<p>組件 A</p>'
  });
  Vue.component('component-b', {
    template: '<p>組件 B</p>'
  });
  var app = new Vue({
    el: '#app',
    data: {
      currentComponent: 'component-a'
    }
  });
</script>

4.6 非同步組件

非同步組件可以按需載入，減少初始載入時間。

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回調傳遞組件定義
    resolve({
      template: '<div>非同步組件載入成功!</div>'
    })
  }, 1000)
})

5. Vue Router

5.1 路由基礎

Vue Router 是 Vue.js 的官方路由管理器，用於構建單頁應用。

<!DOCTYPE html>
<html>
<head>
  <title>Vue Router 學習</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router@3"></script>
</head>
<body>
  <div id="app">
    <router-link to="/home">首頁</router-link>
    <router-link to="/about">關於</router-link>
    <router-view></router-view>
  </div>
  <script>
    const Home = { template: '<p>首頁</p>' }
    const About = { template: '<p>關於</p>' }

    const routes = [
      { path: '/home', component: Home },
      { path: '/about', component: About }
    ]

    const router = new VueRouter({
      routes
    })

    var app = new Vue({
      el: '#app',
      router
    });
  </script>
</body>
</html>

5.2 動態路由匹配

動態路由匹配允許你在路由路徑中使用參數。

<div id="app">
  <router-link to="/user/1">用戶 1</router-link>
  <router-link to="/user/2">用戶 2</router-link>
  <router-view></router-view>
</div>
<script>
  const User = {
    template: '<p>用戶 ID: {{ $route.params.id }}</p>'
  }

  const routes = [
    { path: '/user/:id', component: User }
  ]

  const router = new VueRouter({
    routes
  })

  var app = new Vue({
    el: '#app',
    router
  });
</script>

5.3 嵌套路由

嵌套路由允許你在路由視圖中嵌套其他路由視圖。

<div id="app">
  <router-link to="/user/1">用戶 1</router-link>
  <router-link to="/user/2">用戶 2</router-link>
  <router-view></router-view>
</div>
<script>
  const User = {
    template: `
      <div>
        <h2>用戶 ID: {{ $route.params.id }}</h2>
        <router-link to="profile">個人資料</router-link>
        <router-link to="posts">帖子</router-link>
        <router-view></router-view>
      </div>
    `
  }
  const UserProfile = { template: '<p>個人資料</p>' }
  const UserPosts = { template: '<p>帖子</p>' }

  const routes = [
    { path: '/user/:id', component: User,
      children: [
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]

  const router = new VueRouter({
    routes
  })

  var app = new Vue({
    el: '#app',
    router
  });
</script>

5.4 路由守衛

路由守衛允許你在導航到某個路由之前執行一些邏輯。

<div id="app">
  <router-link to="/home">首頁</router-link>
  <router-link to="/about">關於</router-link>
  <router-view></router-view>
</div>
<script>
  const Home = { template: '<p>首頁</p>' }
  const About = { template: '<p>關於</p>' }

  const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About, beforeEnter: (to, from, next) => {
      if (confirm('你確定要進入關於頁面嗎?')) {
        next()
      } else {
        next(false)
      }
    }}
  ]

  const router = new VueRouter({
    routes
  })

  var app = new Vue({
    el: '#app',
    router
  });
</script>

5.5 路由元信息

路由元信息允許你在路由配置中添加自定義數據。

<div id="app">
  <router-link to="/home">首頁</router-link>
  <router-link to="/about">關於</router-link>
  <router-view></router-view>
</div>
<script>
  const Home = { template: '<p>首頁</p>' }
  const About = { template: '<p>關於</p>' }

  const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About, meta: { requiresAuth: true } }
  ]

  const router = new VueRouter({
    routes
  })

  router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
      // 這裡可以添加你的認證邏輯
      if (!auth.isAuthenticated()) {
        next({ path: '/login' })
      } else {
        next()
      }
    } else {
      next()
    }
  })

  var app = new Vue({
    el: '#app',
    router
  });
</script>

5.6 導航守衛

導航守衛可以在路由切換前後執行邏輯。

<div id="app">
  <router-link to="/home">首頁</router-link>
  <router-link to="/about">關於</router-link>
  <router-view></router-view>
</div>
<script>
  const Home = { template: '<p>首頁</p>' }
  const About = { template: '<p>關於</p>' }

  const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]

  const router = new VueRouter({
    routes
  })

  router.beforeEach((to, from, next) => {
    console.log('全局前置守衛')
    next()
  })

  router.afterEach((to, from) => {
    console.log('全局後置守衛')
  })

  var app = new Vue({
    el: '#app',
    router
  });
</script>

5.7 路由懶載入

路由懶載入可以按需載入路由組件，減少初始載入時間。

const routes = [
  {
    path: '/home',
    component: () => import('./components/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./components/About.vue')
  }
]

const router = new VueRouter({
  routes
})

6. Vuex 狀態管理

6.1 Vuex 基礎

Vuex 是一個專為 Vue.js 應用設計的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

<!DOCTYPE html>
<html>
<head>
  <title>Vuex 學習</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuex@3"></script>
</head>
<body>
  <div id="app">
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
  <script>
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      }
    })

    var app = new Vue({
      el: '#app',
      store,
      computed: {
        count () {
          return this.$store.state.count
        }
      },
      methods: {
        increment () {
          this.$store.commit('increment')
        }
      }
    });
  </script>
</body>
</html>

6.2 核心概念

Vuex 的核心概念包括狀態（state）、變更（mutations）、動作（actions）和 getters。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

6.3 模塊化

Vuex 允許你將狀態管理邏輯拆分成模塊，每個模塊擁有自己的 state、mutations、actions 和 getters。

const moduleA = {
  state: { count: 0 },
  mutations: { increment (state) { state.count++ } },
  actions: { incrementAsync ({ commit }) { commit('increment') } },
  getters: { doubleCount: state => state.count * 2 }
}

const moduleB = {
  state: { count: 0 },
  mutations: { increment (state) { state.count++ } },
  actions: { incrementAsync ({ commit }) { commit('increment') } },
  getters: { doubleCount: state => state.count * 2 }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

6.4 中間件

Vuex 支持插件機制，可以在狀態變更時執行一些邏輯。

const myPlugin = store => {
  store.subscribe((mutation, state) => {
    console.log(mutation.type)
    console.log(mutation.payload)
  })
}

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { increment (state) { state.count++ } },
  plugins: [myPlugin]
})

6.5 輔助函數

Vuex 提供了一些輔助函數，幫助你簡化代碼。

<div id="app">
  <p>{{ count }}</p>
  <button @click="increment">增加</button>
</div>
<script>
  const store = new Vuex.Store({
    state: { count: 0 },
    mutations: { increment (state) { state.count++ } },
    actions: { incrementAsync ({ commit }) { commit('increment') } },
    getters: { doubleCount: state => state.count * 2 }
  })

  var app = new Vue({
    el: '#app',
    store,
    computed: Vuex.mapState(['count']),
    methods: Vuex.mapMutations(['increment'])
  });
</script>

7. 項目實戰

7.1 項目初始化

使用 Vue CLI 初始化一個新的 Vue 項目。

npm install -g @vue/cli
vue create my-project
cd my-project
npm run serve

7.2 組件設計

根據項目需求設計和實現各個組件。假設我們要構建一個簡單的待辦事項應用。

vue create todo-app
cd todo-app
npm run serve

創建 components/TodoItem.vue：

<template>
  <li>
    <input type="checkbox" v-model="todo.done">
    <span>{{ todo.text }}</span>
  </li>
</template>

<script>
export default {
  props: ['todo']
}
</script>

創建 components/TodoList.vue：

<template>
  <ul>
    <todo-item v-for="todo in todos" :key="todo.id" :todo="todo"></todo-item>
  </ul>
</template>

<script>
import TodoItem from './TodoItem.vue'

export default {
  components: {
    TodoItem
  },
  data () {
    return {
      todos: [
        { id: 1, text: '學習 Vue', done: true },
        { id: 2, text: '學習 Vuex', done: false },
        { id: 3, text: '學習 Vue Router', done: false }
      ]
    }
  }
}
</script>

在 App.vue 中使用 TodoList 組件：

<template>
  <div id="app">
    <h1>待辦事項</h1>
    <todo-list></todo-list>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'

export default {
  components: {
    TodoList
  }
}
</script>

7.3 路由配置

使用 Vue Router 配置項目的路由。

安裝 Vue Router：

npm install vue-router

創建 router/index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

在 main.js 中引入路由：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

創建 components/Home.vue 和 components/About.vue：

Home.vue：

<template>
  <div>
    <h1>首頁</h1>
    <todo-list></todo-list>
  </div>
</template>

<script>
import TodoList from './TodoList.vue'

export default {
  components: {
    TodoList
  }
}
</script>

About.vue：

<template>
  <div>
    <h1>關於</h1>
    <p>這是關於頁面。</p>
  </div>
</template>

7.4 狀態管理

使用 Vuex 管理項目的全局狀態。

安裝 Vuex：

npm install vuex

創建 store/index.js：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '學習 Vue', done: true },
      { id: 2, text: '學習 Vuex', done: false },
      { id: 3, text: '學習 Vue Router', done: false }
    ]
  },
  mutations: {
    addTodo (state, todo) {
      state.todos.push(todo)
    }
  },
  actions: {
    addTodo ({ commit }, todo) {
      commit('addTodo', todo)
    }
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

在 main.js 中引入 Vuex：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在 TodoList.vue 中使用 Vuex 狀態：

<template>
  <ul>
    <todo-item v-for="todo in todos" :key="todo.id" :todo="todo"></todo-item>
  </ul>
</template>

<script>
import TodoItem from './TodoItem.vue'
import { mapState } from 'vuex'

export default {
  components: {
    TodoItem
  },
  computed: {
    ...mapState(['todos'])
  }
}
</script>

7.5 API 集成

假設我們有一個簡單的 API 來獲取和添加待辦事項。

創建 api/todos.js：

import axios from 'axios'

const API_URL = 'http://example.com/api/todos'

export default {
  getTodos () {
    return axios.get(API_URL)
  },
  addTodo (todo) {
    return axios.post(API_URL, todo)
  }
}

在 Vuex 中使用 API：

import Vue from 'vue'
import Vuex from 'vuex'
import api from '@/api/todos'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    setTodos (state, todos) {
      state.todos = todos
    },
    addTodo (state, todo) {
      state.todos.push(todo)
    }
  },
  actions: {
    fetchTodos ({ commit }) {
      api.getTodos().then(response => {
        commit('setTodos', response.data)
      })
    },
    addTodo ({ commit }, todo) {
      api.addTodo(todo).then(response => {
        commit('addTodo', response.data)
      })
    }
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

在組件中觸發 API 請求：

<template>
  <div>
    <ul>
      <todo-item v-for="todo in todos" :key="todo.id" :todo="todo"></todo-item>
    </ul>
    <input v-model="newTodoText" placeholder="添加新任務">
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue'
import { mapState, mapActions } from 'vuex'

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      newTodoText: ''
    }
  },
  computed: {
    ...mapState(['todos'])
  },
  methods: {
    ...mapActions(['fetchTodos', 'addTodo']),
    addTodo() {
      const newTodo = {
        text: this.newTodoText,
        done: false
      }
      this.addTodo(newTodo)
      this.newTodoText = ''
    }
  },
  created() {
    this.fetchTodos()
  }
}
</script>

7.6 部署與優化

將項目部署到生產環境，併進行性能優化。

  1. 構建項目：
npm run build
  1. 部署到伺服器：

將 dist 目錄中的內容上傳到你的伺服器。

  1. 性能優化：
  • 使用 Vue Router 的懶載入功能按需載入組件。
  • 使用 Vuex 的模塊化功能減少狀態管理的複雜性。
  • 使用 Webpack 的代碼分割功能減少初始載入時間。
  • 使用 gzip 壓縮減少傳輸數據量。

8. 進階概念

8.1 自定義指令

自定義指令允許你在 DOM 元素上應用自定義行為。

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

在組件中使用自定義指令：

<template>
  <input v-focus>
</template>

8.2 混入

混入提供了一種分發 Vue 組件可復用功能的非常靈活的方式。

const myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('Hello from mixin!')
    }
  }
}

const Component = Vue.extend({
  mixins: [myMixin]
})

8.3 插件

插件是 Vue.js 的一個核心概念，用於為 Vue 添加全局功能。

const MyPlugin = {
  install (Vue, options) {
    Vue.mixin({
      created: function () {
        console.log('Hello from plugin!')
      }
    })
  }
}

Vue.use(MyPlugin)

8.4 服務端渲染 (SSR)

Vue.js 也支持服務端渲染（SSR），用於提升首屏載入速度和 SEO。

安裝 Vue SSR 工具：

npm install vue-server-renderer express

創建 server.js：

const express = require('express')
const renderer = require('vue-server-renderer').createRenderer()
const createApp = require('./path/to/your/app')

const server = express()

server.get('*', (req, res) => {
  const app = createApp()

  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})

server.listen(8080)

8.5 Vue 3 新特性

Vue 3 引入了一些新的特性和改進，包括組合式 API、性能優化、TypeScript 支持等。

組合式 API

組合式 API 提供了一種更靈活的方式來組織組件邏輯。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

9. 總結與展望

通過本書的學習，你應該已經掌握了 Vue.js 的基礎知識和一些高級特性。希望你能將這些知識應用到實際項目中，不斷實踐和探索，成為一名優秀的 Vue.js 開發者。未來，Vue.js 生態系統還會不斷發展，期待你能持續關註和學習。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Android啟動過程-萬字長文(Android14)
    在電腦啟動過程和Linux內核Kernel啟動過程介紹了電腦啟動和內核載入，本篇文章主要介紹Android系統是如何啟動的。 一、Android啟動流程 Android系統的啟動流程與Linux接近： sequenceDiagram participant Bootloader as 引導載入程 ...
  • 記錄：瀑布流最佳實現方案
    傳統實現方式 當前文章的gif文件較大，載入的時長可能較久 這裡我拿小紅書的首頁作為分析演示 可以看到他們的實現方式是傳統做法，把每個元素通過獲取尺寸，然後算出left、top的排版位置，最後在每個元素上設置偏移值，思路沒什麼好說的，就是算元素坐標。那麼這種做法有什麼缺點？請看下麵這張圖的操作 容器 ...
  • Vue渲染函數與JSX指南
    title: Vue渲染函數與JSX指南 date: 2024/6/3 下午6:43:53 updated: 2024/6/3 下午6:43:53 categories: 前端開發 tags: Vue渲染 JSX基礎 性能優化 組件對比 React JSX 大項目 測試策略 第1章：Vue.js入門 ...
  • Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！
    使用 Vite 快速搭建腳手架 命令行選項直接指定項目名稱和想要使用的模板，Vite + Vue 項目，運行（推薦使用yarn） # npm 6.x npm init vite@latest my-vue-app --template vue # npm 7+, 需要額外的雙橫線： npm init ...
  • Vue3簡單項目流程分享——工作室主頁
    Vue3簡單項目流程分享——工作室主頁 零、寫在最前 以下是項目相關的一些鏈接： 源代碼GitHub倉庫（需要魔法上網）：倉庫 網頁示例（需要魔法上網）：網頁示例 UI圖（來源@設計師楊賀）：MasterGo主頁 補充：由於時間關係，該網頁沒有適配手機端，最佳展示效果為網頁端1440p寬度。 如果你 ...
  • 使用form-create生成表單組件
    FormCreate 是一個可以通過 JSON 生成具有動態渲染、數據收集、驗證和提交功能的表單生成組件。支持5個UI框架，並且支持生成任何 Vue 組件。內置20種常用表單組件和自定義組件，再複雜的表單都可以輕鬆搞定 FormCreate官網：https://www.form-create.com ...
  • 初探富文本之基於虛擬滾動的大型文檔性能優化方案
    初探富文本之基於虛擬滾動的大型文檔性能優化方案 虛擬滾動是一種優化長列表性能的技術，其通過按需渲染列表項來提高瀏覽器運行效率。具體來說，虛擬滾動只渲染用戶瀏覽器視口部分的文檔數據，而不是整個文檔結構，其核心實現根據可見區域高度和容器的滾動位置計算出需要渲染的列表項，同時不渲染額外的視圖內容。虛擬滾動 ...
  • Vue.js 動態組件與非同步組件
    title: Vue.js 動態組件與非同步組件 date: 2024/6/2 下午9:08:50 updated: 2024/6/2 下午9:08:50 categories: 前端開發 tags: Vue概覽 動態組件 非同步載入 性能提升 路由管理 狀態控制 工具生態 第1章 Vue.js 簡介 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類