Vue.js知识归纳与总结

吃吃喝喝睡睡.

已于 2023-12-23 15:39:27 修改

阅读量854

点赞数 29

文章标签： vue.js 前端 javascript

于 2023-12-23 15:25:49 首次发布

本文链接：https://blog.csdn.net/jh15005767557/article/details/135168123

版权

一、Vue.js的基本概念

1.认识Vuejs

1. Vue是一个渐进式框架, 什么是渐进式的呢?

声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。

2.核心概念：

①数据驱动：Vue.js采用响应式的数据驱动模型，通过数据的变化自动更新视图。

②组件化：Vue.js鼓励将页面拆分成多个组件，每个组件负责一个特定的功能，便于复用和维护。

3.Vue 实例：
Vue实例是Vue.js应用的根实例，通过new Vue()创建，包含了数据、模板、方法等选项。

4.模板语法：
Vue使用基于HTML的模板语法，支持插值、指令、事件处理等功能，使得模板更加动态和交互。

5.计算属性和侦听器：

①计算属性可以根据已有的数据计算出新的数据，并具有缓存特性。

②侦听器可以监听数据的变化，并在数据变化时执行相应的逻辑。

6.组件：
①组件是Vue.js中最强大的功能之一，允许开发者扩展HTML元素，封装可复用的代码。
②组件间通信：通过props和emit实现父子组件之间的通信；通过emit和on实现任意两个组件之间的通信。

7.路由：
Vue Router是官方的路由管理器，用于构建单页面应用中的路由系统。
8.状态管理：
Vuex是Vue.js官方提供的状态管理模式和库，用于管理应用中的组件间共享状态。
9.生命周期钩子：
Vue实例具有一系列的生命周期钩子，包括beforeCreate、created、beforeMount、mounted等，可以在不同阶段执行相应的逻辑。
其它特性：
①过渡效果和动画：Vue.js提供了丰富的过渡效果和动画的支持。
②插件系统：Vue.js具有强大的插件系统，可以扩展其核心功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1、导入Vue的包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <!--这个div区域就是MVVM中的 View-->
    <div id="app">
        {{message}}
    </div>
</body>
<script>
    // 2、创建一个Vue的实例
    var app = new Vue({
        el: '#app', //用于挂载要管理的元素
        data: {// 定义数据
            message: '学习Vue.js'
        }
    });
</script>
</html>

2.Vue.js实例常用构造选项

1.在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

使用el 绑定DOM元素

二、Vue.js的基本语法

Vue.js 的基础语法包括模板语法、数据绑定、指令、事件处理等。
1.插值：
使用双大括号 {{ }} 进行文本插值，将数据绑定到视图中。
例如：

<span>{{ message }}</span>

2.指令：
指令是带有 v- 前缀的特殊属性，用于响应式地作用于 DOM。
例如：

<a v-bind:href="url">...</a>

这里的 v-bind 指令将元素的 href 属性与表达式 url 的值绑定。

3.条件渲染：
使用 v-if、v-else-if、v-else 来根据条件展示特定的内容。
例如：

<p v-if="seen">现在你看到我了</p>
<p v-else>现在你看不到我了</p>

4.列表渲染：
使用 v-for 指令根据源数据多次渲染元素。
例如：

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

5.事件处理：
使用 v-on 指令监听 DOM 事件，并在触发时执行一些 JavaScript 代码。
例如：

<button v-on:click="doSomething">点击我</button>

6.双向绑定：
使用 v-model 指令在表单输入元素上创建双向数据绑定。
例如：

<input v-model="message">

7.计算属性：
使用 computed 属性定义计算属性，可以基于现有的数据计算出新的数据。
例如：

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName;
  }
}

8.监听器：
使用 watch 属性来观察和响应 Vue 实例上的数据变动。
例如：

watch: {
  firstName: function (val) {
    this.fullName = val + ' ' + this.lastName;
  }
}

三、Vue.js的常用指令

Vue.js 提供了很多常用的指令，用于在模板中操作 DOM、绑定数据、处理事件等。

1.v-bind：
语法：v-bind:属性名="表达式" 或者简写为 :属性名="表达式"
功能：动态地将数据绑定到元素的属性上。
示例：

<img :src="imageUrl">

2.v-model：
语法：v-model="变量名"
功能：实现表单元素和数据之间的双向绑定。
示例：

<input v-model="message">

3.v-if / v-else-if / v-else：
语法：v-if="条件表达式"、v-else-if="条件表达式"、v-else
功能：根据条件决定是否渲染/显示元素。
示例：

<div v-if="status === 'A'">状态 A</div>
<div v-else-if="status === 'B'">状态 B</div>
<div v-else>其他状态</div>

4.v-show：
语法：v-show="条件表达式"
功能：根据条件决定元素的显示/隐藏。
示例：

<div v-show="isVisible">可见性控制</div>

5.v-for：
语法：v-for="item in 数组或对象" :key="唯一标识符"
功能：循环渲染元素，遍历数组或对象。
示例：

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

6.v-on：
语法：v-on:事件名="方法名" 或者简写为 @事件名="方法名"
功能：绑定事件监听器，触发时执行对应的方法。
示例：

<button @click="handleClick">点击我</button>

7.v-text：
语法：v-text="表达式"
功能：将元素的文本内容设置为表达式的值。
示例：

<span v-text="message"></span>

8.v-html：
语法：v-html="表达式"
功能：将元素的 HTML 内容设置为表达式的值（需要注意潜在的安全风险）。
示例：

<div v-html="htmlContent"></div>

四、Vue.js的路由插件

一.路由概念

其实就是指向的意思，当点击页面的Home按钮时，页面就显示Home页面的内容，点击about按钮时，就显示about页面的内容，这可以说是一种映射。

① route ：指一条路由，单数形式，比如点击Home-->显示home页面的内容，这是一条路由，点击About-->显示about页面的内容，这是另一条路由。
② routes : 指一组路由，把多个单条路由组合起来，就形成一组路由。
[
{点击Home-->显示home页面的内容},
{点击About-->显示about页面的内容}
]
③ router是一个机制，相当于一个管理者，主要是来管理路由的，比如：
在routes里定义了一组路由，他是静止的，没有任何效果的，当真正进行页面的路由请求的时候，需要router来起到作用，当点击路由跳转时，他会到routes里面去查找相对应的path,从而显示对应页面的内容。
1.安装：
你可以通过 npm 或 yarn 来安装 Vue Router：npm install vue-router 或 yarn add vue-router。
在你的项目中引入 Vue Router：import VueRouter from 'vue-router'。

2.创建路由实例：
使用 VueRouter 构造函数创建一个路由实例，并定义路由配置。

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

3.路由配置：
路由配置是一个包含路径与组件映射关系的数组。
每个路由对象都有一个 path 属性表示路径，以及一个 component 属性表示对应的组件。
示例：

{ path: '/about', component: About }

4.路由视图：
在 Vue 组件中使用 <router-view> 标签来显示匹配到的组件。
示例：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

5.路由链接：
使用 <router-link> 组件来创建导航链接，它会被渲染为 <a> 标签。
示例：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </div>
</template>

6.路由参数：
可以在路由路径中定义参数，使用冒号 : 来表示动态片段。
例如：

{ path: '/user/:id', component: User }

在组件中通过 $route.params 来获取路由参数。

7.嵌套路由：
可以在路由配置中嵌套子路由，实现页面的嵌套布局和多层级导航。
示例：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      children: [
        { path: 'profile', component: Profile },
        { path: 'settings', component: Settings }
      ]
    }
  ]
})

8.路由导航：
可以通过编程方式进行路由导航，使用 $router.push、$router.replace、$router.go 等方法。
示例：

this.$router.push('/about')

9.导航守卫：
导航守卫允许你在路由跳转前后执行一些逻辑，如验证用户身份、权限控制等。
常用的导航守卫有 beforeEach、beforeResolve、afterEach 等。
示例：

router.beforeEach((to, from, next) => {
  // 在路由跳转前执行逻辑
  next();
})

10.命名路由：
可以给路由配置起一个名称，方便在代码中进行跳转导航。
示例：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, name: 'user' }
  ]
})

this.$router.push({ name: 'user', params: { id: 1 } })

五、Vue.js的知识总结

Vue.js 是一款流行的前端 JavaScript 框架，它被设计用于构建单页面应用程序 (SPA)。Vue.js 提供了数据绑定、组件化、路由管理、状态管理等一系列功能，使得开发人员可以使用简单的 API 快速构建高效、可维护、易扩展的 Web 应用程序。通过课程的学习，我深入了解了Vue.js 的核心概念、特性和应用。我了解了何使用Vue.js构建单额应用，以及如何使用Vue Router和Vuex等工具进行开发。这些知识使我Vue.js有了更深入的理解和掌握。我学习了许多实用的开发技巧和最佳实践。例如，如何使用组件化开发、如何进行状态管理、如何优化性能等。这些技巧和最佳实践不仅提高了我的开发效率也使我的代码更加健壮和可维护。通过参与课程中的实践项目，我加深了对Vue.js的理解和应用。我使用了Vue.js的各种特性和工具，如组件化、路由、状态管理等。通过实践项目,我不仅提高了自己的技能水平，也了解了实际项目中的需求和挑战。

吃吃喝喝睡睡.

关注

29
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
Vue.js知识归纳与总结

Vue.js 是一款流行的前端 JavaScript 框架，它被设计用于构建单页面应用程序 (SPA)。Vue.js 提供了数据绑定、组件化、路由管理、状态管理等一系列功能，使得开发人员可以使用简单的 API 快速构建高效、可维护、易扩展的 Web 应用程序。通过课程的学习，我深入了解了Vue.js 的核心概念、特性和应用。我了解了何使用Vue.js构建单额应用，以及如何使用Vue Router和Vuex等工具进行开发。这些知识使我Vue.js有了更深入的理解和掌握。我学习了许多实用的开发技巧和最佳实践。
复制链接

扫一扫