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

java求职学习day44

news 2025/10/21 11:23:31

任务一 Vue.js

1.Vue.js

1.1 Vue.js 介绍

1.1.1 Vue.js是什么?

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，

Vue 被设计为可以自底向上逐层应用.

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与

现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。

官方网站: https://cn.vuejs.org/v2/guide/ 作者尤雨溪是中国人.

1.1.2 为甚么使用Vue?

1. 声明式渲染: 前后端分离是未来趋势

2. 渐进式框架: 适用于各种业务需求

3. 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习

1.2 Vue.js 基础

1.2.1 Vue.js的使用

1. 在html页面使用script引入vue.js的库即可使用。

远程CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>

2. Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形

1.2.2 入门程序

创建一个vuetest目录, 并且在目录下创建 01_vue入门程序.html 文件.

代码编写步骤：

1、定义html，引入vue.js

2、定义app div，此区域作为vue的接管区域

3、定义Vue实例，接管app区域。

4、定义model（数据对象）

5、在app中展示数据

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue入门</title>
<!-- 1.创建HTML文件， 引入vue.js 有两种方式-->
<!-- 第一种 引入 vue.js的CDN地址 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">
</script> -->
<!-- 第二种 本地导入 -->
<script src="vue.min.js"></script>
</head>
<body>
<!-- 2. 定义app div，此区域作为vue的接管区域 -->
<div id="app">
<!-- {{}} 双括号是VUE中的差值表达式,将表达式的值输出到HTML页面 -->
{{name}}
</div>
</body>
<script>
//3. 创建vue实例
var VM = new Vue({
//定义 Vue实例挂载的元素节点,表示vue接管该div
el:'#app',
//4.定义model模型数据对象
data:{
name:"哈拉少"
}
});
</script>
</html>

1. {{}}: 插值表达式

1. 插值表达式的作用?

通常用来获取Vue实例中定义的数据(data)

属性节点中不能够使用插值表达式

2. el: 挂载点

1. el的作用 ?

定义 Vue实例挂载的元素节点,表示vue接管该区域

2. Vue的作用范围是什么 ?

Vue会管理el选项命中的元素,及其内部元素

3. el选择挂载点时,是否可以使用其他选择器 ?

可以,但是建议使用 ID选择器

4. 是否可以设置其他的DOM元素进行关联 ?

可以但是建议选择DIV, 不能使用HTML和Body标签

3. data: 数据对象

1. Vue中用到的数据定义在data中

2. data中可以写复杂类型

3. 渲染复杂类型数据的时候,遵守js语法

<body>
<!-- 此区域作为vue的接管区域 -->
<div id="app">
{{name}} <br>
{{school.name}} {{school.mobile}}<br>
<ul>
<li>{{names[0]}}</li>
<li>{{names[1]}}</li>
<li>{{names[2]}}</li>
</ul>
</div>
</body>
<script>
//创建vue实例
var VM = new Vue({
el:'#app',
data:{
name:"雷霆八嘎",
//对象类型数据
school:{
name:"拉钩教育",
mobile:"1001001"
},
//数组类型
names:["小斌","张百万","刘能"]
}
});
</script>

1.2.3 声明式渲染的好处

Vue中的声明式渲染,简单理解就是我们声明数据,Vue帮我们将数据渲染到HTML.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{name}}</h2>
</div>
</body>
<!--
jQuery中，如果 DOM 发生变化, js代码也需要做相应的改变，高耦合 .
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$("#app").append("<h2>Hello Word! !</h2>");
});
</script> -->
<!-- 在用 Vue中，只需要定义好展示数据，并把它放在 DOM 合适的位置就可以. -->
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app", //挂载点
data: {
name: "Hello Word! !",
},
});
</script>
</html>

1.2.4 Vue常用指令

根据官网的介绍，指令是带有 v- 前缀的特殊属性。通过指令来操作DOM元素

1. v-text 指令

作用: 获取data数据, 设置标签的内容.

注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容.

代码示例

<body>
<div id="app">
<!-- v-text 获取data数据,设置标签内容,会覆盖之前的内容体-->
<h2 v-text="message">百度</h2>
<!-- 使用插值表达式,不会覆盖 -->
<h2>{{message}}百度</h2>
<!-- 拼接字符串 -->
<h2 v-text="message+1"></h2>
<h2 v-text="message+'abc'"></h2>
</div>
<script>
var VM = new Vue({
el:"#app",
data:{
message:"Java程序员"
}
})
</script>
</body>
</html>

2. v-html 指令

作用: 设置元素的 innerHTML (可以向元素中写入新的标签)

代码示例

<body>
<div id="app">
<!-- 获取普通文本 -->
{{message}}
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
<!-- 设置元素的innerHTML -->
<h2 v-html="url"></h2>
<h2 v-text="url"></h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
message: "Java程序员",
url: "<a href='https://www.baidu.com'>百度一下</a>",
},
});
</script>

3. v-on 指令

作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法"

绑定的方法定义在 VUE实例的, method属性中

语法格式

<div id="app">
<!-- 使用v-on 绑定click 点击事件 -->
<input type="button" value="点击按钮" v-on:click="方法名">
<!-- 使用 @符号也可以绑定-->
<input type="button" value="点击按钮" @click="方法名">
</div>
var VM = new Vue({
el:"#app",
//通过methods ,专门存放Vue中的方法
methods:{
方法名:function(){
alert("123!")
}
}
})

代码示例

<body>
<div id="app">
<!-- 使用v-on 绑定click 点击事件 -->
<input type="button" value="点击按钮" v-on:click="show">
<!-- 简写 @方式 -->
<input type="button" value="点击按钮" @click="show">
<!-- 双击事件 -->
<input type="button" value="双击击按钮" @dblclick="show">
<!-- 绑定点击事件 -->
<h2 @click="changeFood">{{food}}</h2>
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
food:"麻辣小龙虾"
},
//通过methods ,专门存放Vue中的方法
methods:{
show:function(){
alert("程序员!")
},
changeFood:function(){
//使用this获取
console.log(this.food);
//在VUE中不需要考虑如何更改DOM元素, 重点放在更改数据,数据更新之后,使用数据
的那个元素会同步更新
this.food+="真好吃!";
}
}
})
</script>

4. 计数器案例

1) 编码步骤

1. data中定义数据: 比如 num 值为1

2. methods中添加两个方法: 比如add(递增) ,sub(递减)

3. 使用{{}} 将num设置给 span标签

4. 使用v-on 将add,sub 分别绑定给 + ,- 按钮

5. 累加到10 停止

6. 递减到0 停止

2) 页面准备

<body>
<div id="app">
<!-- 计算功能区域 -->
<div>
<input type="button" class="btn btn_plus">
<span>{{num}}</span>
<input type="button" class="btn btn_minus">
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
//创建VUE实例
var VM = new Vue({
el:"#app",
data:{
num:1
}
})
</script>

3) 案例演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/inputNum.css">
</head>
<body>
<div id="app">
<!-- 计算功能区域 -->
<div>
<input type="button" class="btn btn_plus" @click="add">
<span>{{num}}</span>
<input type="button" class="btn btn_minus" @click="sub">
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
//创建VUE实例
var VM = new Vue({
el:"#app",
data:{
num:1
},
methods: {
add:function(){
//console.log("add");
if(this.num < 10){
this.num++;
}else{
alert("别点啦!最大了!")
}
},
sub:function(){
//console.log("sub");
if(this.num > 0){
this.num--;
}else{
alert("别点啦!最小了!")
}
}
}
})
</script>
</html>

4) 案例总结

创建VUE实例时: el(挂载点) , data(数据) , methods(方法)

v-on 指令的作用是绑定事件,简写为 @

方法中使用this关键字,获取data中的数据

v-text 与 {{}} 的作用都是用来设置元素的文本值

5. v-show指令

作用: v-show指令, 根据真假值,切换元素的显示状态

页面准备

<body>
<div id="app">
<img src="./img/car.gif" alt="">
</div>
</body>
<script src="vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app"
})
</script>

代码示例

<body>
<div id="app">
<input type="button" value="切换状态" @click="changeShow" />
<img v-show="isShow" src="./img/car.gif" />
<img v-show="age > 18" src="./img/car.gif" />
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {
isShow: true,
age: 19,
},
methods: {
changeShow: function () {
//触发方法, 对isShow进行取反
this.isShow = !this.isShow;
},
},
});
</script>

v-show 指令总结

原理是修改元素的display,实现显示或者隐藏

指令后面的内容,最终会解析为布尔值

值为true 显示, 为false 则隐藏

数据改变之后,显示的状态会同步更新

6. v-if 指令

作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

代码示例

<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeShow">
<img v-if="isShow" src="./img/car.gif" alt="">
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
isShow:false
},
methods: {
changeShow:function(){
this.isShow = !this.isShow;
}
}
})
</script>

v-if 指令总结

v-if 指令的作用: 根据表达式的真假切换元素的显示状态

本质是通过操作dom元素,来切换显示状态

表达式为true 元素存在与dom树,为false从dom树中移除

频繁切换使用 v-show ,反之使用v-if

7. v-bind 指令

作用: 设置元素的属性（比如:src,title,class）

语法格式: v-bind:属性名=表达式
<img v-bind:src="imgSrc">
var VM = new Vue({
el:"#app",
data:{
imgSrc:"图片地址"
}
})
v-bind 可以省略，简写为冒号 ：
<img :src="imgSrc">

代码示例

<body>
<div id="app">
<!-- 使用v-bind设置src属性值 -->
<img v-bind:src="imgSrc" alt="">
<!-- 简写 设置title -->
<img :src="imgSrc" alt="" :title="imgTitle">
<!-- 设置class -->
<div :style="{ fontSize: size + 'px'}">v-bind指令</div>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
imgSrc:"./img/lagou.jpg",
imgTitle:"拉钩教育",
size:100
}
})
</script>

v-bind指令总结

v-bind 指令的作用是：为元素绑定属性

完整写法 v-bind:属性名，可以简写为 :属性名

8. v-for 指令

作用: 根据数据生成列表结构

语法结构

<div id="app">
<ul>
<li v-for="item in arr"></li>
</ul>
</div>
var VM = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5],
objArr:[
{name:"tom"},
{name:"jack"}
]
}
})

代码示例

<body>
<div id="app">
<input type="button" value="添加数据" @click="add">
<input type="button" value="移除数据" @click="remove">
<ul>
<!-- 在li标签中获取数组元素 -->
<li v-for="(item,index) in arr">
{{index+1 }}城市: {{item}}
</li>
</ul>
<!-- 使用h2标签显示
v-for 结合 v-bind一起使用
-->
<h2 v-for="p in persons" v-bind:title="p.name">
{{p.name}}
</h2>
</div>
</body>
<script src="./vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
data:{
//普通数组
arr:["上海","北京","天津","杭州"],
//对象数组
persons:[
{name:"尼古拉斯·赵四"},
{name:"莱安纳多·小沈阳"}
]
},
methods: {
add:function(){
//push 添加
this.persons.push({name:"多利安·刘能"})
},
remove:function(){
this.persons.shift();
}
}
})
</script>

v-for指令总结

v-for 指令的作用: 根据数据生成列表结构

数组经常和 v-for结合使用,数组有两个常用方法:

push() 向数组末尾添加一个或多个元素

shift() 把数组中的第一个元素删除

语法是: (item,index) in 数据

item和index 可以结合其他指令一起使用

数组的长度变化,会同步更新到页面上,是响应式的

9. v-on 指令补充

1. 传递自定义参数 : 函数调用传参

2. 事件修饰符: 对事件触发的方式进行限制

代码示例

<body>
<div id="app">
<!-- 函数传参 -->
<input
type="button"
value="礼物刷起来"
@click="showTime(666,'爱你老铁!')"
/>
<!-- 事件修饰符 指定哪些方式可以触发事件 -->
<input type="text" @keyup.enter="hi" />
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: "#app",
data: {},
methods: {
showTime: function (p1, p2) {
console.log(p1);
console.log(p2);
},
hi: function () {
alert("你好吗?");
},
},
});
</script>

总结

事件绑定方法,可以传入自定义参数

定义方法时,需要定义形参,来接收实际的参数

事件的后面跟上 .修饰符可以对事件进行限制

.enter 可以限制触发的按键为回车

事件修饰符有许多使用时可以查询文档

10. MVVM模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式.

MVVM模式将页面,分层了 M 、V、和VM ,解释为：

Model: 负责数据存储

View: 负责页面展示

View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

<body>
<div id="app">
<!-- View 视图部分 -->
<h2>{{name}}</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
//创建的vue实例,就是 VM ViewModel
var VM = new Vue({
el: "#app",
//data就是MVVM模式中的 model
data: {
name: "hello",
},
});
</script>