1月12-vue
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!--
1. my.js文件： document.write("outer js");
2. html网页： script标签的src属性引入外部定义的js文件
-->
<script type="text/javascript" src="js/my.js" ></script>
<script>
/*
* 在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网页解耦合,便于修改和维护
* 小结: 在生产环境下(代码全部发完毕,上线),使用方式二
*/
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--引入外部的js文件: 定义的前端框架,提高开发效率-->
<script src="js/b.js" type="text/javascript" ></script>
<script>
/*
* 需求:抽奖系统,随机抽取获奖的幸运用户.
分析思路:
1. 数组: 保存多个用户的姓名
2. 随机索引就可以了: 通过随机索引获取数组中的人名
*/
//1.定义一个数组:保存多个用户的姓名
// 9个人名: 0-8
var arr = ["小闹","小平","小黑","小明"];
//2. 使用外部框架定义好的方法
var index = getRandom(arr);
//3.根据index从数组中获取人名: 人名也是随机的
var name =arr[index];
document.write(name);
</script>
</body>
</html>
- 框架(framework)
== 前端框架: 为开发前端代码服务的
比如: vue.js, node.js,reactive.js 等等
== 后端框架: 为开发后端代码服务的
比如: spring, mybatis, springboot,springcloud
== 自定义框架
比如: 刚才定义的前端框架 a.js
小结:
框架是一个"半成品"的应用, 我们实际开发中,基于框架开发,提高开发效率
需求:
抽奖系统,随机抽取获奖的幸运用户.
=============================================================
2.Vue
-
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 -
框架: vue前端框架,作用: 提高前端代码的开发效率
-
渐进式框架: 基于vue框架进行二次开发,满足我们公司项目的需求
-
视图层: 指的html+css,指的在html进行数据的展示,不关心前端业务逻辑的书写
-
业务逻辑: 可以这样理解在js代码里面写的判断以及循环这些代码.
-
特点: 1. 好学 2. 好用
-
问题: 在网页中如何使用vue? 只需要在html网页里面引入vue.js就可以了
-
- 入门案例时
- 在html引入vue.js
- 在html里面,使用div指定vue的作用范围
- 创建vue对象,vue对象的参数是一个json
- el : 通过选择器,来指定vue在html网页里面的作用范围
- data: 用来在html网页里面展示数据的
- methods: 用来定义函数
- Vue的指令
- 指令: 指的带 v-指令的名称, 不同的指令有不同的作用
- 指令使用的位置: 指令通常使用在标签的属性. 比如:<a 指令>xx
- 常见的指令
- v-html : 给标签设置标签体(等同于innerHTML)
-
v-bind : 给标签的属性赋值(等同于 标签对象.属性= 赋值)
- v-if v-else-if v-else
作用: 如果符合条件,显示数据,反之不显示内容
4. 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>
/*
* 如何使用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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--2.div指定vue的作用范围:-->
<div id="app">
</div>
<!--1,在html引入vue-->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<!--3.创建vue对象-->
<script type="text/javascript">
//1.定义vue的参数: json, 设计语法,定义函数,名称?
var config = {
"el":"#app",
"data":{
"msg":"hello vue"
},
"methods":{
//定义函数
test1(){
document.write("定义方法的test1");
}
},
}
//2.创建vue对象
var vu = new Vue(config);
//3.通过vue调用方法
vu.test1();
</script>
</body>
</html>
<div id="app">
<!--将msg的内容,显示到a标签里面-->
<a href="http://www.tedu.cn" v-html="msg" ></a>
<a v-bind:href="url" >点击我,去达内</a>
</div>
<!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>20">1111</a>
<hr />
<a href="index.html" v-else-if="num>3">2222</a>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
//1.创建对象,传递json参数
// 什么时候加逗号: 只要是key:value,就要加逗号
// json中key: 可以不加引号,建议最好加上引号
// json中value: 除数字以外.必须都得加引号
new Vue({
"el": "#app",
"data":{
"num":10,
"name":"jack"
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div v-if="num>12">1111</div>
<div v-else-if="num>2">22222</div>
</div>
<script type="text/javascript" src="js/vuejs-2.5.16.js"></script>
<script>
//1.创建对象,传递json参数
// 什么时候加逗号: 只要是key:value,就要加逗号
// json中key: 可以不加引号,建议最好加上引号
// json中value: 除数字以外.必须都得加引号
new Vue({
"el": "#app",
"data":{
num:10,
"name":"jack"
},
});
</script>
</body>
</html>