VueJS快速入门与实战指南-优快云博客

本文链接：https://blog.youkuaiyun.com/Java_x1/article/details/121158959

本文介绍了VueJS，一个渐进式的JavaScript框架，专注于视图层，尤其强调数据双向绑定。通过实例展示了VueJS的常用指令，如v-text、v-html、v-bind、v-model，以及如何创建Vue实例。文章还提到了VueJS的MVVM模式，以及Vue对象在MVVM中的作用。最后，概述了VueJS的生命周期和axios在Vue中的应用。

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

什么是VueJS

渐进式：循序渐进，vue是一个功能非常强大的前端js框架，其中包含了很多组件(A B C D E)，因此，在使用vue时，可以根据用户的需要循序渐进的引入到项目中使用。

框架：类库功能比较完善软件的半成品

Vue.js是一个渐进式JavaScript 框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定到组合的视图组件(数据双向绑定view-model)。它不仅易于上手，还便于与第三方库或既有项目整合。

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图UI 和业务逻辑分开. MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。在代码编写中，也可以理解为就是我们创建的vue对象。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷.

vue概念：VUE是一个渐进式的JavaScript框架，主要用于实现数据和视图的绑定。
MVVM模型：model view viewModel 通过VM可以实现视图和模型的双向数据绑定，VM就是可以理解为编码中vue对象。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">


{{message}}
{{num+1}}
{{flag?"成功":"失败"}}

</div>

<script>
var vm = new Vue({
       //声明vue使用的区域
       el:"#app",
       //声明数据
       data:{
       message:"hello vue",
num:100,
flag:true
       },
       //声明函数
       methods:{

}
});
</script>
</body>
</html>

data ：用于定义数据。

methods：用于定义的函数，可以通过 return 来返回函数值。

4.小结

vue使用步骤：

将vue.js加入到项目
在html页面中引入vue的js文件
在script脚本中创建vue对象声明数据和函数以及指定vue使用区域

<script>
var vm = new Vue({
//指定vue使用的区域不可以指定为body
el:"#app",
//声明数据 1.可以封装请求参数 2.接收响应数据
data:{
message:"Hello Vue",
flag:true,
num:100
},
//声明函数
methods: {

}
});
</script>

VueJS 常用系统指令

@click
@keydown
@mouseover

3.讲解

@click

说明: 点击事件(等同于v-on:click)

【需求】：点击按钮事件，改变message的值

@keydown

说明: 键盘按下事件(等同于v-on:keydown)

【需求】：当文本输入框有键按下，在控制台输出"键盘按下"。

@mouseover

说明:鼠标移入区域事件(等同于v-on:mouseover)

【需求1】：给指定区域大小的div中添加样式，鼠标移到div中，弹出窗口。

知识点- v-text与v-html

v-text：输出文本内容，不会解析html元素 js：innerText jQuery：text()

v-html：输出文本内容，会解析html元素 js：innerHTML jQuery：html()

知识点-v-bind和v-model【重点】

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">

</div>

}
});
</script>
</body>
</html>

v-model 【非常重要】

用于数据的绑定,数据的获取

【需求】：使用vue赋值json(对象)数据，并显示到页面的输入框中（表单回显）. 点击按钮，改变json数据，验证同时输入框的内容也发生改变。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">

username：<input type="text" v-model="user.username"><br>
password：<input type="text" v-model="user.password"><br>

{{user}}<br>

</div>

}
});
</script>
</body>
</html>

v-for【重点】

用于操作array/集合，遍历

语法: v-for="(元素,index) in 数组/集合"

vue常用指令小结：

v-on：事件绑定简写@ <标签 @事件名称="函数()"></标签>
v-text：输出文本内容到标签体中不会解析html标签 <标签 v-text="..."></标签>
v-html：输出文本内容到标签体中会解析html标签 <标签 v-html="..."></标签>
v-bind：为html标签自带属性绑定数据简写: <标签 :标签属性="..."></标签>
v-model：用于输入框实现数据双向绑定 <标签 v-model="..."></标签>
v-for：遍历数据 <标签 v-for="(元素,索引) in 数组|集合">{{元素}}</标签>
v-if：控制标签显示和隐藏 <标签 v-if="boolean类型的值"></标签>
v-show：控制标签显示和隐藏 <标签 v-show="boolean类型的值"></标签>

vue生命周期：指的就是vue实例从创建到销毁的过程！【自动】
生命周期函数==钩子函数
   初始化：
       new Vue():开始创建vue实例
       beforeCreate：vue实例创建完成之前，初始化了vue中的事件和生命周期函数
       created：vue实例创建完成初始化data和methods
           如果我希望页面一打开就加载数据在crated时向后台发起请求就是最早的时机因为在这里可以进行数据的绑定
   服务：
       beforeMount：挂载之前页面模板已经编译完成，但是数据data还没有填充
       mounted：挂载完成数据已经填充到了页面
       beforeUpdate：更新之前
       updated：更新完成
   销毁：
       当调用了 vm.$destroy() 开始销毁vue实例
       beforeDestroy：销毁之前
       destroyed：销毁完成

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

简单理解：axios就是vue中提供实现ajax请求的库，使用它就可以发送ajax请求。

注: Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

简单理解：axios就是vue中提供实现ajax请求的库，使用它就可以发送ajax请求。

注: Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。