JAVAWeb学习笔记(二)_JavaScript+Vue

JavaScript

跨平台\面向对象的脚本语言,控制网页行为,叫JavaScript(其实是ECMAscript)是为了蹭java的热度
JS语法这么随便就是为了不报错,毕竟网络传输效率最重要

JS引入方式

内部脚本:将js代码定义在HTML文件内

<script>
	alert("Hello JavaScript")
</script>

外部脚本:将js代码定义在外部.JS文件中
<script src="js/demo.js"></script>
注意不能自闭和->

js基础语法

书写语法

方式一:弹出警告框
window.alert("hello js");
方式二:写入html页面
document.write("hello js");
方式三:控制台输出
console.log("hello js");

变量

弱类型语言
var x = 1;//作用域大,全局变量,可以重复定义
let x = 1;//局部变量,不能重复定义
const pi=3.14;//常量

数据类型&运算符&流程控制语句

数据类型分原始类型和引用类型,number,string,boolean,null(对象为空),undefined(变量未初始化类型)
运算符与java相同,除了和**=**,==比较时会类型转换,===不会
类型转换
字符串转数字,字面值转数字,不是数字,为NaN
其他类型转boolean
Number:0和NaN为false
String:空""为false
Null和undefined均转false
其他均为true
流程控制语句与java相同

函数

//定义方式1
function add(a,b){
	return a+b;
}
//定义方式2
var add=function(a,b){
	return a+b;
}
//调用
var result=add(10,20);

js对象

Array数组

其实说是数组,更类似于Java中的集合
var arr=[1,2,3,4];
//var arr=new Array(1,2,3,4);
比python更随便,可以超出索引赋值

arr.length//长度
arr.forEach(function(e){
	console.log(e);
})
ES6中的箭头函数,类似java中lamada表达式,简化为
arr.forEach((e)=>{
	console.log(e);
})
arr.push(7,8,9)//添加元素到末尾
arr.splice(2,2)//在索引为2的位置删除2个元素,但后面的元素不会跟进,这两个位置变为undefined

String字符串对象

var str=new String("hello");
var str="hello";
str.length//长度
str.chatAt(4)//获取此索引位置的字符
str.indexOf("lo");//返回有此字符串的索引位置
str.trim();//除去头尾空格
str.substring(0,5);//返回开始索引到结束索引的字符串(含头不含尾)

JSON

javascript自定义对象,直接定义对象,没有类

var user={
	name:"Tom",
	age:20,
	eat(){
		alert("吃");
	}
};
//调用
user.name;
user.eat();

JSON时通过JS对象标记法书写的文本,格式类似自定义对象
用于作为哦数据载体在网络的请求和响应中传输数据

//定义json,变量名要用""括起来
var jsonStr='{"name":"Tom",
	"age":18,
	"addr":["beijing","shanghai"]
	}'
//json字符串->js对象
var obj=JSON.parse(jsonStr);
//js对象->json字符串
JSON.stringify(obj);

BOM

BOM浏览器对象模型
Window浏览器窗口对象Window.属性\方法

alert():警告框
confirm():提示框(包括确认和取消)
setInterval();周期执行某函数
setTimeout():指定时间后执行

location地址栏对象

window.location.属性
location.href//设置或返回完整的URL

DOM

DOM文档对象模型
将标记语言的各个组成部分封装成对应的对象
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
JS通过DOM对HTML操作(改变内容,样式,反应…)
Core DOM所有文档类型的标准模型
HTML DOM,HTML文章的标准模型
XML DOM,XML文档的标准模型
获取和修改

var img = document.getElementById("h1")//根据ID获取
var divs = document.getElementByTagName("div")//根据标签获取
var ins = document.getElementByName("hobby")//根据name属性获取
var divs = document.getElementByClassName("cls")//根据class属性获取
var div1=divs[0];div1.innerHTML="船只教育999"//修改内容

更多的还是要查文档,确定如何使用

事件监听

事件绑定

方式1,通过HTML标签中的事件属性进行绑定
<input type="button" onclick="on()" id="btn" value="按钮1">//on()就是绑定的动作
方式2,通过DOM元素属性绑定
document.getElementById("btn").onclick=function(){
	alert("被点击");
}

常见的事件
onclick 鼠标单击
onblur 元素失去焦点
onfocus 元素获得焦点
onload 页面或图像被完成加载
onsubmit 表格被提交
onkeydown 键盘案件`2被按下
onmouseover 鼠标移动到某元素
onmouseout 鼠标移开

Vue

Vue是一套前端框架,免除DOM操作,简化书写
基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定

指令

新建HTML页面,引入Vue.js文件
<script src="js/vue.js"></script>
编写视图
<div id="app">
	<input type="text" v-model="message">
	{{message}}
	<a v-bind:href="url">船只教育</a>
	<input type="button" value="按钮" v-on:click="handle()">
	<span v-if="age<=35">年轻人</span>
	<span v-else-if="age>35&&age<60">中年人</span>
	//或者可以用
	<span v-show="age<=35">年轻人</span>
	<span v-show="age>35&&age<60">中年人</span>
	<div v-for="addr in addrs">{{addr}}</div>
	<div v-for="(addr,index) in addrs">{{index}}:{{addr}}</div>
</div>
//插值表达式,形式--->{{表达式}}
在JS代码区,创建Vue核心对象,定义数据模型
<script>
	new Vue({
		el:"#app",
		data:{
			age:20
			massage:"Hello"
			url:"http://www.baidu.com"
			addrs:["beijing","shanghai","xian","chengdu","shenzhen"]
		},
		methods:{
			handle:function(){
				alert("被点击");
			}
		}
	})
</script>

常用指令
v-bind 为HTML标签绑定属性值,如设置href,css样式
v-model在表单元素上创建双向数据绑定
v-on为HTML标签绑定事件
v-if,v-else-if,v-else.判定为true时渲染
v-show根据条件展示元素
v-for,列表渲染,遍历容器中元素

生命周期

生命周期指一个对象从创建到销毁的整个过程
八个阶段:每触发一个周期事件,自动执行一个生命周期方法(钩子方法)
beforeCreate创建前
created创建后
beforeMount挂载前
mounted挂载完成,(比较重要)
beforeUpdate更新前
updated更新后
beforeDestroy销毁前
destroyed销毁后

<script>
	new Vue({
		el:"#app",
		data:{
		},
		methods:{
		},
		mounted(){
			alert("vue挂载完成,发送请求到服务端")//挂载后自动调用mounted()
		}
	})
</script>