Javaweb第四章---Vue和指令(入门必看

武飞扬头像

tq02

2024-01-22 帮助3人

目录

一.Vue是什么？

💖Vue的概念

💖 Vue代码创建

三.Vue生命周期

🎁欢迎各位→点赞👍 收藏⭐ 评论📝 关注✨

🎥学习专栏： C语言 JavaSE MySQL基础

一.Vue是什么？

💖Vue的概念

Vue 是一套前端框架，可以免除JavaScript的DOM操作，使代码更加简洁

Vue的实现是基于MVVM思想，实现数据的双向绑定。

框架是一个半成品软件，是一套可重用的、通用的、软件基础代码模型

Vue文件下载及其MVVM思想的介绍：http://t.csdn.cn/IGTO7

💖 Vue代码创建

使用前需要映入Vue.js文件：

<script src="https://blog.csdn.net/m0_74097410/article/details/ Vue.js文件路径 " ></script>

Vue语法格式：new Vue（{

el:" #id名 ",

//data定义数据模型 data:{

数据模型

}

}）

注：在JS区域中创建,并且el的定义相当于CSS的id选择器

使用格式：

<div id=" id名 "> 代码 {{数据模型}} </div>

<html lang="en">
<head>
<title>Vue复习</title>
<script src="vue.js"> </script> //引入vue.js文件
</head>
<body>
<div id="app"> //v-model下述有讲解
<input type="text" v-model="message">
{{message}} //显示message的值
</div>
</body>
<script>
//创建Vue
new Vue({
el:"#app",
data:{
message:"Hello world"
}
})
</script>

学新通

而如代码中，通过v-model指令，text文本框和数据模型data，完成了双向绑定，文本框的值和 message保持一致

二.指令

由上面，我们可以发现一个新奇的东西，v-model，这便是指令。

指令：HTML标签上带有v-前缀的特殊属性，不同指令不同含义。

常用指令：

指令	作用
v-bind	为HTML标签绑定属性值，如设置 href,css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else-if
v-else
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

v-bind

为标签绑定属性值，可是有人会问，我们不需要这个也可以绑定啊，可是这是动态绑定诶，

使用时，可以直接省略v-bind

学新通

例如：以上代码，当游戏链接出错时，未使用指令，需要一个一个去修改；使用了指令，则可以直接在data数据模型一键修改。

v-on

为HTML标签绑定事件，在Vue当中创建methods方法。

<head>
<title>Vue复习</title>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<input type="button" value="按钮" v-on:click="chage()">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
message:"Hello world",
url:"http://t.csdn.cn/w5tHw"
},
methods: {
chage:function(){
alert("执行方法");
}
}
})
</script>

学新通

注：事件不再是onclick，而是click，去掉了on。

v-if、v-else-if、v-else

这三个配套使用，用法与 Java中的if、else if、else 一致，一般用于<span>标签中，是进行条件判断。当成立时，则会显露出<span> 文本 </span>中的文本内容。

注：如果不成立，浏览器检查中的元素是不存在该行代码的。

<head>
<title>Vue复习</title>
<script src="vue.js"> </script>
</head>
<body>
<div id="app">
<span v-if="age<18">未成年</span>
<span v-else-if="age>=18&&age<=40">青年</span>
<span v-else>中年</span>
</body>
<script>
new Vue({
el:"#app",
data:{
age:18;
}
})
</script>

学新通

学新通

v-show

作用与v-if等指令一样，但是会显示出不符合条件的代码行

学新通

v-for

循环，遍历，当数据模型data 里含有数组时，可以使用

语法格式：<div v-for=" 变量名 in 数组名">{{ 变量名 }}</div>

获取索引：<div v-for=" (变量名,下标名） in 数组名"> {{下标值 1}}:{{ 变量名 }} </div>

三.Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程。

Vue生命周期有8个阶段：每触发一个阶段便会自动执行一个生命周期的方法,也称钩子方法。

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
update	更新后
beforeDestory	销毁前
destory	销毁后

Vue生命周期完整过程:

学新通

代码示例：

<script>
new Vue({
e1:"#app",
data:{
//代码
}，
mounted(){
//挂载完成时，执行的代码
}
updated(){
//更新后，执行的代码
}
.....
})
</script>

学新通

注：Java程序员只要掌握mounted()方法.

结：Vue主要依赖各种指令，生命周期每一个阶段都有其对应的执行方法。

----------懒惰的tq02

这篇好文章是转载于：学新通技术网

版权申明：本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
本站站名：学新通技术网
本文地址： /boutique/detail/tanhefhcbb

系列文章

同类精品