JavaScript
html完成了架子，css做了美化，但是网页是死的，我们需要给他注入灵魂，所以接下来我们需要学习 JavaScript，这门语言会让我们的页面能够和用户进行交互。
- 引入方式
1.内部脚本，将JS代码定义在HTML页面中
JavaScript代码必须位于标签之间
在HTML文档中，可以在任意地方，放置任意数量的
一般会把脚本置于元素的底部，可改善显示速度
<!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>JS-引入方式</title>
<!-- 内部引入 -->
<script>
alert("hello")
</script>
</head>
<body>
</body>
</html>2.外部脚本将， JS代码定义在外部 JS文件中，然后引入到 HTML页面中
外部JS文件中，只包含JS代码，不包含<script>标签
引入外部js的<script>标签，必须是双标签
<!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>JS-引入方式</title>
<!-- 内部引入 -->
<!-- <script>
alert("hello")
</script> -->
<!-- 外部引入 -->
<script src="js/demo.js"></script>
</head>
<body>
</body>
</html>- 基础语法
1.书写语法
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
大括号表示代码块
输出语句：
<!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>JS-基本语法</title>
</head>
<body>
</body>
<script>
window.alert("hello");
document.write("hello");
console.log("hello");
</script>
</html>2.变量
注：
JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
命名规则：组成字符可以是任何字母、数字、下划线（_）或美元符号（$）；不能数字开头；驼峰
<!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>JS-基础语法</title>
</head>
<body>
</body>
<script>
var a = 10;
a="tom"
alert(a)
</script>
</html>在js中，我们var声明的变量可以接受任何数据类型的值。并且var声明的变量的作用于是全局的
所以在ECMAScript 6 新增了 let关键字来定义变量，它的用法类似于 var，但是所声明的变量， 只在 let关键字所在的代码块内有效，且不允许重复声明。
在ECMAScript6中，还新增了const关键字用来声明常量，但是一旦声明，常量的值是无法更改的
3.数据类型和运算符
js中的数据类型分为 ：原始类型和引用类型
<!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>JS-数据类型</title>
</head>
<body>
</body>
<script>
//原始数据类型
alert(typeof 3);
alert(typeof 3.14);
alert(typeof "A");
alert(typeof 'Hello');
alert(typeof true);
alert(typeof false);
alert(typeof null);
var a ;
alert(typeof a);
</script>
</html>运算符：
在js中，绝大多数的运算规则和java中是保持一致的，但是js中的==和===是有区别的。
==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较 ===：不光比较值，还要比较类型，如果类型不一致，直接返回false
在js中，虽然不区分数据类型，但是有时候涉及到数值计算，还是需要进行类型转换的，js中可以通过 parseInt()函数来进行将其他类型转换成数值类型。
需要注意的是：在js中，0,null,undefined,"",NaN理解成false,反之理解成true
//类型转换 - 其他类型转为数字
alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)
<!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>JS-运算符</title>
</head>
<body>
</body>
<script>
var age = 20;
var _age = "20";
var $age = 20;
alert(age == _age); true
alert(age === _age); false
alert(age === $age); true
// 类型转换 - 其他类型转为数字
// alert(parseInt("12"));
// alert(parseInt("12A45"));
// alert(parseInt("A45"));
// 类型转换 - 其他类型转为boolean
// if(0){
// alert("0 转换为false");
// }
// if(NaN){
// alert("NaN 转换为false");
// }
// if(1){
// alert("除0和NaN其他数字都转为 true");
// }
// if(""){
// alert("空字符串为 false, 其他都是true");
// }
// if(null){
// alert("null 转化为false");
// }
// if(undefined){
// alert("undefined 转化为false");
// }
</script>
</html>4.流程控制语句 ：
- 函数
在java中我们为了提高代码的复用性，可以使用方法。同样，在JavaScript中可以使用函数来完成相 同的事情。JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义
1.第一种定义格式
function 函数名(参数1,参数2..){
要执行的代码
}<!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>JS-函数</title>
</head>
<body>
</body>
<script>
function add (a,b){
return a + b;
}
var a = add(1,2);
alert(a);
</script>
</html>2.第二种定义格式
第二种可以通过var去定义函数的名字
var functionName = function (参数1,参数2..){
//要执行的代码
}
<!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>JS-函数</title>
</head>
<body>
</body>
<script>
let add = function(a,b){
return a + b;
}
var res = add(1,2);
alert(res);
</script>
</html> - 对象
可以大体分页3大类：
第一类：基本对象,我们主要学习Array和JSON和String
第二类：BOM对象,主要是和浏览器相关的几个对象
第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象
第一类：基本对象,我们主要学习Array和JSON和String
1.Array
Array对象时用来定义数组的。常用语法格式有如下2种：
var 变量名 = new Array(元素列表);
var 变量名 = [ 元素列表 ];<!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>JS-对象-Array</title>
</head>
<body>
</body>
<script>
var arr = [1,2,3,4,5];
for (let index = 0; index < arr.length; index++) {
console.log(arr[index]);
}
</script>
</html>特点：
特点 与java中不一样的是，JavaScript中数组相当于java中的集合，数组的长度是可以变化的，类型也是可以变化的。而且 JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值。
var arr = [1,2,3,4];
arr[10] = 50;上述代码定义的arr变量中，数组的长度是4，但是我们直接再索引10的位置直接添加了数据10，并且 输出索引为10的位置的元素
属性和方法：
<!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>JS-对象-Array</title>
</head>
<body>
</body>
<script>
var arr = [1,2,3,4,5];
// for (let index = 0; index < arr.length; index++) {
// console.log(arr[index]);
// }
arr.forEach(function(e){
console.log(e);
});
</script>
</html><!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>JS-对象-Array</title>
</head>
<body>
</body>
<script>
var arr = [1,2,3,4,5];
// for (let index = 0; index < arr.length; index++) {
// console.log(arr[index]);
// }
// arr.forEach(function(e){
// console.log(e);
// });
arr.push("six");
arr.forEach((e)=>{
console.log(e)
})
</script>
</html><!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>JS-对象-Array</title>
</head>
<body>
</body>
<script>
var arr = [1,2,3,4,5];
// for (let index = 0; index < arr.length; index++) {
// console.log(arr[index]);
// }
// arr.forEach(function(e){
// console.log(e);
// });
arr.push("six");
arr.splice(2,2);//从二号位删除两个元素
arr.forEach((e)=>{
console.log(e)
})
</script>
</html>2.字符串
String对象的创建方式有2种：
var 变量名 = new String("…") ; //方式一var 变量名 = "…" ; //方式二属性和方法：
3.JSON
JSON对象：JavaScript Object Notation，JavaScript对象标记法。是通过JavaScript标 记法书写的文本。其格式：
{
"key":value,
"key":value,
"key":value
}其中，key必须使用引号并且是双引号标记，value可以是任意数据类型。
那么json这种数据格式的文本到底应用在企业开发的什么地方呢？-- 经常用来作为前后台交互的数据 载体
接下来我们通过代码来演示json对象：注释掉之前的代码，编写代码如下：
var jsonstr = '{
"name":"Tom",
"age":18,
"addr":["北京","上海","西安"]
}';
alert(jsonstr.name);
浏览器输出结果如下：
为什么呢？因为上述是一个json字符串，不是json对象，所以我们需要借助如下函数来进行json字符 串和json对象的转换
var obj = JSON.parse(jsonstr);
alert(obj.name);
当然了，我们也可以通过如下函数将json对象再次转换成json字符串。添加如下代码：
alert(JSON.stringify(obj));<script>
var jsonstr = '{"name":"tom","age":18}';
alert(jsonstr.name);
var obj = JSON.parse(jsonstr);
alert(obj.name);
alert(JSON.stringify(obj));
</script>
4.JavaScript自定义对象
<script>
var user ={
name:"tom",
age:20,
gender:"male",
eat: function(){
alert("吃");
},
sleep(){
console.log("睡觉")
}
}
console.log(user.name);
user.sleep();
</script>调用格式：
对象名.属性名
对象名.函数名()
5.BOM对象
BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就 是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作 BOM对象的相关属性或者函数来完成。
BOM中提供了如下5个对象：
----window对象：
window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直 接使用，并且对于window对象的方法和属性，我们可以省略window.
window.alert('hello');
alert('hello');
window对象常用函数：
<script>
//获取
window.alert("hello");
//方法 有返回值的确认框
var flag = window.confirm("确认删除？");
alert(flag);
//定时器 周期性执行
var i = 0;
setInterval(function(){
i++;
console.log(i)
},2000);
//定时器 执行一次 3秒后执行
setTimeout(function(){
alert("hello");
},3000)
</script>----location
location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏 览器的地址信息，添加如下代码：
//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href = "https://www.itcast.cn";
location.href = "https://www.baidu.cn";会跳转到百度
6.DOM
DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成 部分封装为对象。
DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解 析，而 HTML 文档是浏览器解析。
封装的对象分为：
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
DOM的作用：
改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素
----获取元素对象
如何获取DOM中的元素对象（Element对象 ，也就是标签）
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。 document对象提供的用于获取Element元素对象的api如下表所示：
<!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>JS-对象-DOM</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智教育</div> <br>
<div class="cls">黑马程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
</body>
<script>
// 根据id获取元素
// var img = document.getElementById("h1")
// alert(img);
// 根据标签获取元素
var dias = document.getElementsByTagName('div');
for (let index = 0; index < dias.length; index++) {
alert(dias[index]);
}
//根据name属性获取
var ins = document.getElementsByName('hobby');
for (let index = 0; index < ins.length; index++) {
alert(ins[index]);
}
//根据class属性获取
var cls = document.getElementsByClassName('cls');
for (let index = 0; index < cls.length; index++) {
alert(cls[index]);
}
</script>
</html>如何操作Element对象的属性,也就是标签的属性。
<!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>JS-对象-DOM</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智</div> <br>
<div class="cls">程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
</body>
<script>
// 根据id获取元素
// var img = document.getElementById("h1")
// alert(img);
// 根据标签获取元素
// var dias = document.getElementsByTagName('div');
// for (let index = 0; index < dias.length; index++) {
// alert(dias[index]);
// }
// //根据name属性获取
// var ins = document.getElementsByName('hobby');
// for (let index = 0; index < ins.length; index++) {
// alert(ins[index]);
// }
//根据class属性获取
var cls = document.getElementsByClassName('cls');
for (let index = 0; index < cls.length; index++) {
alert(cls[index]);
}
var cls1 = cls[0];
cls1.innerHTML=" 传智xxxx";
</script>
</html>案列
<!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>JS-对象-DOM-案例</title>
</head>
<body>
<img id="h1" src="img/off.gif"> <br><br>
<div class="cls">传智</div> <br>
<div class="cls">程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
</body>
<script>
//1. 点亮灯泡
var img = document.getElementById("h1");
img.src = "img/on.gif";
//2. 将所有div标签的内容后面加上
var digs = document.getElementsByTagName('div');
for (let index = 0; index < digs.length; index++) {
digs[index].innerHTML += "<font color = 'red'>verged<font>";
}
//3. 使所有的复选框呈现选中状态
var icons = document.getElementsByName('hobby');
for (let index = 0; index < icons.length; index++) {
const check = icons[index];
check.checked = true;
}
</script>
</html>- 事件监听
1.事件绑定
方式一：通过html标签中的事件属性进行绑定 例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的onclick属性，属性值指向一个 函数。
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
创建on函数
<script>
function on(){
alert("按钮1被点击了...");
}
</script>方式二： 通过DOM中Element元素的事件属性进行绑定 依据我们学习过得DOM的知识点，我们知道html中的标签被加载成element对象，所以我们也可 以通过element对象的属性来操作标签的属性。此时我们再次添加一个按钮，代码如下：
<input type="button" id="btn2" value="事件绑定2">我们可以先通过id属性获取按钮对象，然后操作对象的onclick属性来绑定事件
document.getElementById('btn2').onclick = function(){
alert("按钮2被点击了...");
}
<!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>JS-事件-事件绑定</title>
</head>
<body>
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
<input type="button" id="btn2" value="事件绑定2">
</body>
<script>
function on(){
alert("点击1");
}
var button2 = document.getElementById('btn2').onclick = function () {
alert("button2");
}
</script>
</html>2.常见事件
案例：
<!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>JS-事件-案例</title>
</head>
<body>
<img id="light" src="img/off.gif"> <br>
<input type="button" value="点亮" onclick="on()">
<input type="button" value="熄灭" onclick="off()">
<br> <br>
<input type="text" id="name" value="ITCAST" onfocus="lower()" onclick="upper()">
<br> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverse()">
</body>
<script>
//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡;
function on(){
var light = document.getElementById('light');
light.src = "img/on.gif";
}
function off(){
var light = document.getElementById('light');
light.src = "img/off.gif";
}
//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写;
function lower(){
//获取输入框元素对象
var input = document.getElementById("name");
//转为小写
input.value = input.value.toLowerCase();
}
function upper(){
var input = document.getElementById("name");
//转为小写
input.value = input.value.toUpperCase();
}
//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
function checkAll() {
var s = document.getElementsByName('hobby');
for (let index = 0; index < s.length; index++) {
const element = s[index];
element.checked = true;
}
}
function reverse() {
var s = document.getElementsByName('hobby');
for (let index = 0; index < s.length; index++) {
const element = s[index];
element.checked = false;
}
}
</script>
</html>Vue
通过我们学习的html+css+js已经能够开发美观的页面了，但是开发的效率还有待提高，那么如何提高 呢？我们先来分析下页面的组成。一个完整的html页面包括了视图和数据，数据是通过请求 从后台获 取的，那么意味着我们需要将后台获取到的数据呈现到页面上，很明显， 这就需要我们使用DOM操作。 正因为这种开发流程，所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想， 即让我们开发者更加关注数据，而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢？ MVVM:其实是Model-View-ViewModel的缩写，有3个单词，具体释义如下：
Model: 数据模型，特指前端中通过请求从后台获取的数据
View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据
ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上
基于上述的MVVM思想，其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分，我们 将来会学习一款ElementUI框架来替代HTML+CSS来更加方便的搭建View;而今天我们要学习的就是侧 重于ViewModel部分开发的vue前端框架，用来替代JavaScript的DOM操作，让数据展示到视图的代 码开发变得更加的简单。可以简单到什么程度呢？可以参考下图对比：
在更加复杂的dom操作中，vue只会变得更加的简单！在上述的代码中，我们看不到之前的DOM操作，因 为vue全部帮我们封装好了。
1.快速入门
第一步：在VS Code中创建名为12. Vue-快速入门.html的文件，并且在html文件同级创建js目 录，将资料/vue.js文件目录下得vue.js拷贝到js目录，
第二步：然后编写<script>>标签来引入vue.js文件
第三步：在js代码区域定义vue对象
在创建vue对象时，有几个常用的属性：
el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签 的id属性值
data: 用来定义数据模型
methods: 用来定义函数。这个我们在后面就会用到
第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上 的
<!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>
<!-- 引入vue -->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model = "message">
{{message}}
</div>
</body>
<script>
//定义vue
new Vue({
el: "#app",//接管区域
data:{
message: "hello vue"
}
})
</script>
</html>2.Vue-指令
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
在vue中，通过大量的指令来实现数据绑定到视图的
v-bind和v-model
v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当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-指令-v-bind</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">链接1</a>
<a v-bind:href="url">链接2</a>
<input type="text" v-model = "url">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
url:"https://www.bilibili.com"
}
})
</script>
</html>v-model： 在表单元素上创建双向数据绑定。
什么是双向？
vue对象的data属性中的数据变化，视图展示会一起变化
视图数据发生变化，vue对象的data属性中的数据也会随着变化.
双向绑定的作用：可以获取表单的数据的值，然后提交给服务器
v-on
v-on: 用来给html标签绑定事件的。
需要注意的是如下2点： v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
v-on语法绑定事件时，事件名相比较js中的事件名，没有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>Vue-指令-v-on</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我一下" v-on:click="hand()">
<input type="button" value="点我一下" @click="hand()">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
},
methods: {
hand: function(){
alert("click");
}
}
})
</script>
</html>v-if和v-show
<!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-指令-v-if与v-show</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
年龄<input type="text" v-model="age">经判定,为:
<span v-if ="age<=35">年轻人(35及以下)</span>
<span v-else-if ="age>35 && age<=60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>
<br><br>
年龄<input type="text" v-model="age">经判定,为:
<span v-show ="age<=35">年轻人(35及以下)</span>
<span v-show ="age>35 && age<=60">中年人(35-60)</span>
<span v-show>老年人(60及以上)</span>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
age: 35
},
methods: {
}
})
</script>
</html>可以发现，浏览器呈现的效果是一样的，但是浏览器中html源码不一样。v-if指令，不满足条件的标 签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去 显示。
v-for
v-for: 从名字我们就能看出，这个指令是用来遍历的
<标签 v-for="变量名 in 集合模型数据">
{{变量名}}
</标签>需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。
有时我们遍历时需要使用索引，那么v-for指令遍历的语法格式如下：
<标签 v-for="(变量名,索引变量) in 集合模型数据">
<!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
{{索引变量 + 1}} {{变量名}}
</标签><!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-指令-v-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 有索引 -->
<div v-for="(addrs,index) in addrs">
{{addrs}}
</div>
<!-- 无索引 -->
<div v-for="addrs in addrs">
{{addrs}}
</div>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
addrs:["北京", "上海", "西安", "成都", "深圳"]
},
methods: {
}
})
</script>
</html>案例：
<!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>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<span v-if ="user.gender == 1">男</span>
<span v-if ="user.gender == 2">女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-if ="user.score>=85">优秀</span>
<span v-else-if ="user.score>=60">及格</span>
<span style="color: red;" v-else>不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
users: [{
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: "Tony",
age: 30,
gender: 1,
score: 52
}]
},
methods: {
},
})
</script>
</html>3.Vue的生命周期
vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命 周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
其中我们需要重点关注的是mounted,其他的我们了解即可。
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的 ajax请求后台数据
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
