Vue.js一课一得

已于 2023-12-26 11:29:52 修改
阅读量48 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-12-26 10:26:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74298574/article/details/135214500
版权

目录

一、核心概念

1.模板语法

2.组件化

3.数据驱动

4.生命周期

5.指令

二、常用功能

1.组件通信

2.路由管理

3.状态管理

4.过滤器

5.插件开发

三、常见的vue.js代码示例

1.插值表达式

2.条件渲染

3.列表渲染

4.绑定属性

5.双向绑定

6.组件通信

8.状态管理（使用Vuex）

四、Vue.js概念和技术包括的几个方面

1.响应式原理：

2.虚拟DOM：

3.异步组件：

4.自定义指令：

5.渲染函数：

6.混入：

7.服务端渲染：

8.插件开发：

一、核心概念

1.模板语法

Vue.js 使用基于 HTML 的模板语法，可以快速构建页面，并且支持绑定数据和事件等功能。例如，可以使用 {{ }} 语法绑定变量，使用 v-on: 绑定事件。

2.组件化

Vue.js 将页面划分为多个组件，每个组件包含自己的模板、样式和逻辑。组件化使得代码可复用性更高、可维护性更好。

3.数据驱动

Vue.js 使用双向数据绑定的机制，实现了数据和视图之间的自动同步。当数据发生变化时，视图会自动更新，反之亦然。

4.生命周期

Vue.js 组件有多个生命周期钩子函数，在不同阶段执行不同的逻辑，可用于处理异步请求、DOM 操作等。

5.指令

Vue.js 提供了多个内置指令，如 v-if、v-show、v-for、v-bind 等，用于操作 DOM 元素、绑定数据等。

二、常用功能

1.组件通信

在 Vue.js 中，组件通信可以通过 props、$emit、$parent、$children、$refs 等方式实现。常用的方法有：

（1）props：用于父子组件之间传递数据，子组件通过 props 接收父组件传递的值；
（2）$emit：用于子组件向父组件触发自定义事件；
（3）$parent 和 $children：用于访问父组件和子组件的实例；
（4）$refs：用于获取子组件或 DOM 元素的引用，可以直接操作子组件或 DOM 元素。

2.路由管理

Vue.js 集成了 Vue Router 模块，提供了路由管理功能，可用于实现 SPA（单页面应用）的跳转、刷新等操作。常用的概念有：

（1）路由配置：定义不同路径下对应的组件，如 { path: '/home', component: Home }；
（2）路由跳转：使用 router.push() 方法或 <router-link> 组件进行路由跳转；
（3）动态路由：使用路由参数动态生成路由，如 /user/:id；
（4）嵌套路由：在一个页面中嵌套多个子路由，实现多层级页面的跳转。

3.状态管理

Vue.js 集成了 Vuex 模块，提供了状态管理功能，可用于管理应用中的共享状态，方便不同组件之间进行通信和数据交互。常用的概念有：

（1）State：存放应用中所有的共享状态，类似于组件中的 data 属性；
（2）Getter：用于从 state 中派生出一些状态，类似于组件中的 computed 属性；
（3）Mutation：用于修改 state 中的数据，必须是同步函数；
（4）Action：用于处理异步操作或调用多个 mutation，可以包含任意的异步操作。

4.过滤器

Vue.js 提供了过滤器机制，可以对数据进行处理和格式化，例如，可以将日期格式化为指定格式，或者将文本转换为大写字母等。常用的方法有：

（1）定义过滤器：使用 Vue.filter() 方法定义过滤器函数；
（2）使用过滤器：在模板中使用 {{ value | filterName }} 的语法调用过滤器函数。

5.插件开发

Vue.js 支持插件式开发，可以扩展 Vue.js 的功能和特性，例如，可以开发插件来实现自定义指令、过滤器、混入等功能。常用的方法有：

（1）定义插件：使用 Vue.use() 方法安装插件，或者定义一个对象，包含 install() 方法；
（2）使用插件：在 main.js 中使用 Vue.use() 安装插件，或者在组件中使用 this.$pluginName 调用插件中的方法。

三、常见的vue.js代码示例

1.插值表达式

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

2.条件渲染

<div>
  <p v-if="showMessage">显示的消息</p>
  <p v-else>隐藏的消息</p>
</div>

3.列表渲染

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

4.绑定属性

<button :disabled="isDisabled">点击按钮</button>

5.双向绑定

<input type="text" v-model="message">

6.组件通信

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMessage" @update="updateParentMessage" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: '父组件的消息'
    }
  },
  methods: {
    updateParentMessage(message) {
      this.parentMessage = message;
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">发送消息给父组件</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update', '子组件的消息');
    }
  }
}
</script>

7.路由配置和跳转（使用Vue Router）

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

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes
});

new Vue({
  router
}).$mount('#app');

8.状态管理（使用Vuex）

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

Vue.use(Vuex);

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

new Vue({
  store
}).$mount('#app');

四、Vue.js概念和技术包括的几个方面

1.响应式原理：

Vue.js使用了响应式的数据绑定机制，当数据发生变化时，相关的视图会自动更新。这一机制是通过使用Object.defineProperty()方法来劫持对象的属性访问，在属性的读取和修改时触发相应的操作。

示例：

<div id="app">
  <p>{{ message }}</p>
  <button @click="updateMessage">更新消息</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    updateMessage: function() {
      this.message = 'Hello World!';
    }
  }
});
</script>

在上面的代码中，我们使用了Vue.js提供的data属性来定义了一个message变量，并将其绑定到模板中的<p>标签中。当点击按钮时，调用updateMessage方法修改message变量的值，由于Vue.js的响应式机制，相关的视图会自动更新。

2.虚拟DOM：

Vue.js使用虚拟DOM来提高渲染性能。虚拟DOM是一个轻量级的JavaScript对象，它对应着真实的DOM元素树，并且可以通过对比新旧虚拟DOM树的差异，最小化地更新真实的DOM。

示例：

<div id="app"></div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  render: function(createElement) {
    return createElement('h1', this.message);
  }
});
</script>

在上面的代码中，我们使用了Vue.js提供的render函数来创建虚拟DOM树，并将其渲染为真实的DOM元素。在这个例子中，我们创建了一个<h1>标签，并将其内容设置为message变量的值。由于Vue.js的虚拟DOM机制，当message变量的值发生改变时，Vue.js会自动对比新旧虚拟DOM树的差异，并最小化地更新真实的DOM。

3.异步组件：

Vue.js支持异步组件加载，可以将页面划分为更小的模块，按需加载，提高页面的加载速度和用户体验。异步组件可以通过import()语法或者工厂函数的方式进行定义和使用。

示例：

<div id="app">
  <async-component></async-component>
</div>

<script>
var AsyncComponent = () => import('./AsyncComponent.vue');
var app = new Vue({
  el: '#app',
  components: {
    'async-component': AsyncComponent
  }
});
</script>

在上面的代码中，我们使用了Vue.js提供的import()语法来异步加载一个组件，并将其注册为全局组件。当页面加载时，这个组件不会被立即加载，只有在需要渲染时才会异步加载。这种方式可以提高页面的加载速度和用户体验。

4.自定义指令：

Vue.js允许开发者自定义指令，用于在DOM元素上添加特定的行为。自定义指令可以用于封装常用的DOM操作、事件处理等逻辑，使得代码更加可复用和清晰。

示例：

<div id="app">
  <p v-highlight="'red'">这是一段需要高亮显示的文本</p>
</div>

<script>
Vue.directive('highlight', {
  bind: function(el, binding) {
    el.style.backgroundColor = binding.value;
  }
});

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

在上面的代码中，我们使用了Vue.js提供的directive函数来定义一个名为highlight的自定义指令，并将其绑定到模板中的<p>标签上。当指令被绑定时，调用bind钩子函数并将绑定值设置为<p>标签的背景色。

5.渲染函数：

除了使用模板语法，Vue.js还提供了渲染函数的方式来创建组件。渲染函数允许直接用JavaScript代码生成虚拟DOM，从而更加灵活地控制组件的结构和行为。

示例：

<div id="app"></div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  render: function(createElement) {
    return createElement('h1', {
      attrs: {
        class: 'title'
      },
      domProps: {
        textContent: this.message
      }
    });
  }
});
</script>

在上面的代码中，我们使用了Vue.js提供的render函数来创建虚拟DOM树，并将其渲染为真实的DOM元素。在这个例子中，我们创建了一个<h1>标签，并将其内容设置为message变量的值，同时添加了一个class属性。由于Vue.js的渲染函数机制，我们可以更加灵活地控制组件的结构和行为。

6.混入：

混入（Mixin）是一种复用Vue组件逻辑的方式。开发者可以编写一些通用的逻辑，将其定义为混入对象，并将其混入到需要共享逻辑的组件中，从而实现代码的重用。

示例：

<div id="app">
  <p>{{ message }}</p>
  <button @click="updateMessage">更新消息</button>
</div>

<script>
var myMixin = {
  data: function() {
    return {
      message: 'Hello Mixin!'
    };
  },
  methods: {
    updateMessage: function() {
      this.message = 'Hello World!';
    }
  }
};

var app = new Vue({
  el: '#app',
  mixins: [myMixin]
});
</script>

7.服务端渲染：

Vue.js支持服务端渲染(SSR)，可以将Vue组件在服务器端预渲染成HTML字符串，然后将其发送给客户端，提高首屏加载速度和SEO效果。

示例：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue.js SSR Demo</title>
  </head>
  <body>
    <!--vue-ssr-outlet-->
    <script src="/dist/build.js"></script>
  </body>
</html>

在上面的代码中，我们使用了Vue.js提供的服务器端渲染(SSR)功能，将Vue组件渲染成HTML字符串，并在服务器端将其输出。这可以提高首屏加载速度和SEO效果。

8.插件开发：

Vue.js支持开发和使用插件，可以扩展Vue的功能和特性。开发者可以编写插件来添加全局方法、指令、过滤器，或者对Vue的原型进行扩展，从而实现自定义的需求。

示例：

// myPlugin.js
export default {
  install(Vue, options) {
    Vue.prototype.$myMethod = function() {
      console.log('Hello World!');
    };
    Vue.directive('myDirective', {
      bind: function(el, binding) {
        el.style.backgroundColor = binding.value;
      }
    });
  }
}

// main.js
import Vue from 'vue';
import myPlugin from './myPlugin.js';

Vue.use(myPlugin);

new Vue({
  el: '#app'
});
LIKKKKKK.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue.js的学习
weixin_50776358的博客
01-26 666
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。methods属性用来定义方法，通过Vue实例可以直接访问这些方法。在定义的方法中，this指向Vue实例本身。定义在methods属性中的方法可以作为页面中的事件处理方法使用，当事件执行后,执行相应的事件处理方法。######实例创建。
Vue.js项目实训
weixin_44805285的博客
05-28 3927
课上写了一个项目实训作业，历经千辛万苦终于弄完，记录以下，并且分享给大家。 一、基础工作 首先要保证你的webpack基础配置正确并且安装脚手架vue-cli，这个前期工作挺艰难的，我配的时候花了几个钟才配好。 二、创建项目 按着书上的配置进行。 三、过程 四、测试 在vscode中，保存一个txt文件在项目那，然后Ctrl+Shif+p打开外部终端，输入npm run serve启动项目，如果项目启动成功，在谷歌浏览器中输入本地域名，“http://localhost:8080/，可以打开谷歌浏览器的
vue.js一课一得
2201_75723330的博客
12-25 1360
实例1-1：Vue.js的HelloWorlddata是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。data定义的数据通过插值语法(“{{}}通过使用Vue，我深刻体会到了它的简洁、灵活和高效。
vue.js 一课一得
2301_78871549的博客
12-28 347
随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.is 有着 89%的开发者满意度)。使用 Vue.is 技术不仅提高了开发的效率，也改善了开发的体验，因此，熟练掌握Vue.is 前端框架已经成为 Web 前端开发工程师的必备技能。本章将介绍 Vue.is 有关的一些概念和技术，并帮助读者了解它们背后的工作原理，同时构建第一个 Vue.is 应用。
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
vue.js 下载，引入vue.js 本地开发
05-18
Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易学易用、组件化和高性能的特点深受开发者喜爱。本文将详细介绍如何下载Vue.js并进行本地开发。 首先，我们需要下载Vue.js。Vue.js的官方源码可以从其官方...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
内容：vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1185
vue切换主题
vue解决页面放大图片模糊的问题
最新发布
m0_56104994的博客
07-12 184
解决页面放大，图片模糊的问题
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1347
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
vue实现预览编辑ppt、word、pdf、excel、等功能的解决方案（内网-前端）
m0_68271787的博客
07-10 740
在Vue中实现预览和编辑PPT、Word、PDF、Excel等文件的功能，尤其是在内网环境下且主要侧重于前端，我们需要明确的是，直接在前端编辑这些格式的文件（特别是PPT和Word）是非常复杂且通常不推荐的，因为这些格式涉及复杂的布局和格式设置。然而，我们可以实现预览功能，并可能通过一些间接方式支持简单的编辑（如表格数据的修改）。下面我将分别给出预览PPT、Word、PDF、Excel文件的Vue组件示例代码，并简要说明如何可能实现简单的编辑功能。
Vue的常见指令
m0_63624484的博客
07-09 564
它的作用就是我们可以动态的定义属性的值，比如常见的<img src = "1.jpg">我们如果想要修改图片就需要获取到DOM对象，然后再重新填充，但是如果使用v-bind，v-show作用和v-if一样，只是当它为true或者false都会生成DOM对象；style表示样式，同样我们也可以用vue绑定style，实现样式属性的动态生成。接下来，我们实现经常在网页上看见的多选项选择时，选到哪个，哪个就会高亮显示。所以说，vue主要是实现对数据的操作，而js是对DOM对象的操作。
vue父子组件通信实现模糊搜索功能
全栈码农，专注java项目实战教程分享、大学生项目辅导开发讲解。
07-09 758
模糊搜索功能 每个网站都要用得到
vue vite+three在线编辑模型导入导出
regretTAT的博客
07-10 473
要实现一个类似于数字孪生的场景 可以在线、新增、删除模型 、以及编辑模型的颜色、长宽高 然后还要实现 编辑完后 保存为json数据 记录模型数据 既可以导入也可以导出
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 191
通过sm4对文件进行加解密，用户输入密码
vue3 路由跳转新页面并传递参数与获取参数
Anlittlecat的博客
07-10 302
parmas的形式传参需在路由处定义。
学习vue语言 不错的文档
09-15
本文档详细介绍了Vue.js这一流行的前端JavaScript框架。Vue.js是一个用于构建用户界面的渐进式框架，它强调易用性、灵活性和可维护性，适合开发单页应用（SPA）和复杂Web应用。 Vue.js概述部分简述了Vue的核心理念...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值