前端-Vue入门

前言

想必在入门前端三剑客HTML、CSS、JavaScript，熟悉DOM&BOM及ES6后，大家已经能够开始自己搭建网页了，那大概率逃不过这个前端框架——Vue3.0！

1. Vue简介

1.1 Vue是什么？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

1.2 使用示例

这是一个简单的Vue3示例：

<!-- template -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">改变信息</button>
  </div>
</template>

<!-- script -->
<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: '这是一条信息'
    })

    function changeMessage() {
      state.message = '信息已经改变'
    }

    return {
      message: state.message,
      changeMessage
    }
  }
}
</script>

这个示例中，我们使用了Vue3的reactive函数来创建响应式数据对象state，然后在setup函数中返回message和changeMessage，分别用于声明式渲染和响应式更新。在模板中，我们使用{{ message }}来展示message的值，并使用@click绑定changeMessage函数来实现点击按钮更新信息。

上面的示例展示了 Vue 的两个核心功能：

• 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
• 响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

1.3 什么是渐进式框架？

Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的，不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue 的设计非常注重灵活性和“可以被逐步集成”这个特点。根据你的需求场景，你可以用不同的方式使用 Vue：

• 无需构建步骤，渐进式增强静态的 HTML
• 在任何页面中作为 Web Components 嵌入
• 单页应用 (SPA)
• 全栈 / 服务端渲染(SSR)
• Jamstack / 静态站点生成 (SSG)
• 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

简单讲，它是一个可以与你共同成长、适应你不同需求的框架。

1.4 Vue的优点

• 体积小：压缩后只有几十kb；
• 更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM
• 双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上
• 生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发

2. MVVM简介

2.1 什么是MVVM？

MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。 保持应用程序逻辑和UI之间的清晰分离有助于解决许多开发问题，并使应用程序更易于测试、维护和演变。 它还可以显著提高代码重用机会，并允许开发人员和UI设计人员在开发应用各自的部分时更轻松地进行协作。

2.2 特点

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性。可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。
4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。使用MVVM来开发用户控件。由于用户控件在大部分情况下不涉及到数据的持久化，所以如果将M纯粹理解为DomainModel的话，使用MVVM模式来进行自定义控件开发实际上可以省略掉M，变成了VVM。

2.3 执行原理

3. Vue实战演练——Todo List

3.1 项目需求

1. 用户可以添加新的任务。
2. 用户可以标记任务为完成或未完成。
3. 用户可以编辑任务。
4. 用户可以删除任务。
5. 用户可以按完成状态和创建时间筛选任务。

3.2 项目开发

1. 创建项目

使用Vue CLI创建项目:

vue create todo-list

使用默认设置，选择手动选择特性，勾选Router和Vuex。

2. 创建数据模型

在/src/store/index.js中创建数据模型：

import { createStore } from 'vuex'

export default createStore({
  state: {
    todos: []
  },
  mutations: {
    addTodo (state, todo) {
      state.todos.push(todo)
    },
    editTodo (state, { index, newTodo }) {
      state.todos.splice(index, 1, newTodo)
    },
    deleteTodo (state, index) {
      state.todos.splice(index, 1)
    },
    toggleCompleted (state, index) {
      state.todos[index].completed = !state.todos[index].completed
    }
  },
  actions: {
    addTodo ({ commit }, todo) {
      commit('addTodo', todo)
    },
    editTodo ({ commit }, payload) {
      commit('editTodo', payload)
    },
    deleteTodo ({ commit }, index) {
      commit('deleteTodo', index)
    },
    toggleCompleted ({ commit }, index) {
      commit('toggleCompleted', index)
    }
  },
  getters: {
    completedTodos: state => state.todos.filter(todo => todo.completed),
    uncompletedTodos: state => state.todos.filter(todo => !todo.completed)
  }
})

该数据模型定义了一个todos数组，包含addTodo，editTodo，deleteTodo和toggleCompleted四个mutation，分别用于添加、编辑、删除和标记完成状态。

在actions中，每个操作都有一个对应的action。在getters中，定义了两个派生状态，用于根据完成状态筛选任务。

3. 创建路由

在/src/router/index.js中添加路由：

import { createRouter, createWebHistory } from 'vue-router'
import Todos from '../views/Todos.vue'

const routes = [
  {
    path: '/',
    name: 'Todos',
    component: Todos
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

该路由只有一个路径“/”，对应一个Todos组件。

4. 创建组件

在/src/views/Todos.vue中添加以下代码:

<template>
  <div>
    <h1>Todo List</h1>
    <form @submit.prevent="addTodo">
      <label>
        New Todo:
        <input type="text" v-model="newTodo" />
      </label>
      <button>Add</button>
    </form>
    <ul>
      <li v-for="(todo, index) in todos" :key="todo.id">
        <input type="checkbox" :checked="todo.completed" @change="toggleCompleted(index)" />
        <span :contenteditable="editingIndex === index" @blur="updateTodo" @keydown.enter.prevent="updateTodo">{{ todo.text }}</span>
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
    <div>
      <button @click="filter = 'all'" :disabled="filter === 'all'">All</button>
      <button @click="filter = 'completed'" :disabled="filter === 'completed'">Completed</button>
      <button @click="filter = 'uncompleted'" :disabled="filter === 'uncompleted'">Uncompleted</button>
      <span v-show="completedTodos.length">Completed: {{ completedTodos.length }}</span>
      <span v-show="uncompletedTodos.length">Uncompleted: {{ uncompletedTodos.length }}</span>
    </div>
  </div>
</template>

<script>
import { reactive, computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'Todos',
  setup () {
    const store = useStore()
    const state = reactive({
      newTodo: '',
      editingIndex: -1,
      filter: 'all'
    })

    const addTodo = () => {
      if (state.newTodo) {
        store.dispatch('addTodo', {
          id: Date.now(),
          text: state.newTodo,
          completed: false
        })
        state.newTodo = ''
      }
    }

    const deleteTodo = index => {
      store.dispatch('deleteTodo', index)
    }

    const toggleCompleted = index => {
      store.dispatch('toggleCompleted', index)
    }

    const updateTodo = ({ target }) => {
      const text = target.textContent.trim()
      if (text) {
        store.dispatch('editTodo', {
          index: state.editingIndex,
          newTodo: {
            ...store.state.todos[state.editingIndex],
            text
          }
        })
      } else {
        target.textContent = store.state.todos[state.editingIndex].text
      }
      state.editingIndex = -1
    }

    const todos = computed(() => {
      switch (state.filter) {
        case 'completed':
          return store.getters.completedTodos
        case 'uncompleted':
          return store.getters.uncompletedTodos
        default:
          return store.state.todos
      }
    })

    const completedTodos = computed(() => store.getters.completedTodos)

    const uncompletedTodos = computed(() => store.getters.uncompletedTodos)

    return {
      state,
      addTodo,
      deleteTodo,
      toggleCompleted,
      updateTodo,
      todos,
      completedTodos,
      uncompletedTodos
    }
  }
}
</script>

该组件包含一个表单，用于添加新的任务。todos通过v-for指令渲染。在每个li元素中，有一个checkbox，一个span元素可以编辑任务，一个删除按钮。

在底部有三个按钮，用于筛选任务。完成的任务数量和未完成的任务数量显示在底部。

在setup函数中，使用useStore获取store实例。state是一个响应式对象，包含newTodo、editingIndex和filter三个属性。addTodo、deleteTodo、toggleCompleted和updateTodo是处理事件的函数。

todos、completedTodos和uncompletedTodos是计算属性，根据完成状态和筛选状态获取todos数组的子集。

5. 运行项目

运行项目：

npm run serve

在浏览器中打开http://localhost:8080/即可看到Todo List应用。

---

以上便是本文全部内容啦，希望能够带来帮助！