23黑马vue

news/2024/10/31 9:29:06/

1、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><!-- 1、引入vue.js --><script src="./js/vue.js"></script>
</head>
<body><!-- 3、定义视图:负责展示 --><div id="app"><input type="text" v-model="message"><!-- v-model:绑定一个数据模型。v-model叫指令! -->{{message}}<!-- 直接在页面展示message数据模型,{{message}}:插值表达式 --></div>
</body>
<script>// 2、定义vue对象new Vue({el: "#app",/* el代表Vue所接管的数据区域 */data:{/* data是定义数据模型 */message:"Hello Vue"}})</script>
</html>

image-20230411221855217

输入框和{{message}}使用的都是同一个数据模型,由于vue的双向绑定,所以输入框的视图发生变化,就会影响数据模型的变化,数据模型的变化会影响视图数据的变化。所以输入框输入什么,后面也跟着显示什么数据。

image-20230411222306359

2、Vue-常用指令

1、v-bind和v-model

image-20230411222635497

<!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>Document</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><a v-bind:href="url">链接1</a><!-- v-bind:href可以简写为:href --><a :href="url">链接2</a><input type="text" v-model="url"></div>
</body>
<script>new Vue({el: "#app",data:{url:"https://www.baidu.com"}})
</script>
</html>

image-20230411225703977

v-model:表单元素有input、textarea、select

2、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>Document</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><button v-on:click="handle()">按钮1</button><button @click="handle()">按钮2</button></div>
</body>
<script>new Vue({//el、data、methods都是对象的属性,对象用{}el: "#app",//vue接管区域data:{},methods:{handle:function(){alert("你点了我一下....");}}})
</script>
</html>

image-20230411230440539

3、v-if&v-show&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"><script src="js/vue.js"></script><title>v-if&v-show&v-for</title>
</head>
<body><div id="app"><input type="text" v-model="age">年龄:{{age}},经判定为:<span v-if="age <= 35">年轻人</span><span v-else-if="age > 35 && age < 60">中年人</span><span v-else>老年人</span><br/><input type="text" v-model="age">年龄:{{age}},经判定为:<span v-show="age <= 35">年轻人</span><span v-show="age > 35 && age < 60">中年人</span><span v-show="age >= 60">老年人</span></div></body>
<script>new Vue({el : "#app",data:{age:20},methods:{}})
</script>
</html>

image-20230413232840322

image-20230413233749483

可以看到,用v-show时,三个span标签都会被渲染,但是另外两个的display为none。

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>Document</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><div v-for="(addr,index) in addrs"><table border="1"><tr><td>{{index+1}}位</td><td>{{addr}}</td></tr></table></div></div>
</body>
<script>new Vue({el : "#app",data:{addrs:['北京','上海','山东','济南']},methods:{}})
</script>
</html>

image-20230413233954435

4、v-指令-案例

image-20230413235831104

<!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>Document</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><!-- border="1" cellspacing="0" width="60%" --><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr  v-for="(userifm,index) in user"><td>{{index+1}}</td><td>{{userifm.name}}</td><td>{{userifm.age}}</td><td v-if="userifm.gender==1"></td><td v-if="userifm.gender==2"></td><td>{{userifm.score}}</td><td v-if="userifm.score >=85 ">优秀</td><td v-else-if="userifm.score >=60 ">及格</td><td v-else style="color: red;">不及格</td></tr></table></div></body>
<script>new Vue({el: "#app",data:{user:[{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:"Jim",age:22,gender:1,score:59}]},methods:{}})
</script>
</html>

image-20230414002208000

5、vue- 生命周期

image-20230414002509010

image-20230414002838099

mounted方法主要就是用来发送请求到服务端来获取或者加载数据。

小结

image-20230414003047672


http://www.ppmy.cn/news/42055.html

相关文章

第七天sql优化篇

一、查询SQL尽量不要使用select *&#xff0c;而是select具体字段 因为select * 进行查询时&#xff0c;很可能就不会使用到覆盖索引了&#xff0c;就会造成回表查询 select stu.name from student stu; 二、如果知道查询结果只有一条或者只要最大/最小一条记录&#xff…

基于多种算法实现鸢尾花聚类

基于多种聚类算法实现鸢尾花聚类 描述 聚类&#xff08;Clustering&#xff09;属于无监督学习的一种&#xff0c;聚类算法是根据数据的内在特征&#xff0c;将数据进行分组&#xff08;即“内聚成类”&#xff09;&#xff0c;本任务我们通过实现鸢尾花聚类案例掌握Scikit-l…

day-006-哈希表-有效的字母异位词、两个数组的交集、快乐数、两数之和

什么时候想到用哈希法&#xff0c;当我们遇到了要快速判断一个元素是否出现集合里的时候&#xff0c;就要考虑哈希法。 242.有效的字母异位词 建议&#xff1a; 这道题目&#xff0c;大家可以感受到 数组 用来做哈希表 给我们带来的便利之处。 题目链接/文章讲解/视频讲解 …

Python 小型项目大全 1~5

一、百吉饼 原文&#xff1a;http://inventwithpython.com/bigbookpython/project1.html 在百吉饼这种演绎逻辑游戏中&#xff0c;你必须根据线索猜出一个秘密的三位数。该游戏提供以下提示之一来响应您的猜测&#xff1a;"Pico"&#xff0c;当您的猜测在错误的位置有…

九龙证券|什么是庄家洗盘和出货?各有什么特征?

在股市独占的是庄家&#xff0c;在市场上独占的是商人。庄家的存在便是为了把资金投入市场变成本钱&#xff0c;使用本钱获取最大赢利。庄家的各类方法也是为了不惜一切代价获取最大赢利。今天我们来了解什么是庄家洗盘和出货&#xff1f;各有什么特征&#xff1f;下面就为大家…

【linux】——进程和计划任务管理

文章目录1.进程 VS 线程1.1 程序和进程的关系1.2 线程1.3 进程和线程的关系2.查看进程2.1 查看进程信息ps2.2 查看进程信息top2.3 查看进程信息pgrep2.4 查看进程树pstree3.控制进程3.1 进程的启动方式3.2 进程的前后台调度3.3 终止进程的运行kill3.4 终止进程的运行pkill4.计划…

Java同学入职环境安装全讲解

一、简述 最近入职一家新公司&#xff0c;拿到新电脑&#xff0c;那肯定有绕不开的装开发环境流程。下面我就从安装jdk、maven、git、idea四个方面讲解&#xff08;主要提供各个软件官方的下载网址&#xff0c;因为百度搜出来的东西大家懂的都懂我就不多说了&#xff09;。如果…

门店零售系统有哪些功能模块?能带来哪些帮助?

门店零售系统是一种用于管理门店销售、库存、采购等业务的软件系统&#xff0c;可以帮助门店提高管理效率、降低操作风险、优化运营决策&#xff0c;从而增强市场竞争力和顾客满意度。 一、门店零售系统的4大功能 1、商品管理 该模块主要用于管理门店的商品信息&#xff0c;包…