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

Vue-1-前端框架Vue基础入门之一

news 来源：原创 2025/6/3 19:38:00

文章目录

1 Vue简介
- 1.1 Vue的特性
- 1.2 Vue的版本
2 Vue的基础应用
- 2.1 Vue3的下载
- 2.2 Vue3的新语法
- 2.3 vue-devtools调试工具
3 Vue的指令
- 3.1 内容渲染指令{{}}
- 3.2 属性绑定指令v-bind
- 3.3 事件绑定指令v-on
- 3.4 双向绑定指令v-model
- 3.5 条件渲染指令v-if
- 3.6 列表渲染指令v-for
4 参考附录

Vue是一套用于构建用户界面的前端框架。(1)数据驱动视图。(2)双向数据绑定。(3)MVVM。① 内容渲染指令{{}}② 属性绑定指令v-bind③ 事件绑定指令v-on④ 双向绑定指令v-model⑤ 条件渲染指令v-if⑥ 列表渲染指令v-for。

1 Vue简介

Vue是一套用于构建用户界面的前端框架。

1.1 Vue的特性

(1)数据驱动视图
(2)双向数据绑定
(3)MVVM

(1)数据驱动视图
在使用了vue的页面中，vue会监听数据的变化，从而自动重新渲染页面的结构。当页面对应的后台数据发生变化时，页面会自动重新渲染！
注意：数据驱动视图是单向的数据绑定。

(2)双向数据绑定
在填写表单时，双向数据绑定可以辅助开发者在不操作DOM的前提下，自动把用户填写的内容同步到数据源中。

在网页中，form表单负责采集数据、Ajax负责提交数据。js数据的变化，会自动渲染到页面上。

页面上表单采集的数据发生变化时，会被vue自动获取到，并更新到js数据中。

(3)MVVM
MVVM是vue实现数据驱动视图和双向数据绑定的核心原理。
MVVM指的是Model、View和ViewModel，它把每个HTML页面都拆分成了这三个部分：

Model表示当前页面渲染时所依赖的数据源。
View表示当前页面所渲染的DOM结构。
ViewModel表示vue的实例，它是MVVM的核心。

ViewModel作为MVVM的核心，是它把当前页面的数据源(Model)和页面的结构(View)连接在了一起。

当数据源发生变化时，会被ViewModel监听到，ViewModel会根据最新的数据源自动更新页面的结构。
当表单元素的值发生变化时，也会被ViewModel监听到，ViewModel会把变化过后最新的值自动同步到Model数据源中。

1.2 Vue的版本

当前，vue共有3个大版本，其中：
1.x版本的vue几乎被淘汰，不再建议学习与使用。
2.x 版本的vue是目前企业级项目开发中的主流版本。
3.x 版本的vue于2020-09-19发布，生态还不完善，尚未在企业级项目开发中普及和推广。

2 Vue的基础应用

(1)导入vue.js的script脚本文件。
(2)在页面中声明一个将要被vue所控制的DOM区域。
(3)创建vue实例对象。

2.1 Vue3的下载

官方没有直接提供下载地址，用VUE脚本架或者VITE为初始项目。
按官方说法，使用CDN直接引用服务器上的即可：
在这里插入图片描述
浏览器直接打开上面CDN，默认会打开3.x最新版代码，直接右键另存为.js即可，名字叫vue.global.js。

2.2 Vue3的新语法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app">{{ username }}</div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {username:'lucy'}}}).mount('#app')</script></body>
</html>

在这里插入图片描述
使用了Vue3的新语法Vue.createApp(…).mount(…)，这是Vue 3 Composition API风格的写法。

2.3 vue-devtools调试工具

3 Vue的指令

指令(Directives)是Vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构，Vue中的指令按照不同的用途可以分为如下6大类：
① 内容渲染指令
② 属性绑定指令
③ 事件绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令

3.1 内容渲染指令{{}}

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。
常用的内容渲染指令有如下3个：
(1)v-text，会覆盖元素内默认的值。
(2){{ }}，专门用来解决v-text会覆盖默认文本内容的问题。这种{{ }}语法的专业名称是插值表达式（英文名为：Mustache）。

v-text指令和插值表达式只能渲染纯文本内容。
(3)v-html，把包含HTML标签的字符串渲染为页面的HTML元素。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app"><p v-text="username"></p><p v-text="gender">性别</p><hr><p>姓名：{{username}}</p><p>性别：{{gender}}</p><hr><p v-text="info"></p><p>{{info}}</p><p v-html="info"></p></div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {username:'lucy',gender:'女',info:'<p style="color:red;font-size=18px">我爱学习</p>'}}}).mount('#app')</script></body>
</html>

在这里插入图片描述

3.2 属性绑定指令v-bind

如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。
由于v-bind指令在开发中使用频率非常高，因此，vue官方为其提供了简写形式(简写为英文的:)。
在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持Javascript表达式的运算。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app"><input type="text" v-bind:placeholder="tips"><hr><input type="text" :placeholder="tips"><hr><div>1+2的结果： {{ 1+2 }}</div><div>【{{tips}}】的逆序 ： {{ tips.split('').reverse().join('') }}</div></div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {tips:'请输入你好'}}}).mount('#app')</script></body>
</html>

在这里插入图片描述

3.3 事件绑定指令v-on

(1)vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。
(2)注意：原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup
(3)通过v-on绑定的事件处理函数，需要在methods节点中进行声明：
(4)由于v-on指令在开发中使用频率非常高，因此，vue官方为其提供了简写形式(简写为英文的@)。

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app"><p>count的值为 {{ count }}</p><button v-on:click="add">+1</button><button @click="sub">-1</button><button @click="adds(2)">+2</button></div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {count:0}},methods:{add(){this.count++;},sub(){this.count--;},adds(num){this.count+=num;}}}).mount('#app')</script></body>
</html>

在这里插入图片描述

3.4 双向绑定指令v-model

vue提供了v-model双向数据绑定指令，用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app"><div>{{username}}</div><input v-model="username">双向绑定</imput><hr><input :value="username">单向绑定</input><hr><div>{{city}}</div><br><select v-model="city"><option value="">请选择城市</option><option value="1">兰州</option><option value="2">张掖</option><option value="3">平凉</option></select></div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {username:"lucy",city:""}}}).mount('#app')</script></body>
</html>

在这里插入图片描述

3.5 条件渲染指令v-if

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。
条件渲染指令有如下两个，分别是：
(1)v-if
v-if指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
如果在运行时条件很少改变，则使用v-if较好。
v-if可以单独使用，或配合v-else指令一起使用：

<p v-if="Math.random() > 0.5">随机数大于0.5</p>
<p v-else>随机数小于或等于0.5</p>

(2)v-show
v-show指令会动态为元素添加或移除style=“display: none;” 样式，从而控制元素的显示与隐藏；
如果需要非常频繁地切换，则使用v-show较好。

3.6 列表渲染指令v-for

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for指令需要使用item in items形式的特殊语法，其中：
items 是待循环的数组
item 是被循环的每一项

<!DOCTYPE html>
<html lang="en" ><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app"><ul><li v-for="item in list">姓名是{{item.name}}</li></ul></div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {list:[{id:1,name:'lily'},{id:2,name:'lucy'}],}}}).mount('#app')</script></body>
</html>