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

泰安网站建设优化网站排名查询软件

news 2025/8/25 11:02:13

泰安网站建设优化,网站排名查询软件,办一家建筑公司怎么样,多品牌网站建设本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖SpringMyBatisSpringMVCSpringBoot等）》，章节分布参考视频教程，为同样学习…

本系列为笔者学习JavaWeb的课堂笔记，视频资源为B站黑马程序员出品的《黑马程序员JavaWeb开发教程，实现javaweb企业开发全流程（涵盖Spring+MyBatis+SpringMVC+SpringBoot等）》，章节分布参考视频教程，为同样学习JavaWeb系列课程的同学们提供参考。

01 什么是 Vue ?

Vue是一套前端框架，用于免除原生JavaScript中的DOM操作，其基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定。

在这里插入图片描述

注：框架是一个半成品软件，是一套可重用的、通用的、软件基础代码模型，基于框架进行开发，更加快捷、更加高效。

02 Vue 快速入门

① 引入vue.js文件

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

② 定义vue对象

<script>new Vue({//定义vue接管的区域el: "#app",//定义数据模型data:{ message: "Hello Vue"}})
</script>

③ 编写视图层

<body><div id="app"><input type="text" v-model="message"> //v-为指令{{message}}</div>
</body>

插值表达式{{}}的内容可以是变量、三元运算符、函数调用以及算术运算。

03 Vue 常用指令

Vue常用指令为HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义，例如：v-if,v-for…

在这里插入图片描述

① v-bind和v-model

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-bind</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><a v-bind:href="url">链接1</a> ♥<input type="text" v-model="url"> ♥</div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{url: "https://www.baidu.com" ♥}})
</script>
</html>

在这里插入图片描述

② v-on

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-on</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><input type="button" value="点我一下" v-on:click="handle()"><input type="button" value="点我一下" @click="handle()"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{},methods: {handle: function(){alert("你点了我一下~");}}})
</script>
</html>

在这里插入图片描述

③ v-if和v-show

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-if与v-show</title><script src="js/vue.js"></script>
</head>
<body><div id="app">年龄<input type="text" v-model="age">经判定,为: ♥<span v-if="age <= 35">年轻人(35及以下)</span><span v-else-if="age > 35 && age < 60">中年人(35-60)</span><span v-else>老年人(60及以上)</span><br><br>年龄<input type="text" v-model="age">经判定,为: ♥<span v-show="age <= 35">年轻人(35及以下)</span><span v-show="age > 35 && age < 60">中年人(35-60)</span><span v-show="age >= 60">老年人(60及以上)</span></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{age: 20 ♥},methods: {}})
</script>
</html>

在这里插入图片描述

④ v-for

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><div v-for="addr in addrs">{{addr}}</div><div v-for="(addr, index) in addrs">{{index}} : {{addr}}</div></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域data:{addrs:["北京", "上海", "西安", "成都", "深圳"]},methods: {}})
</script>
</html>

在这里插入图片描述

04 案例：通过 Vue 完成表格数据的渲染展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-案例</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr>//循环遍历集合<tr align="center" v-for="(user, index) in users"> <td>{{index + 1}}</td> //展示内容用插值表达式{{}}包含<td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1">男</span><span v-else-if="user.gender == 2">女</span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">优秀</span><span v-else-if="user.score >=60">及格</span><span v-else style="color: red;">不及格</span></td></tr></table></div></body><script>new Vue({//接管区域el: "#app",//数据模型data: {users: [{name: "Tom",age: 20,gender: 1,score: 78},{name: "Rose",age: 18,gender: 2,score: 86},{name: "Jerry",age: 26,gender: 1,score: 90},{name: "Tony",age: 30,gender: 1,score: 52}]},methods: {},})
</script>
</html>

在这里插入图片描述

05 Vue 生命周期

生命周期是指一个对象从创建到销毁的整个过程，其包含八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-指令-v-for</title><script src="js/vue.js"></script>
</head>
<body><div id="app"></div>
</body>
<script>//定义Vue对象new Vue({el: "#app", //vue接管区域//数据模型data:{},methods: {},//生命周期方法mounted () {alert("vue挂载完成,发送请求到服务端")}})
</script>
</html>

在这里插入图片描述