当前位置：首页 > ai >正文

vue入门

ai 2025/7/13 10:52:37

Vue入门

0.导入

0.1什么是Vue

Vue.js，通常称为Vue，是一个用于构建用户界面的渐进式JavaScript框架。Vue的设计目标是通过简单的API实现响应式的数据绑定和组合的视图组件。它的核心库专注于视图层，易于学习且易于与其他库或现有项目集成。同时，Vue也完全能够支持开发复杂的单页应用（SPA）。

0.2为什么要学Vue?

原生JS频繁的DOM操作，视图层和数据层混在一起，导致视图层渲染效率大大降低，代码可读性差。

Vue采用MVVM模型，数据和视图分离，视图渲染效率高，速率快。
Vue将数据和视图层分离。数据更新之后，视图会自动的刷新。
微信小程序等快应用，开发压缩包要求2M，脚本包越小越好！
Vue渐进式的框架：意思就是你不需要学习完Vue的全部知识。
现在企业里主流，一线大厂面试必会技术栈！

MVVM  是一种软件架构模式，用于将应用程序的用户界面（View）与数据和业务逻辑（Model）进行分离。MVVM  的核心思想是通过一个称为 ViewModel 的中间层来连接 View 和 Model。

M：Model（模型）代表应用程序的数据和业务逻辑。它负责数据的获取、处理和存储，以及定义应用程序的行为。
V：View（视图）代表应用程序的用户界面。它负责展示数据和与用户进行交互，通常由 HTML、XML 或其他类似的标记语言编写。
VM：ViewModel（视图模型）它是 View 和 Model 之间的连接层。ViewModel 处理用户界面上的事件和输入，并将它们转化为对 Model 的操作。它还负责从 Model 中获取数据，并将数据绑定到 View 中，使得数据的变化能够自动更新到用户界面上。

0.3面试题：vue特点

易用：在有HTMLCSSJavaScript的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。
采用MVVM模型，数据和视图分离，视图渲染效率高，速率快。
代码可读性高。视图和数据逻辑耦合性低。

0.4 Vue要学习什么

了解Vue。
快速入门Vue，熟练的用Vue对象，操作属性和数据。
掌握Vue常用指令，并熟练用指令写一些案例。
掌握Element的基本使用，熟悉Element官网插件和样式，让我们的前端开发飞起来。
掌握用Element布局，编写学生列表网页综合案例。

1.快速入门

Vue的使用可以分为三步：

1.新建 HTML 页面，引入 Vue.js文件

<script src="js/vue.js"></script>

2.编写视图，创建带有id属性的标签

<div id="app"><input name="username" v-model="username" >{{username}}
</div>

{{}} 是 Vue 中定义的 插值表达式 ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。

3.在JS代码区域，创建Vue核心对象，进行数据绑定

new Vue({el: "#app",data:{username: ""}，methods:{}
});

创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
- el ：用来指定哪儿些标签受 Vue 管理。该属性取值 #app 中的 app 需要是受管理的标签的id属性值

data ：用来定义数据模型
- methods ：用来定义函数。这个我们在后面就会用到

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
//2.编写视图，创建带有id属性的标签
<div id="app"><input v-model="username"><!--插值表达式-->{{username}}
</div>
//1.新建 HTML 页面，引入 Vue.js文件
<script src="js/vue.js"></script>
<script>//3. 创建Vue核心对象,进行数据绑定new Vue({el:"#app",data{  // data() 是 ECMAScript 6 版本的新的写法return {username:""}}});</script>
</body>
</html>

2.Vue 常用指令

2.1 指令介绍

指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
常用指令

指令						作用
v-html					把文本解析为HTML代码
v-bind					为HTML标签绑定属性值
v-if					条件性的渲染某元素，绑定为true时渲染，否则不渲染
v-else 					条件性的渲染某元素，绑定为true时渲染，否则不渲染
v-else-if				条件性的渲染某元素，绑定为true时渲染，否则不渲染
v-show					根据条件展示某元素，区别在于切换的是display属性的值
v-for					列表渲染，办理容器的元素或者对象的属性
v-on					为HTML标签绑定事件
v-model					在表单元素上创建双向数据绑定

2.2 表单绑定

表单绑定

v-model：在表单元素上创建双向数据绑定。
双向数据绑定

更新data数据，页面中的数据也会更新。
更新页面数据，data数据也会更新。
MVVM模型(ModelViewViewModel)：是MVC模式的改进版

在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。
将Model和View关联起来的就是ViewModel，它是桥梁。
ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。

2.3 文本插值

v-html：把文本解析为 HTML 代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本插值</title>
</head>
<body><div id="div"><div>{{msg}}</div><div v-html="msg"></div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{msg:"<b>Hello Vue</b>"}});
</script>
</html>

效果：

<b>Hello Vue</b>
Hello Vue(有加粗效果)

2.4绑定属性

v-bind：为 HTML 标签绑定属性值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定属性</title><style>.my{border: 1px solid red;}</style>
</head>
<body><div id="div"><a v-bind:href="url">百度一下</a><br><a :href="url">百度一下</a><br><div :class="cls">我是div</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{url:"https://www.baidu.com",cls:"my"}});
</script>
</html>

效果：

2.5 条件渲染

v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>条件渲染</title>
</head>
<body><div id="div"><!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 --><div v-if="num % 3 == 0">div1</div><div v-else-if="num % 3 == 1">div2</div><div v-else="num % 3 == 2">div3</div><div v-show="flag">div4</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{num:1,flag:false}});
</script>
</html>

2.6 列表渲染

v-for：列表渲染，遍历容器的元素或者对象的属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表渲染</title>
</head>
<body><div id="div"><ul><li v-for="name in names">{{name}}</li><li v-for="value in student">{{value}}</li></ul></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{names:["张三","李四","王五"],student:{name:"张三",age:23}}});
</script>
</html>

效果：

2.7 事件绑定

v-on：为 HTML 标签绑定事件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件绑定</title>
</head>
<body><div id="div"><div>{{name}}</div><button v-on:click="change()">改变div的内容</button><button v-on:dblclick="change()">改变div的内容</button><button @click="change()">改变div的内容</button></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{name:"山东高合"},methods:{change(){this.name = "合齐天下"}}});
</script>
</html>

绑定事件：

@mouseenter=“enter(index)” 鼠标移入
@mouseleave="leave()"鼠标移出
@focus 获得焦点
@blur失去焦点
@keyupj键盘键入
…

注意：

小伙伴们，注意v-on:click="change()"与@click="change()"都是指绑定事件哟~
:class=“cla” 和 v-bind:class=“cla” 都是指绑定属性呦~

2.8 总结

指令：是带有v-前缀的特殊属性，不同指令具有不同含义。
文本插值
v-html：把文本解析为HTML代码。
绑定属性
v-bind：为HTML标签绑定属性值。

:属性
条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。
列表渲染
v-for：列表渲染，遍历容器的元素或者对象的属性。
事件绑定
v-on：为HTML标签绑定事件。

@click
表单绑定
v-model：在表单元素上创建双向数据绑定。
M V VM模型

扩充

面试题：mvc和mvvm的区别和应用场景

答：MVC 是 Model View Controller 的缩写

Model：模型层，是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。

View：视图层，用户界面渲染w图是依据模型数据创建的。

Controller：控制器，数据模型和视图之间通信的桥梁，通常控制器负责从事图读取数据，控制用户输入，并向模型发送数据。

**MVC的特点：**实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。就是将模型和视图之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。

MVC的优点：

耦合度低，视图层和业务层分离
重用度高
生命周期成本低
可维护性高
部署快
MVC的缺点：

不适合小型项目的开发（架构分层复杂）
**MVC的应用：**主要用于中大型项目的分层开发。

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。

Model：模型，指的是后端传递的数据。
View：视图，指的是所看到的页面。
ViewModal：视图模型，mvvm模式的核心，它是连接view和model的桥梁。主要用来处理业务逻辑

MVVM的优点：

MVVM模式的主要目的是分离页面视图（View）和页面模型（Model）。