企业网站推广方案,厦门市建设工程造价信息网,wordpress 图标代码,跨境电商怎么做平台文章目录 1 JavaScript1.1 介绍 1.2 引入方式1.3 基础语法1.3.1 书写语法1.3.2 变量1.3.3 数据类型和运算符 1.4 函数1.4.1 第一种定义格式1.4.2 第二种定义格式 1.5 JavaScript对象1.5.1 基本对象1.5.1.1 Array对象语法格式特点属性和方法 1.5.1.2 String对象语法格式属性和方… 文章目录 1 JavaScript1.1 介绍 1.2 引入方式1.3 基础语法1.3.1 书写语法1.3.2 变量1.3.3 数据类型和运算符 1.4 函数1.4.1 第一种定义格式1.4.2 第二种定义格式 1.5 JavaScript对象1.5.1 基本对象1.5.1.1 Array对象语法格式特点属性和方法 1.5.1.2 String对象语法格式属性和方法 1.5.1.3 JSON对象自定义对象json对象 1.5.2 BOM对象1.5.2.1 Window对象1.5.2.2 Location对象 1.5.3 DOM对象1.5.3.1 DOM介绍1.5.3.2 获取DOM对象 1.5.4 案例1.5.4.1 需求说明1.5.4.2 资料准备1.5.4.3 需求11.5.4.4 需求21.5.4.5 需求31.5.4.6 完整代码 1.6 JavaScript事件1.6.1 事件介绍1.6.2 事件绑定1.6.3 常见事件1.6.4 案例1.6.4.1 需求说明1.6.4.2 资料准备1.6.4.3 需求11.6.4.4 需求21.6.4.5 需求31.6.4.6 完整代码 2 Vue2.1 Vue概述2.2 快速入门2.3 Vue指令2.3.1 v-bind和v-model2.3.2 v-on2.3.3 v-if和v-show2.3.4 v-for2.3.5 案例 2.4 生命周期 1 JavaScript
html完成了架子css做了美化但是网页是死的我们需要给他注入灵魂所以接下来我们需要学习JavaScript这门语言会让我们的页面能够和用户进行交互。
1.1 介绍
通过代码/js效果演示提供资料进行效果演示通过浏览器打开我们点击主题5按钮页面的主题发生了变化所以js可以让我们的页面更加的智能让页面和用户进行交互。
1.2 引入方式
第一种方式内部脚本将JS代码定义在HTML页面中
JavaScript代码必须位于script/script标签之间在HTML文档中可以在任意地方放置任意数量的script一般会把脚本置于body元素的底部可改善显示速度
例子
scriptalert(Hello JavaScript)
/script第二种方式 外部脚本将 JS代码定义在外部 JS文件中然后引入到 HTML页面中
外部JS文件中只包含JS代码不包含ltscript标签引入外部js的script标签必须是双标签
例子
script srcjs/demo.js/script注意demo.js中只有js代码没有script标签
接下来我们通过VS Code来编写代码演示html中2种引入js的方式
第一步在VS Code中创建名为 10.JS-引入方式.html 的文件
第二步按照上述第一种内部脚本的方式引入js编写如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-引入方式/title!-- 内部脚本 --scriptalert(Hello JS);/script
/head
body
/body
/html第三步浏览器打开效果如图所示 第四步接下来演示外部脚本注释掉内部脚本然后在css目录同级创建js目录然后创建一个名为demo.js的文件 第五步在demo.js中编写如下js内容
alert(Hello JS2);第六步注释掉之前的内部脚本代码添加script标签来引入外部demo.js文件,具体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-引入方式/title!-- 内部脚本 --!-- scriptalert(Hello JS);/script --!-- 外部脚本 --script srcjs/demo.js/script
/head
body/body
/html第七步浏览器刷新效果如图
1.3 基础语法
1.3.1 书写语法
掌握了js的引入方式那么接下来我们需要学习js的书写了首先需要掌握的是js的书写语法语法规则如下 区分大小写与 Java 一样变量名、函数名以及其他一切东西都是区分大小写的 每行结尾的分号可有可无 大括号表示代码块 注释 单行注释// 注释内容 多行注释/* 注释内容 */
我们需要借助js中3钟输出语句来演示书写语法
api描述window.alert()警告框document.write()在HTML 输出内容console.log()写入浏览器控制台
接下来我们选用通过VS Code接触3种输入语句来演示js的书写语法
第一步在VS Code中创建名为 11.JS-基础语法-输出语句.html的文件
第二步按照基本语法规则编写3种输出语句的代码并且添加注释具体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-基本语法/title
/head
body/body
script/* alert(JS); *///方式一: 弹出警告框// window.alert(hello js);//方式二: 写入html页面中// document.write(hello js);//方式三: 控制台输出console.log(hello js);
/script
/html1.3.2 变量
书写语法会了变量是一门编程语言比不可少的所以接下来我们需要学习js中变量的声明在js中变量的声明和java中还是不同的。首先js中主要通过如下3个关键字来声明变量的
关键字解释var早期ECMAScript5中用于变量声明的关键字letECMAScript6中新增的用于变量声明的关键字相比较varlet只在代码块内生效const声明常量的常量一旦声明不能修改
在js中声明变量还需要注意如下几点
JavaScript 是一门弱类型语言变量可以存放不同类型的值 。变量名需要遵循如下规则 组成字符可以是任何字母、数字、下划线_或美元符号$数字不能开头建议使用驼峰命名
接下来我们需要通过VS Code编写代码来演示js中变量的定义
第一步在VS Code中创建名为 12.JS-基础语法-变量.html的文件
第二步编写代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-基础语法/title
/head
body/body
script//var定义变量var a 10;a 张三;alert(a);/script
/html在js中我们var声明的变量可以接受任何数据类型的值。并且var声明的变量的作用于是全局的注释掉之前的代码添加如下代码
script//var定义变量// var a 10;// a 张三;// alert(a);//特点1 : 作用域比较大, 全局变量{var x 1;}alert(x);
/script而且var关键字声明的变量可以重复定义修改代码如下
{var x 1;var x A;
}
alert(x);
浏览器弹出内容是A
所以在ECMAScript 6 新增了 let关键字来定义变量它的用法类似于 var但是所声明的变量只在 let关键字所在的代码块内有效且不允许重复声明。注释掉之前的代码添加代码如下
script//var定义变量// var a 10;// a 张三;// alert(a);//特点1 : 作用域比较大, 全局变量//特点2 : 可以重复定义的// {// var x 1;// var x A;// }// alert(x);//let : 局部变量 ; 不能重复定义 {let x 1;}alert(x);/script浏览器打开f12抓包来到控制台页面发现报错变量没有定义说明let声明的变量在代码块外不生效
接着我们使用let重复定义变量代码修改如下发现idea直接帮我们报错了说明let声明的变量不能重复定义
在ECMAScript6中还新增了const关键字用来声明常量但是一旦声明常量的值是无法更改的。注释之前的内容添加如下代码 const pi 3.14;pi 3.15;alert(pi);浏览器f12抓包来到控制台页面发现直接报错了
关于变量的讲解我们就此结束完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-基础语法/title
/head
body/body
script//var定义变量// var a 10;// a 张三;// alert(a);//特点1 : 作用域比较大, 全局变量//特点2 : 可以重复定义的// {// var x 1;// var x A;// }// alert(x);//let : 局部变量 ; 不能重复定义 // {// let x 1;// alert(x);// }//const: 常量 , 不能给改变的.const pi 3.14;pi 3.15;alert(pi);/script
/html1.3.3 数据类型和运算符
虽然js是弱数据类型的语言但是js中也存在数据类型js中的数据类型分为 原始类型 和 引用类型具体有如下类型
数据类型描述number数字整数、小数、NaN(Not a Number)string字符串单双引皆可boolean布尔。truefalsenull对象为空undefined当声明的变量未初始化时该变量的默认值是 undefined
使用typeof函数可以返回变量的数据类型接下来我们需要通过书写代码来演示js中的数据类型
第一步在VS Code中创建名为13. JS-基础语法-数据类型.html的文件
第二步编写如下代码然后直接挨个观察数据类型
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-数据类型/title
/head
body/body
script//原始数据类型alert(typeof 3); //numberalert(typeof 3.14); //numberalert(typeof A); //stringalert(typeof Hello);//stringalert(typeof true); //booleanalert(typeof false);//booleanalert(typeof null); //object var a ;alert(typeof a); //undefined/script
/html熟悉了js的数据类型了那么我们需要学习js中的运算法js中的运算规则绝大多数还是和java中一致的具体运算符如下
运算规则运算符算术运算符 , - , * , / , % , , –赋值运算符 , , - , * , / , %比较运算符 , , , , ! , , 注意 会进行类型转换 不会进行类型转换逻辑运算符 , || , !三元运算符条件表达式 ? true_value: false_value
接下来我们通过代码来演示js中的运算法主要记忆js中和java中不一致的地方
第一步在VS Code中创建名为14. JS-基础语法-运算符.html的文件
第二步编写代码
在js中绝大多数的运算规则和java中是保持一致的但是js中的和是有区别的。
只比较值是否相等不区分数据类型哪怕类型不一致也会自动转换类型进行值得比较不光比较值还要比较类型如果类型不一致直接返回false
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-运算符/title
/head
body/body
scriptvar age 20;var _age 20;var $age 20;alert(age _age);//true 只比较值alert(age _age);//false 类型不一样alert(age $age);//true 类型一样值一样/script
/html在js中虽然不区分数据类型但是有时候涉及到数值计算还是需要进行类型转换的js中可以通过parseInt()函数来进行将其他类型转换成数值类型。注释之前的代码添加代码如下
// 类型转换 - 其他类型转为数字
alert(parseInt(12)); //12
alert(parseInt(12A45)); //12
alert(parseInt(A45));//NaN (not a number)除此之外在js中还有非常重要的一点是0,null,undefined,“”,NaN理解成false,反之理解成true。注释掉之前的代码添加如下代码 if(0){ //falsealert(0 转换为false);}浏览器刷新页面发现没有任何弹框因为0理解成false所以条件不成立。注释掉上述代码添加如下代码
if(1){ //truealert(除0和NaN其他数字都转为 true);
}浏览器刷新因为1理解成true条件成立.
其他情况可以一一演示完整演示代码如下 // if(0){ //false// alert(0 转换为false);// }// if(NaN){//false// alert(NaN 转换为false);// }if(1){ //truealert(除0和NaN其他数字都转为 true);}// if(){ //false// alert(空字符串为 false, 其他都是true);// }// if(null){ //false// alert(null 转化为false);// }// if(undefined){ //false// alert(undefined 转化为false);// }流程控制语句ifswitchfor等和java保持一致此处不再演示
**需要注意的是**在js中0,null,undefined,“”,NaN理解成false,反之理解成true
1.4 函数
在java中我们为了提高代码的复用性可以使用方法。同样在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块通过关键字function来定义。接下来我们学习一下JavaScript中定义函数的2种语法
1.4.1 第一种定义格式
第一种定义格式如下
function 函数名(参数1,参数2..){要执行的代码
}因为JavaScript是弱数据类型的语言所以有如下几点需要注意
形式参数不需要声明类型并且JavaScript中不管什么类型都是let或者var去声明加上也没有意义。返回值也不需要声明类型直接return即可
如下示例
function add(a, b){return a b;
}接下来我们需要在VS Code中编写代码来演示
第一步新建名为js的文件夹创建名为01. JS-函数的html文件然后在script中定义上述示例的函数
scriptfunction add(a,b){return a b;}
/script但是上述只是定义函数**函数需要被调用才能执行**所以接下来我们需要调用函数
第二步因为定义的add函数有返回值所以我们可以接受返回值并且输出到浏览器上添加如下代码
let result add(10,20);
alert(result);1.4.2 第二种定义格式
第二种可以通过var去定义函数的名字具体格式如下
var functionName function (参数1,参数2..){ //要执行的代码
}接下来我们按照上述的格式修改代码如下只需要将第一种定义方式注释掉替换成第二种定义方式即可函数的调用不变
script//定义函数-1// function add(a,b){// return a b;// }//定义函数-2var add function(a,b){return a b;}//函数调用var result add(10,20);alert(result);/script我们在调用add函数时再添加2个参数修改代码如下
var result add(10,20,30,40);浏览器打开发现没有错误并且依然弹出30这是为什么呢
因为在JavaScript中函数的调用只需要名称正确即可参数列表不管的。如上述案例10传递给了变量a20传递给了变量b,而30和40没有变量接受但是不影响函数的正常调用。
1.5 JavaScript对象
JavaScript中的对象有很多主要可以分为如下3大类我们可以打开W3school在线学习文档来到首页在左侧栏找到浏览器脚本下的JavaScript
可以大体分页3大类
第一类基本对象,我们主要学习Array和JSON和String 第二类BOM对象,主要是和浏览器相关的几个对象 第三类DOM对象JavaScript中将html的每一个标签都封装成一个对象 我们先来学习基本对象种的Array对象
1.5.1 基本对象
1.5.1.1 Array对象
语法格式
Array对象时用来定义数组的。常用语法格式有如下2种
方式1
var 变量名 new Array(元素列表); 例如
var arr new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据元素方式2
var 变量名 [ 元素列表 ]; 例如
var arr [1,2,3,4]; //1,2,3,4 是存储在数组中的数据元素数组定义好了那么我们该如何获取数组中的值呢和java中一样需要通过索引来获取数组中的值。语法如下
arr[索引] 值;接下来我们在VS Code中创建名为02. JS-对象-Array.html的文件按照上述的语法定义数组并且通过索引来获取数组中的值。
script//定义数组var arr new Array(1,2,3,4);var arr [1,2,3,4];//获取数组中的值索引从0开始计数console.log(arr[0]);console.log(arr[1]);
/script特点
与java中不一样的是JavaScript中数组相当于java中的集合数组的长度是可以变化的。而且JavaScript是弱数据类型的语言所以数组中可以存储任意数据类型的值。接下来我们通过代码来演示上述特点。
注释掉之前的代码添加如下代码
//特点: 长度可变 类型可变
var arr [1,2,3,4];
arr[10] 50;console.log(arr[10]);
console.log(arr[9]);
console.log(arr[8]);上述代码定义的arr变量中数组的长度是4但是我们直接再索引10的位置直接添加了数据10并且输出索引为10的位置的元素.
因为索引8和9的位置没有值所以输出内容undefined,当然我们也可以给数组添加其他类型的值添加代码如下注释掉之前控制台输出的代码
//特点: 长度可变 类型可变
var arr [1,2,3,4];
arr[10] 50;// console.log(arr[10]);
// console.log(arr[9]);
// console.log(arr[8]);arr[9] A;
arr[8] true;console.log(arr);属性和方法
Array作为一个对象那么对象是有属性和方法的所以接下来我们介绍一下Array对象的属性和方法
官方文档中提供了Array的很多属性和方法但是我们只学习常用的属性和方法如下图所示
属性
属性描述length设置或返回数组中元素的数量。
方法
方法方法描述forEach()遍历数组中的每个有值得元素并调用一次传入的函数push()将新元素添加到数组的末尾并返回新的长度splice()从数组中删除元素 length属性 length属性可以用来获取数组的长度所以我们可以借助这个属性来遍历数组中的元素添加如下代码 var arr [1,2,3,4];
arr[10] 50;for (let i 0; i arr.length; i) {console.log(arr[i]);
}forEach()函数 首先我们学习forEach()方法顾名思义这是用来遍历的那么遍历做什么事呢所以这个方法的参数需要传递一个函数而且这个函数接受一个参数就是遍历时数组的值。修改之前的遍历代码如下 //e是形参接受的是数组遍历时的值
arr.forEach(function(e){console.log(e);
})当然了在ES6中引入箭头函数的写法语法类似java中lambda表达式修改上述代码如下 arr.forEach((e) {console.log(e);
}) 注意的是没有元素的内容是不会输出的因为forEach只会遍历有值的元素 push()函数 push()函数是用于向数组的末尾添加元素的其中函数的参数就是需要添加的元素编写如下代码向数组的末尾添加3个元素 //push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);splice()函数 splice()函数用来数组中的元素函数中填入2个参数。 参数1表示从哪个索引位置删除 参数2表示删除元素的个数 如下代码表示从索引2的位置开始删删除2个元素 //splice: 删除元素
arr.splice(2,2);
console.log(arr);浏览器执行效果如下元素3和4被删除了元素3是索引2 Array数组的完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-Array/title
/head
body/body
script//定义数组// var arr new Array(1,2,3,4);// var arr [1,2,3,4];// console.log(arr[0]);// console.log(arr[1]);//特点: 长度可变 类型可变// var arr [1,2,3,4];// arr[10] 50;// console.log(arr[10]);// console.log(arr[9]);// console.log(arr[8]);// arr[9] A;// arr[8] true;// console.log(arr);var arr [1,2,3,4];arr[10] 50;// for (let i 0; i arr.length; i) {// console.log(arr[i]);// }// console.log();//forEach: 遍历数组中有值的元素// arr.forEach(function(e){// console.log(e);// })// //ES6 箭头函数: (...) {...} -- 简化函数定义// arr.forEach((e) {// console.log(e);// }) //push: 添加元素到数组末尾// arr.push(7,8,9);// console.log(arr);//splice: 删除元素arr.splice(2,2);console.log(arr);/script
/html1.5.1.2 String对象
语法格式
String对象的创建方式有2种
方式1
var 变量名 new String(…) ; //方式一例如
var str new String(Hello String);方式2
var 变量名 … ; //方式二例如
var str Hello String;按照上述的格式在VS Code中创建为名03. JS-对象-String.html的文件编写代码如下
script//创建字符串对象//var str new String(Hello String);var str Hello String ;console.log(str);
/script属性和方法
String对象也提供了一些常用的属性和方法如下表格所示
属性
属性描述length字符串的长度。
方法
方法描述charAt()返回在指定位置的字符。indexOf()检索字符串。trim()去除字符串两边的空格substring()提取字符串中两个指定的索引号之间的字符。 length属性 length属性可以用于返回字符串的长度添加如下代码 //length
console.log(str.length);charAt()函数 charAt()函数用于返回在指定索引位置的字符函数的参数就是索引。添加如下代码 console.log(str.charAt(4));indexOf()函数 indexOf()函数用于检索指定内容在字符串中的索引位置的返回值是索引参数是指定的内容。添加如下代码 console.log(str.indexOf(lo));trim()函数 trim()函数用于去除字符串两边的空格的。添加如下代码 var s str.trim();
console.log(s.length);substring()函数 substring()函数用于截取字符串的函数有2个参数。 参数1表示从那个索引位置开始截取。包含 参数2表示到那个索引位置结束。不包含 console.log(s.substring(0,5));整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-String/title
/head
body/body
script//创建字符串对象//var str new String(Hello String);var str Hello String ;console.log(str);//lengthconsole.log(str.length);//charAtconsole.log(str.charAt(4));//indexOfconsole.log(str.indexOf(lo));//trimvar s str.trim();console.log(s.length);//substring(start,end) --- 开始索引, 结束索引 (含头不含尾)console.log(s.substring(0,5));/script
/html1.5.1.3 JSON对象
自定义对象
在 JavaScript 中自定义对象特别简单其语法格式如下
var 对象名 {属性名1: 属性值1, 属性名2: 属性值2,属性名3: 属性值3,函数名称: function(形参列表){}
};
我们可以通过如下语法调用属性
对象名.属性名通过如下语法调用函数
对象名.函数名()接下来我们再VS Code中创建名为04. JS-对象-JSON.html的文件演示自定义对象
script//自定义对象var user {name: Tom,age: 10,gender: male,eat: function(){console.log(用膳~);}}console.log(user.name);user.eat();
script其中上述函数定义的语法可以简化成如下格式 var user {name: Tom,age: 10,gender: male,// eat: function(){// console.log(用膳~);// }eat(){console.log(用膳~);}}json对象
JSON对象JavaScript Object NotationJavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下
{key:value,key:value,key:value
}其中key必须使用引号并且是双引号标记value可以是任意数据类型。
例如我们可以直接百度搜索“json在线解析”随便挑一个进入然后编写内容如下
{name: 李传播
}但是当我们将双引号切换成单引号再次校验则报错
那么json这种数据格式的文本到底应用在企业开发的什么地方呢-- 经常用来作为前后台交互的数据载体
如下图所示前后台交互时我们需要传输数据但是java中的对象我们该怎么去描述呢我们可以使用如图所示的xml格式可以清晰的描述java中需要传递给前端的java对象。
但是xml格式存在如下问题
标签需要编写双份占用带宽浪费资源解析繁琐
所以我们可以使用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));整体全部代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-JSON/title
/head
body/body
script//自定义对象// var user {// name: Tom,// age: 10,// gender: male,// // eat: function(){// // console.log(用膳~);// // }// eat(){// console.log(用膳~);// }// }// console.log(user.name);// user.eat();// //定义jsonvar jsonstr {name:Tom, age:18, addr:[北京,上海,西安]};//alert(jsonstr.name);// //json字符串--js对象var obj JSON.parse(jsonstr);//alert(obj.name);// //js对象--json字符串alert(JSON.stringify(obj));/script
/html1.5.2 BOM对象
接下来我们学习BOM对象BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能可以通过操作BOM对象的相关属性或者函数来完成。例如我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对象的href属性来完成代码如下location.hrefhttp://www.baidu.com
BOM中提供了如下5个对象
对象名称描述Window浏览器窗口对象Navigator浏览器对象Screen屏幕对象History历史记录对象Locationd地址栏对象
对于上述5个对象我们重点学习的是Window对象、Location对象这2个。
1.5.2.1 Window对象
window对象指的是浏览器窗口对象是JavaScript的全部对象所以对于window对象我们可以直接使用并且对于window对象的方法和属性我们可以省略window.例如我们之前学习的alert()函数其实是属于window对象的,其完整的代码如下
window.alert(hello);其可以省略window. 所以可以简写成
alert(hello)所以对于window对象的属性和方法我们都是采用简写的方式。window提供了很多属性和方法下表列出了常用属性和方法
window对象提供了获取其他BOM对象的属性
属性描述history用于获取history对象location用于获取location对象Navigator用于获取Navigator对象Screen用于获取Screen对象
也就是说我们要使用location对象只需要通过代码window.location或者简写location即可使用
window也提供了一些常用的函数如下表格所示
函数描述alert()显示带有一段消息和一个确认按钮的警告框。comfirm()显示带有一段消息以及确认按钮和取消按钮的对话框。setInterval()按照指定的周期以毫秒计来调用函数或计算表达式。setTimeout()在指定的毫秒数后调用函数或计算表达式。
接下来我们通过VS Code中创建名为05. JS-对象-BOM.html文件来编写代码来演示上述函数 alert()函数弹出警告框函数的内容就是警告框的内容 script//window对象是全局对象window对象的属性和方法在调用时可以省略window.window.alert(Hello BOM);alert(Hello BOM Window);
/scriptconfirm()函数弹出确认框并且提供用户2个按钮分别是确认和取消。 添加如下代码 confirm(您确认删除该记录吗?);但是我们怎么知道用户点击了确认还是取消呢所以这个函数有一个返回值当用户点击确认时返回true点击取消时返回false。我们根据返回值来决定是否执行后续操作。修改代码如下再次运行可以查看返回值true或者false
var flag confirm(您确认删除该记录吗?);
alert(flag);setInterval(fn,毫秒值)定时器用于周期性的执行某个功能并且是循环执行。该函数需要传递2个参数 fn:函数需要周期性执行的功能代码 毫秒值间隔时间 注释掉之前的代码添加代码如下 //定时器 - setInterval -- 周期性的执行某一个函数
var i 0;
setInterval(function(){i;console.log(定时器执行了i次);
},2000);setTimeout(fn,毫秒值) 定时器只会在一段时间后执行一次功能。参数和上述setInterval一致 注释掉之前的代码添加代码如下 //定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){alert(JS);
},3000);浏览器打开3s后弹框关闭弹框发现再也不会弹框了。
1.5.2.2 Location对象
location是指代浏览器的地址栏对象对于这个对象我们常用的是href属性用于获取或者设置浏览器的地址信息添加如下代码
//获取浏览器地址栏信息
alert(location.href);
//设置浏览器地址栏信息
location.href https://www.itcast.cn;然后点击确定后因为我们设置了地址栏信息所以浏览器跳转到传智首页
完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-BOM/title
/head
body/body
script//获取// window.alert(Hello BOM);// alert(Hello BOM Window);//方法//confirm - 对话框 -- 确认: true , 取消: false// var flag confirm(您确认删除该记录吗?);// alert(flag);//定时器 - setInterval -- 周期性的执行某一个函数// var i 0;// setInterval(function(){// i;// console.log(定时器执行了i次);// },2000);//定时器 - setTimeout -- 延迟指定时间执行一次 // setTimeout(function(){// alert(JS);// },3000);//locationalert(location.href);location.href https://www.itcast.cn;/script
/html1.5.3 DOM对象
1.5.3.1 DOM介绍
DOMDocument Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
DOM 其实我们并不陌生之前在学习 XML 就接触过只不过 XML 文档中的标签需要我们写代码解析而 HTML 文档是浏览器解析。封装的对象分为
Document整个文档对象Element元素对象Attribute属性对象Text文本对象Comment注释对象
如下图左边是 HTML 文档内容右边是 DOM 树 那么我们学习DOM技术有什么用呢主要作用如下
改变 HTML 元素的内容改变 HTML 元素的样式CSS对 HTML DOM 事件作出反应添加和删除 HTML 元素
总而达到动态改变页面效果目的具体我们可以查看代码中提供的06. JS-对象-DOM-演示.html来体会DOM的效果。
1.5.3.2 获取DOM对象
我们知道DOM的作用是通过修改HTML元素的内容和样式等来实现页面的各种动态效果但是我们要操作DOM对象的前提是先获取元素对象然后才能操作。所以学习DOM,主要的核心就是学习如下2点
如何获取DOM中的元素对象Element对象 也就是标签如何操作Element对象的属性,也就是标签的属性。
接下来我们先来学习如何获取DOM中的元素对象。
HTML中的Element对象可以通过Document对象获取而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api如下表所示
函数描述document.getElementById()根据id属性值获取返回单个Element对象document.getElementsByTagName()根据标签名称获取返回Element对象数组document.getElementsByName()根据name属性值获取返回Element对象数组document.getElementsByClassName()根据class属性值获取返回Element对象数组
接下来我们通过VS Code中创建名为07. JS-对象-DOM-获取元素.html的文件来演示上述api首先在准备如下页面代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM/title
/headbodyimg idh1 srcimg/off.gif brbrdiv classcls传智教育/div brdiv classcls黑马程序员/div brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/body/htmldocument.getElementById() 根据标签的id属性获取标签对象id是唯一的所以获取到是单个标签对象。 添加如下代码 script
//1. 获取Element元素//1.1 获取元素-根据ID获取var img document.getElementById(h1);alert(img);
/scriptdocument.getElementsByTagName() : 根据标签的名字获取标签对象同名的标签有很多所以返回值是数组。 添加如下代码: //1.2 获取元素-根据标签获取 - div
var divs document.getElementsByTagName(div);
for (let i 0; i divs.length; i) {alert(divs[i]);
}document.getElementsByName() 根据标签的name的属性值获取标签对象name属性值可以重复所以返回值是一个数组。 添加如下代码 //1.3 获取元素-根据name属性获取
var ins document.getElementsByName(hobby);
for (let i 0; i ins.length; i) {alert(ins[i]);
}document.getElementsByClassName() : 根据标签的class属性值获取标签对象class属性值也可以重复返回值是数组。 添加如下图所示的代码 //1.4 获取元素-根据class属性获取
var divs document.getElementsByClassName(cls);
for (let i 0; i divs.length; i) {alert(divs[i]);
}操作属性 那么获取到标签了我们如何操作标签的属性呢通过查询文档资料 得出我们可以通过div标签对象的innerHTML属性来修改标签的内容。此时我们想把页面中的传智教育替换成传智教育666所以要获取2个div中的第一个所以可以通过下标0获取数组中的第一个div注释之前的代码编写如下代码 var divs document.getElementsByClassName(cls);
var div1 divs[0];div1.innerHTML 传智教育666;完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM/title
/headbodyimg idh1 srcimg/off.gif brbrdiv classcls传智教育/div brdiv classcls黑马程序员/div brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/bodyscript//1. 获取Element元素//1.1 获取元素-根据ID获取// var img document.getElementById(h1);// alert(img);//1.2 获取元素-根据标签获取 - div// var divs document.getElementsByTagName(div);// for (let i 0; i divs.length; i) {// alert(divs[i]);// }//1.3 获取元素-根据name属性获取// var ins document.getElementsByName(hobby);// for (let i 0; i ins.length; i) {// alert(ins[i]);// }//1.4 获取元素-根据class属性获取// var divs document.getElementsByClassName(cls);// for (let i 0; i divs.length; i) {// alert(divs[i]);// }//2. 查询参考手册, 属性、方法var divs document.getElementsByClassName(cls);var div1 divs[0];div1.innerHTML 传智教育666;/script
/html1.5.4 案例
1.5.4.1 需求说明
鲁迅说的好光说不练假把式,光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下3个
点亮灯泡将所有的div标签的标签体内容后面加上very good使所有的复选框呈现被选中的状态
1.5.4.2 资料准备
在JS目录下也就是用于存放html文件的同级创建img文件下然后将资料/图片素材中提供的2张图片拷贝到img文件夹中
在VS Code中创建名为08. JS-对象-DOM-案例.html的文件然后准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM-案例/title
/headbodyimg idh1 srcimg/off.gif brbrdiv classcls传智教育/div brdiv classcls黑马程序员/div brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/bodyscript/script
/html1.5.4.3 需求1 需求 点亮灯泡 分析 此时我们需要把灯泡点亮其实就是换一张图片。那么我们需要切换图片就需要操作图片的src属性。要操作图片的src属性就需要先来获取img标签对象。 步骤 首先获取img标签对象然后修改img标签对象的src属性值进行图片的切换 代码实现 //1. 点亮灯泡 : src 属性值
//首先获取img标签对象
var img document.getElementById(h1);
//然后修改img标签对象的src属性值进行图片的切换
img.src img/on.gif;1.5.4.4 需求2 需求 将所有的div标签的标签体内容后面加上very good 并且very good是红色字体 分析 我们需要在原有内容后面追加红色的very good.所以我们首先需要获取原有内容然后再进行内容的追加。但是如何保证very good是红色的呢所以我们可以通过之前html中学过的font标签和属性来完整。如何进行内容的替换呢之前我们学习过innerHTML属性。需要替换2个div的内容所以我们需要获取2个div并且遍历进行替换。 步骤 通过标签的名字div获取所有的div标签遍历所有的div标签获取div标签的原有内容然后追加font color‘red’very good/font,并且替原内容 代码实现 //2. 将所有div标签的内容后面加上: very good (红色字体) -- font colorred/font
var divs document.getElementsByTagName(div);
for (let i 0; i divs.length; i) {const div divs[i];div.innerHTML font colorredvery good/font;
}1.5.4.5 需求3 需求 使所有的复选框呈现被选中的状态 分析 要让复选框处于选中状态那么什么属性或者方法可以使复选框选中可以查询资料得出checkbox标签对象的checked属性设置为true可以改变checkbox为选中状态。那么需要设置所有的checkbox那么我们需要获取所有的checkbox并且遍历 步骤 可以通过name属性值获取所有的checkbox标签遍历所有的checkbox标签设置每个checkbox标签的 代码实现 // //3. 使所有的复选框呈现选中状态
var ins document.getElementsByName(hobby);
for (let i 0; i ins.length; i) {
const check ins[i];
check.checked true;//选中
}1.5.4.6 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-对象-DOM-案例/title
/headbodyimg idh1 srcimg/off.gif brbrdiv classcls传智教育/div brdiv classcls黑马程序员/div brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏
/bodyscript//1. 点亮灯泡 : src 属性值var img document.getElementById(h1);img.src img/on.gif;//2. 将所有div标签的内容后面加上: very good (红色字体) -- font colorred/fontvar divs document.getElementsByTagName(div);for (let i 0; i divs.length; i) {const div divs[i];div.innerHTML font colorredvery good/font; }// //3. 使所有的复选框呈现选中状态var ins document.getElementsByName(hobby);for (let i 0; i ins.length; i) {const check ins[i];check.checked true;//选中}/script
/html1.6 JavaScript事件
1.6.1 事件介绍
什么是事件呢HTML事件是发生在HTML元素上的 “事情”例如
按钮被点击鼠标移到元素上输入框失去焦点…
而我们可以给这些事件绑定函数当事件触发时可以自动的完成对应的功能。这就是事件监听。例如对于我们所说的百度注册页面我们给用户名输入框的失去焦点事件绑定函数当我们用户输入完内容在标签外点击了鼠标对于用户名输入框来说失去焦点然后执行绑定的函数函数进行用户名内容的校验等操作。JavaScript事件是js非常重要的一部分接下来我们进行事件的学习。那么我们对于JavaScript事件需要学习哪些内容呢我们得知道有哪些常用事件然后我们得学会如何给事件绑定函数。所以主要围绕2点来学习
事件绑定常用事件
1.6.2 事件绑定
JavaScript对于事件的绑定提供了2种方式 方式1通过html标签中的事件属性进行绑定 例如一个按钮我们对于按钮可以绑定单机事件可以借助标签的onclick属性属性值指向一个函数。 在VS Code中创建名为09. JS-事件-事件绑定.html添加如下代码 input typebutton idbtn1 value事件绑定1 onclickon()很明显没有on函数所以我们需要创建该函数代码如下 scriptfunction on(){alert(按钮1被点击了...);}
/script方式2通过DOM中Element元素的事件属性进行绑定 依据我们学习过得DOM的知识点我们知道html中的标签被加载成element对象所以我们也可以通过element对象的属性来操作标签的属性。此时我们再次添加一个按钮代码如下 input typebutton idbtn2 value事件绑定2我们可以先通过id属性获取按钮对象然后操作对象的onclick属性来绑定事件代码如下 document.getElementById(btn2).onclick function(){alert(按钮2被点击了...);
}需要注意的是事件绑定的函数只有在事件被触发时函数才会被调用。
整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-事件-事件绑定/title
/headbodyinput typebutton idbtn1 value事件绑定1 onclickon()input typebutton idbtn2 value事件绑定2
/bodyscriptfunction on(){alert(按钮1被点击了...);}document.getElementById(btn2).onclick function(){alert(按钮2被点击了...);}/script
/html1.6.3 常见事件
上面案例中使用到了 onclick 事件属性那都有哪些事件属性供我们使用呢下面就给大家列举一些比较常用的事件属性
事件属性名说明onclick鼠标单击事件onblur元素失去焦点onfocus元素获得焦点onload某个页面或图像被完成加载onsubmit当表单提交时触发该事件onmouseover鼠标被移到某元素之上onmouseout鼠标从某元素移开
在代码中提供了10. JS-事件-常见事件.html的文件我们可以通过浏览器打开来观察几个常用事件的具体效果 onfocus:获取焦点事件鼠标点击输入框输入框中光标一闪一闪的就是输入框获取焦点了 onblur:失去焦点事件前提是输入框获取焦点的状态下在输入框之外的地方点击光标从输入框中消失了这就是失去焦点。
1.6.4 案例
1.6.4.1 需求说明
接下来我们通过案例来加强所学js知识点的掌握。
需求如下3个
点击 “点亮”按钮 点亮灯泡点击“熄灭”按钮 熄灭灯泡输入框鼠标聚焦后展示小写鼠标离焦后展示大写。点击 “全选”按钮使所有的复选框呈现被选中的状态点击 “反选”按钮使所有的复选框呈现取消勾选的状态。
1.6.4.2 资料准备
在VS Code中创建名为11. JS-事件-案例.html的文件提前准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-事件-案例/title
/head
bodyimg idlight srcimg/off.gif brinput typebutton value点亮 input typebutton value熄灭 br brinput typetext idname valueITCAST br brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏brinput typebutton value全选 input typebutton value反选 /body/html1.6.4.3 需求1 需求 点击 “点亮”按钮 点亮灯泡点击“熄灭”按钮 熄灭灯泡 分析 点击按钮的时候触发所以我们需要绑定单击事件。不管是点亮还是熄灭都是图片的变化所以我们需要修改图片。但是修改图片我们还需要先获取标签图片标签对象。 步骤 首先给点亮按钮和熄灭按钮都绑定单击事件。分别绑定函数on()和off然后在js中定义on()和off()函数on()函数中通过id获取img标签对象然后通过img标签对象的src属性切换点亮的图片off()函数中通过id获取img标签对象然后通过img标签对象的src属性切换熄灭的图片 代码实现 事件绑定 input typebutton value点亮 onclickon()
input typebutton value熄灭 onclickoff()on()和off()函数 //1. 点击 点亮 按钮, 点亮灯泡; 点击 熄灭 按钮, 熄灭灯泡; -- onclick
function on(){//a. 获取img元素对象var img document.getElementById(light);//b. 设置src属性img.src img/on.gif;
}function off(){//a. 获取img元素对象var img document.getElementById(light);//b. 设置src属性img.src img/off.gif;
}1.6.4.4 需求2 需求 输入框鼠标聚焦后展示小写鼠标离焦后展示大写。 分析 聚焦和失焦的时候完成功能所以我们需要给input标签绑定onfocus和onblur事件我们要切换大小写那么我们可定要获取原本输入框的内容通过查询资料需要使用input标签对象的value属性然后进行大小写切换切换完成我们需要重新填入所以还是通过value属性来设置input标签输入框的内容 步骤: 给input标签的onfocus和onblur事件分别绑定lower()和upper()函数然后在js中定义lower()和upper()函数对于lower()函数先通过id获取输入框对象然后通过输入框的value属性来设置内容内容的话可以通过字符串的toLowerCase()函数来进行小写转换对于upper()函数先通过id获取输入框对象然后通过输入框的value属性来设置内容内容的话可以通过字符串的toupperCase()函数来进行大写转换 代码实现、 事件绑定 input typetext idname valueITCAST onfocuslower() onblurupper()lower()和upper()函数 //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblur
function lower(){//小写//a. 获取输入框元素对象var input document.getElementById(name);//b. 将值转为小写input.value input.value.toLowerCase();
}function upper(){//大写//a. 获取输入框元素对象var input document.getElementById(name);//b. 将值转为大写input.value input.value.toUpperCase();
}1.6.4.5 需求3 需求 点击 “全选”按钮使所有的复选框呈现被选中的状态点击 “反选”按钮使所有的复选框呈现取消勾选的状态。 分析 点击按钮完成功能所以我们需要给2个按钮绑定单击事件我们需要设置所有复选框的状态通过我们之前的案例我们知道我们需要获取所有的复选框然后遍历可以通过设置checked属性为true来设置复选框为选中那么反之设置checked属性为false来设置复选框为未选中。 步骤 给全选和反选按钮绑定单击事件分别绑定函数checkAll()和reverse()在js中定义checkAll()和reverse()函数对于checkAll()函数首先通过name属性值为hobby来获取所有的复选框然后遍历复选框设置每个复选框的checked属性为true即可对于reverse()函数首先通过name属性值为hobby来获取所有的复选框然后遍历复选框设置每个复选框的checked属性为false即可 代码实现 事件绑定 input typebutton value全选 onclickcheckAll()
input typebutton value反选 onclickreverse()checkAll()和reverse()函数 //3. 点击 全选 按钮使所有的复选框呈现选中状态 ; 点击 反选 按钮使所有的复选框呈现取消勾选的状态 ;
function checkAll(){//a. 获取所有复选框元素对象var hobbys document.getElementsByName(hobby);//b. 设置选中状态for (let i 0; i hobbys.length; i) {const element hobbys[i];element.checked true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys document.getElementsByName(hobby);//b. 设置未选中状态for (let i 0; i hobbys.length; i) {const element hobbys[i];element.checked false;}
}1.6.4.6 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-事件-案例/title
/head
bodyimg idlight srcimg/off.gif brinput typebutton value点亮 onclickon() input typebutton value熄灭 onclickoff()br brinput typetext idname valueITCAST onfocuslower() onblurupper()br brinput typecheckbox namehobby 电影input typecheckbox namehobby 旅游input typecheckbox namehobby 游戏brinput typebutton value全选 onclickcheckAll() input typebutton value反选 onclickreverse()
/body
script//1. 点击 点亮 按钮, 点亮灯泡; 点击 熄灭 按钮, 熄灭灯泡; -- onclickfunction on(){//a. 获取img元素对象var img document.getElementById(light);//b. 设置src属性img.src img/on.gif;}function off(){//a. 获取img元素对象var img document.getElementById(light);//b. 设置src属性img.src img/off.gif;}//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus , onblurfunction lower(){//小写//a. 获取输入框元素对象var input document.getElementById(name);//b. 将值转为小写input.value input.value.toLowerCase();}function upper(){//大写//a. 获取输入框元素对象var input document.getElementById(name);//b. 将值转为大写input.value input.value.toUpperCase();}//3. 点击 全选 按钮使所有的复选框呈现选中状态 ; 点击 反选 按钮使所有的复选框呈现取消勾选的状态 ; -- onclickfunction checkAll(){//a. 获取所有复选框元素对象var hobbys document.getElementsByName(hobby);//b. 设置选中状态for (let i 0; i hobbys.length; i) {const element hobbys[i];element.checked true;}}function reverse(){//a. 获取所有复选框元素对象var hobbys document.getElementsByName(hobby);//b. 设置未选中状态for (let i 0; i hobbys.length; i) {const element hobbys[i];element.checked false;}}/script
/html2 Vue
2.1 Vue概述
通过我们学习的htmlcssjs已经能够开发美观的页面了但是开发的效率还有待提高那么如何提高呢我们先来分析下页面的组成。一个完整的html页面包括了视图和数据数据是通过请求 从后台获取的那么意味着我们需要将后台获取到的数据呈现到页面上很明显 这就需要我们使用DOM操作。正因为这种开发流程所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想即让我们开发者更加关注数据而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢
MVVM:其实是Model-View-ViewModel的缩写有3个单词具体释义如下
Model: 数据模型特指前端中通过请求从后台获取的数据View: 视图用于展示数据的页面可以理解成我们的htmlcss搭建的页面但是没有数据ViewModel: 数据绑定到视图负责将数据Model通过JavaScript的DOM技术将数据展示到视图View上
基于上述的MVVM思想其中的Model我们可以通过Ajax来发起请求从后台获取;对于View部分我们将来会学习一款ElementUI框架来替代HTMLCSS来更加方便的搭建View;而今天我们要学习的就是侧重于ViewModel部分开发的vue前端框架用来替代JavaScript的DOM操作让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢可以参考下图对比 在更加复杂的dom操作中vue只会变得更加的简单在上述的代码中我们看不到之前的DOM操作因为vue全部帮我们封装好了。
接下来我们来介绍一下vue。
Vue.js读音 /vjuː/, 类似于 view 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层并且非常容易学习非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
框架即是一个半成品软件是一套可重用的、通用的、软件基础代码模型。基于框架进行开发更加快捷、更加高效。
2.2 快速入门
接下来我们通过一个vue的快速入门案例来体验一下vue。
第一步在VS Code中创建名为12. Vue-快速入门.html的文件并且在html文件同级创建js目录将资料/vue.js文件目录下得vue.js拷贝到js目录
第二步然后编写script标签来引入vue.js文件代码如下
script srcjs/vue.js/script第三步在js代码区域定义vue对象,代码如下
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue}})
/script在创建vue对象时有几个常用的属性
el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值data: 用来定义数据模型methods: 用来定义函数。这个我们在后面就会用到
第四步在html区域编写视图其中{{}}是插值表达式用来将vue对象中定义的model展示到页面上的
bodydiv idappinput typetext v-modelmessage{{message}}/div
/body整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-快速入门/titlescript srcjs/vue.js/script
/head
bodydiv idappinput typetext v-modelmessage{{message}}/div/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{message: Hello Vue}})
/script
/html2.3 Vue指令
在上述的快速入门中我们发现了html中输入了一个没有学过的属性v-model这个就是vue的指令。
**指令**HTML 标签上带有 v- 前缀的特殊属性不同指令具有不同含义。例如v-ifv-for…
在vue中通过大量的指令来实现数据绑定到视图的所以接下来我们需要学习vue的常用指令如下表所示
指令作用v-bind为HTML标签绑定属性值如设置 href , css样式等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素判定为true时渲染,否则不渲染v-elsev-else-ifv-show根据条件展示某元素区别在于切换的是display属性的值v-for列表渲染遍历容器的元素或者对象的属性
2.3.1 v-bind和v-model
我们首先来学习v-bind指令和v-model指令。
指令作用v-bind为HTML标签绑定属性值如设置 href , css样式等v-model在表单元素上创建双向数据绑定 v-bind: 为HTML标签绑定属性值如设置 href , css样式等。当vue对象中的数据模型发生变化时标签的属性值会随之发生变化。 接下来我们通过代码来演示。 首先我们在VS Code中创建名为13. Vue-指令-v-bind和v-model.html的文件然后准备好如下代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-bind/titlescript srcjs/vue.js/script
/head
bodydiv idappa 链接1/aa 链接2/ainput typetext /div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{url: https://www.baidu.com}})
/script
/html在上述的代码中我们需要给a标签的href属性赋值并且值应该来自于vue对象的数据模型中的url变量。所以编写如下代码 a v-bind:hrefurl链接1/a在上述的代码中v-bind指令是可以省略的但是:不能省略所以第二个超链接的代码编写如下 a :hrefurl链接2/a注意html属性前面有:表示采用的vue的属性绑定 v-model 在表单元素上创建双向数据绑定。什么是双向 vue对象的data属性中的数据变化视图展示会一起变化视图数据发生变化vue对象的data属性中的数据也会随着变化。 data属性中数据变化我们知道可以通过赋值来改变但是视图数据为什么会发生变化呢只有表单项标签所以双向绑定一定是使用在表单项标签上的。编写如下代码 input typetext v-modelurl通过上图我们发现我们只是改变了表单数据那么我们之前超链接的绑定的数据值也发生了变化为什么
就是因为我们双向绑定在视图发生变化时同时vue的data中的数据模型也会随着变化。那么这个在企业开发的应用场景是什么
双向绑定的作用可以获取表单的数据的值然后提交给服务器
整体代码如下:
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-bind/titlescript srcjs/vue.js/script
/head
bodydiv idappa v-bind:hrefurl链接1/aa :hrefurl链接2/ainput typetext v-modelurl/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{url: https://www.baidu.com}})
/script
/html2.3.2 v-on
接下来我们学习一下v-on指令。
v-on: 用来给html标签绑定事件的。需要注意的是如下2点 v-on语法给标签的事件绑定的函数必须是vue对象种声明的函数 v-on语法绑定事件时事件名相比较js中的事件名没有on 例如在js中事件绑定demo函数 input onclickdemo()vue中事件绑定demo函数 input v-on:clickdemo()接下来我们通过代码演示。
首先在VS Code中创建名为14. Vue-指令-v-on.html的文件提前准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-on/titlescript srcjs/vue.js/script
/head
bodydiv idappinput typebutton value点我一下input typebutton value点我一下/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {}})
/script
/html然后我们需要在vue对象的methods属性中定义事件绑定时需要的handle()函数代码如下 methods: {handle: function(){alert(你点我了一下...);}
}然后我们给第一个按钮通过v-on指令绑定单击事件代码如下 input typebutton value点我一下 v-on:clickhandle()同样v-on也存在简写方式即v-on: 可以替换成所以第二个按钮绑定单击事件的代码如下
input typebutton value点我一下 clickhandle()完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-on/titlescript srcjs/vue.js/script
/head
bodydiv idappinput typebutton value点我一下 v-on:clickhandle()input typebutton value点我一下 clickhandle()/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {handle: function(){alert(你点我了一下...);}}})
/script
/html2.3.3 v-if和v-show
指令描述v-if条件性的渲染某元素判定为true时渲染,否则不渲染v-if-elsev-elsev-show根据条件展示某元素区别在于切换的是display属性的值
我们直接通过代码来演示效果。在VS Code中创建名为15. Vue-指令-v-if和v-show.html的文件提前准备好如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-if与v-show/titlescript srcjs/vue.js/script
/head
bodydiv idapp年龄input typetext v-modelage经判定,为:span年轻人(35及以下)/spanspan中年人(35-60)/spanspan老年人(60及以上)/spanbrbr/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{age: 20},methods: {}})
/script
/html其中采用了双向绑定到age属性意味着我们可以通过表单输入框来改变age的值。
需求是当我们改变年龄时需要动态判断年龄的值呈现对应的年龄的文字描述。年轻人我们需要使用条件判断age35,中年人我们需要使用条件判断age35 age60,其他情况是老年人。所以通过v-if指令编写如下代码
年龄input typetext v-modelage经判定,为:
span v-ifage 35年轻人(35及以下)/span
span v-else-ifage 35 age 60中年人(35-60)/span
span v-else老年人(60及以上)/spanv-show和v-if的作用效果是一样的只是原理不一样。复制上述html代码修改v-if指令为v-show指令代码如下
年龄input typetext v-modelage经判定,为:
span v-showage 35年轻人(35及以下)/span
span v-showage 35 age 60中年人(35-60)/span
span v-showage 60老年人(60及以上)/span可以发现浏览器呈现的效果是一样的但是浏览器中html源码不一样。v-if指令不满足条件的标签代码直接没了而v-show指令中不满足条件的代码依然存在只是添加了css样式来控制标签不去显示。
完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-if与v-show/titlescript srcjs/vue.js/script
/head
bodydiv idapp年龄input typetext v-modelage经判定,为:span v-ifage 35年轻人(35及以下)/spanspan v-else-ifage 35 age 60中年人(35-60)/spanspan v-else老年人(60及以上)/spanbrbr年龄input typetext v-modelage经判定,为:span v-showage 35年轻人(35及以下)/spanspan v-showage 35 age 60中年人(35-60)/spanspan v-showage 60老年人(60及以上)/span/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{age: 20},methods: {}})
/script
/html2.3.4 v-for
v-for: 从名字我们就能看出这个指令是用来遍历的。其语法格式如下
标签 v-for变量名 in 集合模型数据{{变量名}}
/标签需要注意的是需要循环那个标签v-for 指令就写在那个标签上。
有时我们遍历时需要使用索引那么v-for指令遍历的语法格式如下
标签 v-for(变量名,索引变量) in 集合模型数据!--索引变量是从0开始所以要表示序号的话需要手动的加1--{{索引变量 1}} {{变量名}}
/标签接下来我们再VS Code中创建名为16. Vue-指令-v-for.html的文件编写代码演示提前准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-for/titlescript srcjs/vue.js/script
/head
bodydiv idapp/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{addrs:[北京, 上海, 西安, 成都, 深圳]},methods: {}})
/script
/html然后分别编写2种遍历语法来遍历数组展示数据代码如下 div idappdiv v-foraddr in addrs{{addr}}/divhrdiv v-for(addr,index) in addrs{{index 1}} : {{addr}}/div
/div2.3.5 案例 需求users是数组集合提供了多个用户信息。然后我们需要将数据以表格的形式展示到页面上其中性别需要转换成中文男女等级需要将分数数值转换成对应的等级。 分析 首先我们肯定需要遍历数组的所以需要使用v-for标签然后我们每一条数据对应一行所以v-for需要添加在tr标签上其次我们需要将编号所以需要使用索引的遍历语法然后我们要将数据展示到表格的单元格中所以我们需要使用{{}}插值表达式最后我们需要转换内容所以我们需要使用v-if指令进行条件判断和内容的转换 步骤 使用v-for的带索引方式添加到表格的tr标签上使用{{}}插值表达式展示内容到单元格使用索引1来作为编号使用v-if来判断改变性别和等级这2列的值 代码实现 首先创建名为17. Vue-指令-案例.html的文件提前准备如下代码 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-案例/titlescript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth年龄/thth性别/thth成绩/thth等级/th/tr/table/div/bodyscriptnew 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然后在tr上添加v-for进行遍历以及通过插值表达式{{}}和v-if指令来填充内容和改变内容其代码如下 tr aligncenter v-for(user,index) in userstd{{index 1}}/tdtd{{user.name}}/tdtd{{user.age}}/tdtdspan v-ifuser.gender 1男/spanspan v-ifuser.gender 2女/span/tdtd{{user.score}}/tdtdspan v-ifuser.score 85优秀/spanspan v-else-ifuser.score 60及格/spanspan stylecolor: red; v-else不及格/span/td
/tr其完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-案例/titlescript srcjs/vue.js/script
/head
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth年龄/thth性别/thth成绩/thth等级/th/trtr aligncenter v-for(user,index) in userstd{{index 1}}/tdtd{{user.name}}/tdtd{{user.age}}/tdtdspan v-ifuser.gender 1男/spanspan v-ifuser.gender 2女/span/tdtd{{user.score}}/tdtdspan v-ifuser.score 85优秀/spanspan v-else-ifuser.score 60及格/spanspan stylecolor: red; v-else不及格/span/td/tr/table/div/bodyscriptnew 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
/html2.4 生命周期
vue的生命周期指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段每触发一个生命周期事件会自动执行一个生命周期方法这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示
状态阶段周期beforeCreate创建前created创建后beforeMount挂载前mounted挂载完成beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed销毁后
其中我们需要重点关注的是**mounted,**其他的我们了解即可。
mounted挂载完成Vue初始化成功HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据
我们在VS Code中创建名为18. Vue-生命周期.html的文件编写代码来演示效果提前准备如下代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-指令-v-for/titlescript srcjs/vue.js/script
/head
bodydiv idapp/div
/body
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {}})
/script
/html然后我们编写mounted声明周期的钩子函数与methods同级代码如下
script//定义Vue对象new Vue({el: #app, //vue接管区域data:{},methods: {},mounted () {alert(vue挂载完成,发送请求到服务端)}})
/script浏览器打开运行结果如下我们发现自动打印了这句话因为页面加载完成vue对象创建并且完成了挂在此时自动触发mounted所绑定的钩子函数然后自动执行弹框。
