Vue 学习总结

Return sky

已于 2024-01-03 15:03:38 修改

阅读量367

点赞数 7

文章标签： vue.js 学习 javascript

于 2024-01-03 14:52:06 首次发布

本文链接：https://blog.csdn.net/weixin_65061938/article/details/135363701

版权

Vue 是一个流行的前端框架，它可以帮助我们快速构建交互性强的单页面应用程序。在学习 Vue 的过程中，我了解到以下几点：

1. Vue 实例

Vue 实例是 Vue 应用程序的根组件。在创建 Vue 实例时，需要传递一个配置对象，其中包括 el、data、methods、computed 等属性。

el：指定 Vue 实例挂载的 DOM 元素。
data：定义 Vue 实例中的数据。
methods：定义 Vue 实例中的方法。
computed：定义计算属性，根据响应式数据进行计算。

例如：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    handleClick() {
      alert('Clicked!')
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
})

2. 模板语法

Vue 使用模板语法来描述视图。在模板中，可以使用插值表达式、指令和事件处理器等功能。

插值表达式：使用双括号 {{}} 将数据绑定到页面中。例如：<p>{{ message }}</p>
指令：以 v- 开头的特殊属性，用于控制元素的显示和行为。例如：<button v-on:click="handleClick">Click me</button>
事件处理器：在 Vue 实例中定义方法，并在模板中用事件处理器调用。例如：<button @click="handleClick">Click me</button>

3. 组件

组件是 Vue 应用程序的基本单元。通过组合和重复使用组件，可以构建复杂的用户界面。

在 Vue 中，我们可以使用 Vue.component() 或单文件组件来定义组件。每个组件包含一个模板、一个脚本和一个样式。

例如：

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello, Component!'
    }
  }
})

4. 路由

路由可以帮助我们管理页面之间的跳转。Vue 提供了 vue-router 插件来实现路由功能。

在使用 vue-router 时，需要定义路由表和路由组件。每个路由组件对应一个路由路径，当路由发生变化时，vue-router 会根据路径匹配相应的组件。

例如：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/blog', component: Blog },
  { path: '/blog/:id', component: BlogDetail } // 动态路由
]

const router = new VueRouter({
  routes
})

new Vue({
  el: '#app',
  router
})

5. Vuex

Vuex 是 Vue.js 的状态管理库，它可以帮助我们在应用程序中共享状态。Vuex 包含 state、mutations、actions、getters 等核心概念。

state：定义应用程序的状态。
mutations：定义修改状态的方法，必须是同步函数。
actions：定义异步操作和提交 mutations 的方法。
getters：定义从 state 中派生出的状态。

例如：

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

当学习 Vue 时，还有一些其他重要的概念和技术需要了解：

6. 生命周期钩子

Vue 组件生命周期钩子是一组在组件生命周期中自动执行的函数。通过利用这些钩子函数，我们可以在不同的时间点执行一些操作。

常用的生命周期钩子包括：created、mounted、updated 和 destroyed。

created：在实例创建完成后被调用，可以进行一些初始化操作。
mounted：在实例挂载到 DOM 后被调用，可以访问 DOM 元素。
updated：在组件更新后被调用，可以对更新后的 DOM 进行操作。
destroyed：在实例销毁后被调用，进行清理操作。

new Vue({
  el: '#app',
  created() {
    console.log('Component created')
  },
  mounted() {
    console.log('Component mounted')
  },
  updated() {
    console.log('Component updated')
  },
  destroyed() {
    console.log('Component destroyed')
  }
})

7. 过渡和动画

Vue 提供了过渡和动画的功能，可以为元素添加进入和离开的过渡效果，以及其他状态变化的动画效果。

Vue 过渡和动画的实现方式有两种：CSS 过渡和动画、Vue 的过渡类名。

CSS 过渡和动画：使用 CSS transition 和 animation 属性来定义过渡和动画效果。
Vue 的过渡类名：通过在元素上添加类名实现过渡效果，Vue 在过渡过程中会自动为元素添加相关的类名。

<transition name="fade">
  <div v-if="show" class="box"></div>
</transition>

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

8. Vue CLI

Vue CLI 是一个官方提供的脚手架工具，可以帮助我们快速搭建 Vue 项目。

使用 Vue CLI 可以生成一个基础的 Vue 项目结构，并提供了开发、构建和测试等功能。它还支持插件系统，可以根据需要添加各种功能和工具。

Vue CLI 使用命令行界面进行操作，例如创建项目、运行开发服务器、构建项目等。

# 安装 Vue CLI
npm install -g @vue/cli

# 创建新项目
vue create my-project

# 运行开发服务器
cd my-project
npm run serve

# 构建项目
npm run build