Vue快速入门

最新推荐文章于 2025-03-11 14:32:27 发布

图灵学院架构师

最新推荐文章于 2025-03-11 14:32:27 发布

阅读量928

点赞数

分类专栏： Java面试 Java Vue 文章标签： java 性能优化后端面试 vue

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/tulingxueyuanXM/article/details/123854672

版权

本文档介绍了Vue.js的基础知识，包括MVVM编程思想、渐进式框架特性、核心功能，以及如何创建Hello World应用。Vue是一个由尤雨溪开发的渐进式JavaScript框架，适合构建用户界面。其主要功能包括页面渲染、表单处理、组件化开发，并可扩展到前端路由、状态管理和工程化项目。此外，推荐使用Vue Devtools进行调试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、简介

1.2、MVVM编程思想

1.3、渐进式框架

1.4、VUE核心功能

2.Vue—Hello World

3.指令

4.计算属性和侦听器

5.组件化基础

6.生命周期和钩子函数

7.使用Vue脚手架进行模块化开发

1、简介

Vue (读音 /vju/，类似于 view)

是中国的大神尤雨溪开发的，为数不多的国人开发的世界顶级开源软件。

是一套用于构建用户界面的渐进式框架 。Vue 被设计为可以自底向上逐层应用。

MVVM响应式编程模型，避免直接操作DOM , 降低DOM操作的复杂性。

1.2、MVVM编程思想

MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染M（model）：普通的javascript数据对象 V（view）：前端展示页面 VM（ViewModel）：用于双向绑定数据与页面，对于我们的课程来说，就是vue的实例

1.3、渐进式框架

“渐进式框架” 非常简单，就是用你想用或者能用的功能特性，你不想用的部分功能可以先不用。VUE不强求你一次性

接受并使用它的全部功能特性。

场景一：公司刚开始一个项目，技术人员对Vue的掌握也不足够。那么我们就不能使用VUE了么？当然不是，如果你只是使用VUE做些基础操作，如：页面渲染、表单处理提交功能，那还是非常简单的，成熟技术人员上手也就一两天。完全可以用它去代替jquery。并不需要你去引入其他复杂特性功能。

场景二：我们项目用了VUE，使用的效果也挺好。那么我们想逐渐实现代码组件化，实现代码的复用，或者是基于组件原型的跨项目的代码复用。那么我们就可以引入VUE的components组件特性了。

场景三：我们的项目规模逐渐的变大了，我们可能会逐渐用到前端路由、状态集中管理、并最终实现一个高度工程化的前端项目。这些功能特性我们可以逐步引入，当然不用也可以。

所以VUE的适用面很广，你可以用它代替老项目中的JQuery。也可以在新项目启动初期，有限的使用VUE的功能特性，从而降低上手的成本。

1.4、VUE核心功能

基础功能：页面渲染、表单处理提交、帮我们管理DOM(虚拟DOM)节点组件化开发：增强代码的复用能力，复杂系统代码维护更简单

前端路由：更流畅的的用户体验、灵活的在页面切换已渲染组件的显示，不需与后端做多余的交互状态集中管理：MVVM响应式模型基础上实现多组件之间的状态数据同步与管理前端工程化：结合webpack等前端打包工具，管理多种静态资源，代码，测试，发布等，整合前端大型项目。

2.Vue—Hello World

Vue的其他插件安装

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools。它允许你在一个更友好的界面中审查和调试 Vue 应用。

官網

https://cn.vuejs.org/v2/guide/installation.html

3.指令

基本概念双向绑定

模型变化视图也会随之变化。

视图变化模型也会随之变化

方法

methods

v-text/v-html: 指定标签体

v-if v-else v-show

v-for : 遍历

v-on : 绑定事件监听

v-bind : 属性绑定

vtext/vhtml: 指定标签体

vtext : 当作纯文本

v-text是元素的 InnerText 属性，它的作用和之前我们使用的 { {}} 一样，用于数据

绑定：

vhtml : 将 value 作为 html 标签来解析

v-html是元素的 innerHTML，它用于绑定一段 html 标签：

1

2

3 <!DOCTYPE html>

4 <html lang="en">

5 <head>6 <meta charset="UTF‐8">

7 <meta name="viewport" content="width=device‐width, initial‐scale=1.0">

8 <meta http‐equiv="X‐UA‐Compatible" content="ie=edge">

9 <title>Document</title>

10 </head>

11 <body>

12 <div id="app">

13 <div v‐html="message"></div>

14 </div>

15 </body>

16 <script src="https://unpkg.com/vue/dist/vue.js"></script>

17 <script>

18 var vm = new Vue({

19 el: '#app',

20 data: {

21 message: "<div>您好，我是徐庶！</div>",

22 }

23 })

24 </script>

25 </html>

vif velse vshow

vue提供了vif和vshow两个指令来控制页面元素的显示和隐藏。我们先通过一段代码来

看一下使用两个指令各有什么效果：

vif : 如果vlaue为true, 当前标签会输出在页面中

vshow: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none

v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中

1 <!DOCTYPE html>

2 <html lang="en">

3 <head>

4 <meta charset="UTF‐8">

5 <meta name="viewport" content="width=device‐width, initial‐scale=1.0">

6 <meta http‐equiv="X‐UA‐Compatible" content="ie=edge">

7 <title>Document</title>

8 </head>

9 <body>

10 <div id="app">

11 <div>

12 <button>我是添加按钮，我一直在</button>

13 </div>

14 <div>

15 <button id="show" v‐show="deleteButton">我是删除按钮，我通过v‐show控制显隐</button>

16 <button v‐on:click="deleteButton = true">设置显示</button>

17 <button v‐on:click="deleteButton = false">设置隐藏</button>

18 </div>

19 <div>

20 <button id="if" v‐if="editButton">我是修改按钮，我通过v‐if控制显隐</button>

21 <button v‐on:click="editButton = true">设置显示</button>

22 <button v‐on:click="editButton = false">设置隐藏</button>

23 </div>24 </div>

25 </body>

26 <script src="https://unpkg.com/vue/dist/vue.js"></script>

27 <script type="text/javascr

最低0.47元/天解锁文章

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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