vue.js一课一得

最新推荐文章于 2024-06-15 14:41:39 发布

m0_74044368

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量777

点赞数 14

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74044368/article/details/135330436

版权

一.Vue.js 简介

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的核心库只关注视图层，易于上手，同时也便于与第三方库或既有项目整合。

1.Vue.js 安装

使用 npm 或 yarn 安装 Vue.js：

代码 npm install -g vue # 或 yarn global add vue

创建第一个Vue应用

<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   //这里用cdn的地址引入vue
    </head>
    <body>
        <div id="app">
          {{ message }} {{name}}    //引用message和name变量，这个{{}}是插值表达式
        </div>
    
    <script type="text/javascript">
        var app = new Vue({       //只要引入vue.js就会产生一个Vue函数，这里通过new创建了一个vue实例应用对象app
            el: '#app',              //挂载点 id为app的元素
            data: {                  //数据管理
                message: 'Hello Vue!',
                name : "Vue"
            }
        });
    </script>
</body>
</html>

2.Vue.js 基本概念

组件（Component）：Vue.js 中的基本构建块，用于构建可复用的 UI 元素。
模板（Template）：用于描述组件的 HTML 结构。
数据（Data）：用于存储组件内部的状态。
方法（Methods）：用于处理组件内部的逻辑。
生命周期钩子（Lifecycle Hooks）：用于在特定的生命周期阶段执行代码。

3.Vue.js 使用方法

创建一个 Vue 实例：

代码 const app = new Vue({ el: '#app', // 挂载点 data: { message: 'Hello, Vue!' // 数据 }, methods: { reverseMessage: function () { // 方法 this.message = this.message.split('').reverse().join('') } } })

在 HTML 中使用组件：

代码

<div id="app"> <p>{{ message }}</p> // 插值表达式 <button @click="reverseMessage">反转消息</button> // 事件监听 </div>

Vue.js 生命周期钩子

beforeCreate：实例创建前，此时还没有初始化数据、计算属性、侦听器等。
created：实例创建后，此时已经完成了数据、计算属性、侦听器的初始化。
beforeMount：模板编译前，此时还没有挂载到页面上。
mounted：模板编译后，已经挂载到页面上。
beforeUpdate：数据更新前，此时可以访问到新数据。
updated：数据更新后，此时可以访问到新数据。
beforeDestroy：实例销毁前，此时还可以访问到实例。
destroyed：实例销毁后，此时无法访问到实例。

二.Vue.js的作用

1.Vue.js的作用

1.响应式数据绑定：Vue.js 实现了双向绑定，可以将数据与 DOM 元素进行关联。当数据发生变化时，相关的 DOM 元素也会相应地更新，使得开发者无需手动操作 DOM。

2.组件化开发：Vue.js 支持将页面拆分成独立的组件，每个组件包含自己的逻辑和样式。这种组件化的开发方式可以提高代码的可维护性和重用性。

3.虚拟 DOM：Vue.js 使用虚拟 DOM 技术，通过在内存中构建一个轻量级的 DOM 树来提高页面渲染的性能。通过对比新旧虚拟 DOM 树的差异，Vue.js 只对需要更新的部分进行实际的 DOM 操作，以提高页面的渲染效率。

4.插件扩展：Vue.js 提供了丰富的插件，可以方便地与其他库或框架进行集成，例如与 Vue Router 配合实现路由功能，与 Vuex 配合实现状态管理。

三.该怎么学习Vue.js

1.先了解基本的 HTML、CSS 和 JavaScript 知识，这些是构建 Web 应用程序的基础。

2.学习 Vue.js 的核心概念，如组件、指令、生命周期钩子等。可以通过官方文档、视频教程、博客文章等途径进行学习。

3.实践编写简单的 Vue.js 应用程序，例如 Todo List、计算器等。通过实践来加深对 Vue.js 的理解。

4.掌握 Vue.js 的进阶知识，如路由、状态管理、服务器端渲染等。这些知识可以帮助你构建更复杂的应用程序。

5.参与开源项目或者自己开发一个小型项目，这样可以锻炼自己的技能并深入了解 Vue.js。

总之，学习 Vue.js 需要不断地实践和探索，同时保持持续学习的态度。

四.学习实例

1.学生信息的增删查改

具体需求描述如下：
（1）将学生信息列表渲染到网页上。
（2）添加新的列表项。
（3）删除指定的列表项。
（4）实现筛选年级的功能。 V-model computed/watch/methods
（5）使用filters过滤器进行文本格式化，用蓝色字体标注年级为2022级的学生。

运行效果截图如下