vue.js课程总结

陌云vic

于 2024-01-03 12:00:17 发布

阅读量969

点赞数 25

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74431616/article/details/135359727

版权

1.vue.js的基础介绍

Vue.js是一种用于构建用户界面的渐进式JavaScript框架。它专注于视图层，并且易于集成到现有项目中。Vue.js采用了组件化的开发方式，使得构建复杂的用户界面变得简单和可维护。

以下是Vue.js的一些基本概念和特点：

响应式数据绑定：Vue.js使用了双向数据绑定的概念，通过将数据和DOM元素进行绑定，当数据发生变化时，DOM会自动更新，反之亦然。
组件化开发：Vue.js允许将页面拆分为多个可重用的组件，每个组件都有自己的模板、样式和逻辑。这种组件化的开发方式使得代码更加模块化、可维护性更高。
虚拟DOM：Vue.js使用虚拟DOM来提高性能。当数据发生变化时，Vue.js会先更新虚拟DOM，然后通过比较虚拟DOM和真实DOM的差异，最后只更新需要变化的部分，减少了对真实DOM的直接操作，提高了性能。
指令：Vue.js提供了一些内置的指令，用于操作DOM元素。例如，v-bind指令用于绑定属性，v-on指令用于绑定事件，v-if和v-for指令用于条件渲染和循环渲染等。
插件系统：Vue.js具有丰富的插件系统，可以轻松地集成第三方库或扩展Vue.js的功能。
生命周期钩子：Vue.js提供了一些生命周期钩子函数，可以在组件的不同阶段执行自定义的逻辑。例如，created钩子在组件实例被创建后调用，mounted钩子在组件被挂载到DOM后调用等。

总的来说，Vue.js是一个灵活、高效且易于学习的JavaScript框架，适用于构建各种规模的应用程序。它的核心思想是通过数据驱动视图，使得开发者能够更专注于业务逻辑的实现。

2.vue.js基础语法指令

Vue.js提供了一些基础语法指令，用于在模板中操作DOM元素、绑定数据和处理事件等。以下是一些常用的指令：

v-bind：用于绑定元素的属性或表达式。例如，可以使用v-bind将数据绑定到元素的class、style、src等属性上。

<img v-bind:src="imageUrl">

v-model：用于实现表单元素和数据的双向绑定。当表单元素的值发生变化时，数据也会相应地更新，反之亦然。

<input v-model="message">

v-if和v-else：用于条件渲染元素。v-if根据表达式的值来决定是否渲染元素，v-else则表示与v-if相反的条件。

<div v-if="isShow">显示内容</div> <div v-else>隐藏内容</div>

v-for：用于循环渲染元素。可以使用v-for指令遍历数组或对象，并根据每个元素生成相应的内容。

<ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul>

v-on：用于绑定事件监听器。可以使用v-on指令监听DOM事件，并在触发事件时执行相应的方法。

<button v-on:click="handleClick">点击按钮</button>

v-show：用于根据表达式的值来切换元素的显示和隐藏。与v-if不同的是，v-show只是通过修改元素的display属性来实现，而不是添加或删除元素。

<div v-show="isShow">显示内容</div>

除了上述指令，Vue.js还提供了许多其他的指令，如v-text、v-html、v-pre、v-cloak等，用于满足不同的需求。这些指令可以根据具体的场景和需求进行使用，使得开发者能够更灵活地操作DOM和处理数据。

3.双向绑定和组件

Vue.js的双向绑定和组件是其核心特性之一，让我们逐个介绍它们。

双向绑定：双向绑定是Vue.js最重要的特性之一，它使得数据和视图之间的同步变得非常简单。通过v-model指令，可以实现表单元素和数据的双向绑定。当表单元素的值发生变化时，数据会自动更新；反之，当数据发生变化时，表单元素的值也会自动更新。

例如，下面的代码演示了一个输入框和一个数据属性的双向绑定：

<input v-model="message" placeholder="输入内容"> <p>{{ message }}</p>

在这个例子中，输入框的值会实时地同步到message这个数据属性中，同时message的值也会实时地反映到视图中的<p>元素中。

组件： Vue.js采用了组件化的开发方式，使得构建复杂的用户界面变得简单和可维护。组件是Vue.js应用程序的基本构建块，每个组件都有自己的模板、样式和逻辑。

通过Vue.component方法可以定义一个全局组件，也可以在组件选项中定义局部组件。组件可以嵌套使用，形成组件树的结构。

以下是一个简单的组件示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '组件标题',
      content: '组件内容'
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

在这个例子中，我们定义了一个名为<my-component>的组件，它包含一个标题和内容。组件的模板部分使用了Vue的模板语法，可以直接在模板中使用数据属性和表达式。组件的逻辑部分使用了Vue的组件选项，通过data属性定义了组件的数据。

在父组件中使用这个组件：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

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

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

通过<my-component>标签，我们将这个组件插入到父组件中。这样，父组件就可以使用子组件的功能和样式。

总结来说，Vue.js的双向绑定和组件使得开发者能够更轻松地管理数据和构建复杂的用户界面。双向绑定确保了数据和视图之间的同步，而组件化开发则提供了模块化和可重用性，使得代码更易于维护和扩展。

4.Axios异步通信

Axios是一个基于Promise的HTTP客户端，用于进行异步通信。它是一个流行的JavaScript库，用于在浏览器和Node.js中发送HTTP请求。

Axios提供了简洁而强大的API，使得发送HTTP请求变得非常容易。它支持各种请求方法，如GET、POST、PUT、DELETE等，并且可以设置请求头、请求参数、请求体等。

使用Axios发送异步请求的基本步骤如下：

安装Axios：首先需要在项目中安装Axios。可以使用npm或yarn进行安装。

npm install axios

导入Axios：在需要使用Axios的地方，导入Axios库。

import axios from 'axios';

发送请求：使用Axios发送HTTP请求。可以使用Axios的各种方法，如get、post、put、delete等。

axios.get('/api/users')
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error(error);
  });

在上述代码中，我们使用Axios的get方法发送了一个GET请求到/api/users接口。然后，我们使用Promise的then方法处理响应数据，使用catch方法处理错误。

Axios还提供了许多其他功能，如设置请求头、请求参数、请求体、拦截请求和响应等。可以根据具体的需求，使用Axios的API进行配置和操作。

总结来说，Axios是一个强大的JavaScript库，用于进行异步通信。它提供了简洁的API，使得发送HTTP请求变得非常方便。无论是在浏览器还是在Node.js环境中，Axios都是一个流行的选择。

5.计算属性、内容分发、自定义事件/指令

Vue.js是一个流行的JavaScript框架，提供了许多有用的特性，如计算属性、内容分发和自定义事件/指令。让我们逐个介绍它们。

计算属性：计算属性是Vue.js中的一个重要特性，用于计算和返回基于响应式数据的派生数据。计算属性的值会被缓存，只有在依赖的响应式数据发生变化时才会重新计算。

例如，下面的代码演示了一个计算属性的用法：

<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

在这个例子中，我们定义了一个名为reversedMessage的计算属性，它返回message属性的反转字符串。当message属性发生变化时，reversedMessage属性会自动更新。

内容分发：内容分发是Vue.js中的一个特性，用于将父组件的内容插入到子组件中。通过<slot>元素，可以在子组件中定义插槽，然后在父组件中使用<template>元素来填充插槽。

例如，下面的代码演示了一个内容分发的用法：

<!-- 子组件 -->
<template>
  <div>
    <h1>子组件</h1>
    <slot></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <div>
    <h1>父组件</h1>
    <my-component>
      <p>插入到子组件中的内容</p>
    </my-component>
  </div>
</template>

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

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

在这个例子中，我们定义了一个名为<my-component>的子组件，它包含一个插槽。在父组件中，我们使用<my-component>标签来插入子组件，并使用<template>元素来填充插槽。

自定义事件/指令： Vue.js允许开发者自定义事件和指令，以扩展Vue.js的功能。自定义事件可以用于在组件之间通信，自定义指令可以用于操作DOM元素。

例如，下面的代码演示了一个自定义事件和指令的用法：

<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">点击触发事件</button>
    <input v-focus>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', '自定义事件的参数')
    }
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus()
      }
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <my-component @my-event="handleEvent"></my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  },
  methods: {
    handleEvent(param) {
      console.log('自定义事件的参数：', param)
    }
  }
}
</script>

在这个例子中，我们定义了一个名为<my-component>的子组件，它包含一个自定义事件和一个自定义指令。在父组件中，我们使用@my-event来监听子组件的自定义事件，并使用v-focus指令来操作子组件中的DOM元素。

总结来说，Vue.js的计算属性、内容分发和自定义事件/指令是其核心特性之一，使得开发者能够更轻松地管理数据和构建复杂的用户界面。计算属性可以方便地计算和返回派生数据，内容分发可以方便地将父组件的内容插入到子组件中，自定义事件/指令可以扩展Vue.js的功能，使得开发者能够更加灵活地操作DOM元素和组件之间的通信。

6.router路由

在Vue.js中，Vue Router是官方提供的用于实现路由功能的插件。它可以帮助我们在单页应用中管理应用的路由，实现页面之间的切换和导航。

Vue Router的路由解析是指根据URL路径的不同，将对应的组件渲染到页面中的特定位置。下面是一个简单的示例来说明路由解析的过程：

首先，我们需要在Vue项目中安装和配置Vue Router。在项目的入口文件（通常是main.js）中，我们需要导入Vue Router并使用它：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

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

在上面的代码中，我们创建了一个VueRouter实例，并定义了两个路由规则。path表示URL路径，component表示对应的组件。

接下来，在应用的模板中，我们需要使用<router-view>标签来指定路由解析的位置。例如：

<template> <div id="app"> <router-view></router-view> </div> </template>

在这个例子中，<router-view>标签表示路由解析的位置，根据URL路径的不同，对应的组件会被渲染到这个位置。

当用户访问不同的URL路径时，Vue Router会根据配置的路由规则，找到对应的组件并将其渲染到<router-view>标签所在的位置。例如，当用户访问根路径/时，会渲染Home组件；当用户访问/about路径时，会渲染About组件。

除了基本的路由解析，Vue Router还提供了许多其他功能，如嵌套路由、路由参数、路由导航守卫等，以满足不同场景下的需求。

总结来说，Vue Router通过配置路由规则，根据URL路径的不同，将对应的组件渲染到指定位置，实现了路由的解析功能。通过使用<router-view>标签指定路由解析的位置，我们可以在Vue应用中实现页面之间的切换和导航。

陌云vic

关注

25
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫