03.VUE入门

VIP文章 guan_xfeng

已于 2022-04-28 18:40:22 修改

阅读量500

点赞数

分类专栏：前端基础文章标签： vue.js 前端 javascript

于 2022-04-28 18:39:56 首次发布

本文链接：https://blog.csdn.net/guan_xfeng/article/details/124452556

版权

框架:

前端框架:为开发前端代码服务的

比如:vue.js node.js reactive.js 等等

后端框架:为开发后端代码服务的

比如:spring,mybatis,springboot,springcloud

自定义框架

比如:刚刚定义的前端框架

小结:

框架是一个"半成品"的应用,我们实际开发中,基于框架开发,提高开发效率

需求:抽奖系统,随机抽取获奖的幸运用户

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/b.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*需求:抽奖系统,随机抽取获奖的幸运用户
			分析思路
			1.数组:保存多个用户的姓名
			2.随机索引就可以了:通过随机索引获取数组中的人名*/
			
			//1.定义一个数组:保存多个用户的姓名
			var arr = ["小闹","小平","小黑","小明","小红","二黑","大孬","ddd","aaa","666"];
			//2.使用外部框架定义好的方法
			var index = getRandom(arr.length);
			//3.根据index从数组中获取人名:人名也是随机的
			var name = arr[index];
			document.write(name);
		</script>
	</body>
</html>

外部的js文件:

//定义方法:返回一个随机数0-b
function getRandom(b){
   
	//1.调用Math对象的random
	var n1 = Math.random();//[0,1)
	//2.n1*b
	var n2 = n1*b;//[0,b)
	//3.0-b
	var n3 = Math.floor(n2);
	//返回
	return n3;
}

Vue框架:

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代的工具链以及各种支持类库,结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

框架:vue前端框架,作用:提高前端代码的开发效率

渐进式框架:基于vue框架进行二次开发,满足我们公司项目的需求

视图层:指的html+css,指的在html进行数据的展示,不关心前端业务逻辑的书写

业务逻辑:可以理解在js代码里面写的判断以及循环这些代码

特点:1.好学 2.好用

问题:在网页中如何使用vue?只需要在html网页里面引入vue.js就可以了

Vue入门案例:

1.在html引入vue.js

2.在html里面,使用div指定vue的作用范围

3.创建vue对象,vue对象的参数是一个json

el:通过选择器,来指定vue在html网页里面的作用范围

data:用来在html网页里面展示数据的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 2.div指定vue的作用范围 -->
		<div id="app">
			{
  {msg}}
		</div>
		<!-- 1.在html引入vue.js -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*如何使用vue
			1.在网页里面引入vue.js
			2.在html网页里面指定vue的作用范围,通常情况下使用div指定范围
			3.创建vue对象,给vue对象赋值,那个值就是一个json数据*/
			
			//3.定义vue对象的参数
			var config = {
     
				"el":"#app",
                "data":{
     "msg":"hello vue!",},
			}
			//4.创建vue对象
			new Vue(config);
		</script>
	</body>
</html>

Vue入门案例(升级,vue里面定义方法)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 2.div指定vue的作用范围 -->
		<div id="ddd">
		</div>
		<!-- 1.在html引入vue -->
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 3.创建vue对象 -->
		<script type="text/javascript">
			/*4.定义vue的参数:json*/
			// var config = {"el":"#ddd",
			// "data":{
     
			// 	"msg":"hello vue"
			// 	},
			// 	"methods":{
     
			// 		//定义方法
			// 		test1(){
     
			// 			document.write("定义方法的test1");
			// 		}
			// 	},
			// }
			
			var config = {
     "el":"#ddd",
                          
			"data":{
     "msg":"hello vue"},
			
			"methods":{
     test1(){
     
				
				document.write("定义方法的test1");}}
			,}
			
			//2.创建vue对象
				var vu = new Vue(config);
				//3.通过vue对象调用方法
				vu.test1();
		</script>
	</body>
</html>

Vue的指令:

指令:指的带v-指令的名称,不同的指令有不同的作用

指令使用的位置:指令通常使用在标签的属性

常见的指令:

1.v-html:给标签设置标签体 ( 效果等同于innerHTML ,也就是设置围堵标签的文本,自闭标签没有文本体)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 将msg的内容,显示到a标签里面 -->
			<a href="https://www.baidu.com/" v-html="msg"></a>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//1.创建对象,传递json参数
			// 什么时候加逗号:只要是key:value,就要加逗号
			new Vue({
     
				"el":"#app",
				"data":{
     
					"msg":"点击我,去百度",
				},
				
			});
		</script>
	</body>
</html>

2.v-bind:给标签的属性赋值(等同于标签对象.属性 = 赋值)

//方式一:<a v-bind:href="url">点击我,去百度</a>//推荐使用方式一
//方式二:<a :href="url">点击我,去百度</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- bind:给标签的属性赋值,比如a标签,属性href -->
			<a v-bind:href="url">点击我,去百度</a>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//1.创建对象,传递json参数
			// 什么时候加逗号:只要是key:value,就要加逗号
			new Vue({
     
				"el":"#app",
				"data":{
     
					"url":"https://www.baidu.com/",
				},
				
			});
		</script>
	</body>
</html>

3.v-if v-else-if v-else(如果条件不成立,删除标签-浏览器f12查看body可以看到)

作用:如果符合条件,显示数据,反之不显示内容

4.v-show(如果条件不成立,使用css样式隐藏标签)

作用:如果符合条件,显示数据,反之不显示内容

条件指令的区别:

v-show(如果条件不成立,使用css样式隐藏标签);

v-if v-else-if v-else(如果条件不成立,删除标签-浏览器f12查看body可以看到)

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 使用v-if指令:条件表达式,用比较运算符,可以用逻辑运算符
			 num>2:条件成立,返回的结果是true
			 num>20:条件不成立返回的结果是false,不显示数据-->
			<a href="index.html" v-if="num>2">点击访问主页index.html</a>
			<hr/>
			<a href="index.html" v-else-if="num>20">点击访问主页222index.html</a>
			<hr/>
			<a href="index.html" v-show="num>20">点击访问主页222index.html</a>
			
			
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//1.创建对象,传递json参数
			// 什么时候加逗号:只要是key:value,就要加逗号
			//json中key可以不加引号,也可以加引号
			//json中value除数字外,必须加引号
			new Vue({
     
				"el":"#app",
				"data":{
     
					"num":10,
					"name":"jack",
				},
				
			});
		</script>
	</body>
</html>

5.v-on指令

方式一:v-on:事件名称=“方法名称()”

方式二:@:事件名称=“方法名称()”

注意:

事件名称不要加on:

比如:

方式一:<button v-on:click="test1()">ccc</button>
方式二:<button @click="test1()">ccc</button>

事件名称赋值:方法时,小括号也可以省略不写.建议写上小括号

比如:<button @click="test">ccc</button>

6.列表指令(循环指令)

v-for="数组中的每个元素 in 数组名称 "

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 2.指定vue的范围 -->
		<div id="app">
			<ul>
				<li v-for="ele in names">{
  {ele}}</li>
			</ul>
			
		</div>
		<!-- 1.引入外部vue.js -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8">

最低0.47元/天解锁文章

guan_xfeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
03.VUE入门

框架:前端框架:为开发前端代码服务的比如:vue.js node.js reactive.js 等等后端框架:为开发后端代码服务的比如:spring,mybatis,springboot,springcloud自定义框架比如:刚刚定义的前端框架小结:框架是一个"半成品"的应用,我们实际开发中,基于框架开发,提高开发效率需求:抽奖系统,随机抽取获奖的幸运用户<!DOCTYPE html><html> <head> <meta cha
复制链接

扫一扫