CGB2111Vue学习第一天

最新推荐文章于 2024-07-26 20:46:33 发布

蒄鱼

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量221

点赞数

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

本文链接：https://blog.csdn.net/qq_43129111/article/details/122460290

版权

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript

在html网页里面引入javascript
方式一:
html网页里面,书写script标签,里面定义js代码
缺点:
1.js代码不能重复使用(不能在其它网页里面使用)
2.html标签和js代码耦合了,后期不便于修改和维护
优点:
html网页和js代码写在一起,便于阅读和调试.
小结:在开发环境下(代码处于编码阶段),使用方式一.
方式二:
1.在外部定义一个js文件
2.在html网页里面,通过script标签的src属性引入外部的js文件
缺点:
js代码是单独的一个文件,所以在html阅读起来麻烦.
优点:
1.js代码可以重复使用
2.js代码和html网页解耦合,便于修改和维护
小结:在生产环境下(代码全部发完毕,上线),使用方式二

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="demo7.js"></script>
		<script>
			 var arr = ["小闹","小平","小黑","小明","小红","二黑","大孬","xxx","狗蛋"];
			 var index = getRandom(arr);
			 var name = arr[index];
			 document.write(name);
		</script>
	</body>
</html>

function getRandom(arr){
	var n1 = Math.random();
	var arrLe =arr.length;
	var n2 = n1 * arrLe;
	var n3 = Math.floor(n2);
	return n3;
}

需求:抽奖系统,随机抽取获奖的幸运用户.
分析思路:

数组: 保存多个用户的姓名
随机索引就可以了: 通过随机索引获取数组中的人名

Vue

是一套用于构建用户界面的渐进式框架
框架：vue前端框架，用处：提高前端代码的开发效率
渐进式框架: 基于vue框架进行二次开发,满足我们公司项目的需求

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

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

特点: 1. 好学 2. 好用

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

常用的指令

v-html : 给标签设置标签体(等同于innerHTML)

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

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

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

条件指令的区别
v-if v-else-if v-else:
条件不成立时,删除标签 v-show : 条件不成立时,使用dispaly:none隐藏标签

<!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"></script>
		<script>
			//3.定义vue对象的参数
			var config = {
				"el":"#app",
				"data":{
					"msg":"hello vue!",
				}
			}
			//4.创建vue对象
			new Vue(config);
		</script>
	</body>
</html>

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

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

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

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

蒄鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CGB2111Vue学习第一天

JavaScript在html网页里面引入javascript方式一:html网页里面,书写script标签,里面定义js代码缺点:1.js代码不能重复使用(不能在其它网页里面使用)2.html标签和js代码耦合了,后期不便于修改和维护优点:html网页和js代码写在一起,便于阅读和调试.小结:在开发环境下(代码处于编码阶段),使用方式一.方式二:1.在外部定义一个js文件2.在html网页里面,通过script标签的src属性引入外部的js文件缺点:js代码是单独的一个文件,所
复制链接

扫一扫

专栏目录