1月13-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隐藏标签 - 事件指令:
方式一: v-on:事件名称=“函数名称()”
方式二: @事件名称=“函数名称()”
注意:
1.事件名称不要加on
比如: ccc
<button @click=“test1()”>ccc
2.事件名称赋值:函数时,小括号也可以省略不写.建议写上小括号
比如:<button @click=“test1”>ccc
6.列表指令(循环指令)
v-for=“数组中的每个元素 in 数组名称”
比如:
String[] names={“a”,“b”,“c”};
普通for循环:
for(int i=0;i<names.length;i++){}
增强for循环
for(String element : names){}
7. 双向绑定指令
概述:
指的改变vue里面data选项的数据,会影响html网页中的数据
改变html网页中的数据,同时也会改变vue里面data选的数据
语法:
v-model指令
<!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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--第2步:指定vue的范围-->
<div id="app">
<button v-on:click="test1()">方式一绑定</button>
<button @click="test2()">方式二绑定</button>
</div>
<!--第1步,引入vue.js-->
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
//3.创建vue对象
// json参数里面: el, data, methods 都是固定的
new Vue({
"el":"#app",
"methods":{
//4.方式一绑定
test1:function(){
console.log(1111);
},
//5.方式二绑定
test2(){
console.log(2222);
},
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--第2步:指定vue的范围-->
<div id="app">
<ul>
<li v-for="ele in users">{{ele.id}},{{ele.name}}</li>
</ul>
</div>
<!--第1步,引入vue.js-->
<script type="text/javascript" src="js/vue.js" ></script>
<!--
第3步: 创建vue对象
-->
<script type="text/javascript">
new Vue({
"el":"#app",
"data":{
"users":[
{"id":1,"name":"jack"},
{"id":2,"name":"rose"},
{"id":3,"name":"ship"},
],
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{count}}
<form>
商品的库存:<input type="text" name="count" v-model="count" />
</form>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
new Vue({
"el":"#app",
"data":{
"count":1,
},
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品个数的加和减操作</title>
</head>
<body>
<div id="a">
<button @click="multiProduct()">+</button>
<input type="text" name="count" v-model="count" />
<button @click="subProduct()">-</button>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript">
/*
* 案例:
模仿电商网站,动态实现购买商品个数的加和减
分析思路:
1.使用v-model指令
2.给+号按钮添加点击事件: +1
3.给-号按钮添加点击事件: -1
*/
new Vue({
"el":"#a",
"data":{
"count":1,
},
"methods":{
// this表示vue对象
//获取data选项中的数据
//方式一: this.$data.count
//方式二: this.count
//1.增加购买数量
multiProduct(){
// 让count++
//问题2: 用户输入数据,获取时就是字符串,效果就是字符串拼接
//this.count = this.count+1
//解决2: parseInt(): "12"--->12
//this.count = parseInt(this.count)+1;
//简单的方式
//用户输入数据,获取时就是字符串,但是没有字符串拼接
//因为: this.count++ 写法,自带类型转换("12"-->12++)
this.count++;
},
//2.减少购买数量
subProduct(){
//让count--
//this.count--;
//1.问题一: 商品个数不能为负数
if(this.count>=2){
this.count--;
}else{
this.count=1;
}
// var num = this.count;
// if(num>=2){
// num--;
// }else{
// num=1;
// }
//this.count = num;
}
}
});
</script>
</body>
</html>