设计师效果图网站,个人社保缴费基数是什么意思,广州做企业网站,做网站具体收费文章目录 js核心概念js脚本引入html的方式基础语法事件监听 Vuevue简介v-forv-bindv-ifv-showv-modelv-on Ajax js
核心概念
JavaScript#xff1a;是一门跨平台、面向对象的脚本语言#xff0c;用来控制网页行为实现交互效果#xff0c;由ECMAScript、BOM、DOM… 文章目录 js核心概念js脚本引入html的方式基础语法事件监听 Vuevue简介v-forv-bindv-ifv-showv-modelv-on Ajax js
核心概念
JavaScript是一门跨平台、面向对象的脚本语言用来控制网页行为实现交互效果由ECMAScript、BOM、DOM组成
ECMAScript规定了JS基础语法核心知识包括变量、数据类型、流程控制、函数、对象等
BOM浏览器对象模型用于操作浏览器本身如页面弹窗、地址栏操作、关闭窗口
DOM文档对象模型用于操作HTML文档如改变标签内的内容、改变标签内的字体样式
js脚本引入html的方式
内部引入
bodyscriptalert(hello world)/script
/body引入外部js文件
!DOCTYPE html
html
headtitle外部脚本示例/title!-- 方式1在 head 中引入需谨慎 --script srcjs/script.js/script
/head
bodybutton onclickshowMessage()点击我/button!-- 方式2推荐在 body 末尾引入 --script srcjs/script.js/script
/body
/htmlfunction showMessage() {alert(Hello from external JS!);
}基础语法
变量和常量
JS中用let关键字来声明变量javascript是弱类型语言变量可以存放不同类型的值。
变量名
只能用字母、数字、下划线、**美元符号$**组成且数字不能开头变量名严格区分大小写不能使用关键字
JS中用const关键字来声明常量一旦声明常量的值就不能够改变不可重新赋值 alert是输出一个窗口console是输出到控制台这两种方式可以用于代码调试 数据类型JavaScript的数据类型分为基本数据类型和引用数据类型对象
基本数据类型
number数字整数、小数、NaNboolean布尔。true、falsenull对象为空undefined当声明的变量未初始化时该变量的值默认为undefinedstring字符串单引号、双引号、反引号皆可推荐使用单引号 typeof 可以获取数据类型 反引号定义的是模板字符串类似python中的f字符串 JavaScript中函数通过function关键字进行定义
function functionName(参数1, 参数2 ...) {...
}
function add(a, b) {return a b;
}调用
let result add(10, 20)
console.log(result)匿名函数的定义
//函数表达式
let add function(a, b) {return a b;
}//箭头函数
let add (a, b) {return a b;
}对象类型
let 对象名 {属性名1: 属性值1,属性名2: 属性值2,属性名3: 属性值3,方法名: function (形参列表) {}
} let user {name: Tom,age: 20,gender: 男,sing: function () {alert(${this.name}唱着最炫民族风)}//sing () {// alert(${this.name}唱着最炫民族风)//}
}//对象中的函数是可以进行简化的 需要注意的是在对象的方法中使用箭头函数时this并不是指向当前对象而是指向当前对象的父对象 jsonJavaScript Object NotationJavascript对象标记法由于json语法简单层次结构鲜明现多用作为数据载体在网络中进行数据传输 DOMDocument Object Model文档对象模型
将标记语言的各个组成部分封装为对应的对象
Document整个文档对象Element元素对象Attribute属性对象Text文本对象Comment注释对象 DOM操作的核心思想将网页中所有的元素当作为对象来处理。
操作步骤
获取要操作的DOM元素对象操作DOM对象的属性或方法
获取DOM对象最灵活常用的方式是根据css选择器来获取DOM对象
//获取匹配到的第一个元素
document.querySelector(选择器)
//获取匹配到的所有元素返回的是一个数组
document.querySelectorAll(选择器)事件监听
事件监听JavaScript可以在事件触发时就立即调用一个函数做出响应也称事件绑定或注册事件
语法事件源.addEventListener(事件类型, 事件触发执行函数);
事件监听三要素
事件源哪个dom元素触发了事件要获取dom元素事件类型用什么方式触发比如鼠标单击 click事件触发执行的函数要做什么事 常见事件
鼠标事件click鼠标点击、mouseenter鼠标移入、mouseleave鼠标移出键盘事件keydown键盘按下触发、keyup键盘抬起触发焦点事件focus获得焦点触发、blur失去焦点触发表单事件input用户输入时触发、submit表单提交时触发 Vue
vue简介
Vue是一款用于构建用户界面的渐进式的JavaScript框架
渐进式指的是可以使用vue的一部分来构建我们的页面
bodydiv idapph1{{ msg }}/h1/divscript typemodule// 1. 导入Vueimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.jscreateApp({data(){return {msg: Hello Vue}}}).mount(#app)/scriptscript标签中的type属性module指使用模块化js.mount(#app)是指让vue接管id为app部分
v-for
在html标签上带有**v-**前缀的就是vue指令
v-for用于列表渲染遍历容器的元素或者对象的属性
tr v-for(item,index) in items :keyitem.id{{ item }}/tritems为遍历的数组item为遍历出来的元素index为索引/下标从0开始可以省略v-foritem in itemskey是给元素添加的唯一标识便于vue进行列表项的正确排序复用
v-bind
v-bind的作用是动态地为HTML标签绑定属性值如设置href、src、style样式等
语法
img v-bind:srcitem.image width30px简化后的语法
img :srcitem.image width30px动态的为标签的属性绑定值不能使用插值表达式需要使用v-bind指令。且绑定的数据需要在data中定义 v-ifv-show
v-if和v-show这两类指令都是用来控制元素的显示与隐藏的
span v-ifgender 1男生/span
span v-showgender 1男生/spanv-if基于条件判断来控制创建或移除元素节点可以配合v-else-if、v-else进行使用
v-show基于css样式display来控制显示与隐藏都会渲染只是控制显示与隐藏
对用户来说达到的效果是一样的
v-modelv-on
v-model在表单元素上使用双向数据绑定。可以方便的获取或设置表单项数据
语法
v-model变量名bodyinput typetext idname v-modelsearchForm.namescript typemoduleimport {createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.jscreateApp({data(){return {searchForm: {name: ,gender: ,job: }}}}).mount(#container)/script
/bodyv-model中绑定的变量必须在data中定义 v-on为html标签绑定事件添加事件监听
语法v-on:事件名方法名
简写为事件名方法名
bodydiv idappbutton typebutton v-on:clickhandle点我/buttonbutton typebutton clickhandle再点我/button/divscript typemoduleimport {createApp} from https://unpkg.com/vue3/dist/vue.esm-browser.jscreateApp({data(){...},methods: {handle() {console.log(hello v-on) }}}).mount(#app)/script
/bodymethods函数中的this指向Vue实例可以通过this获取到data中定义的数据 Ajax
AjaxAsynchronous JavaScript And XML异步的Javascript和XML
XMLExtensible Markup Language 可扩展标记语言本质是一种数据格式可以用来存储复杂的数据结构
Ajax作用
数据交换通过Ajax可以给服务器发送请求并获取服务器相应的数据异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页如搜索联想、用户名是否可用的验证 Axios对原生Ajax进行封装简化书写快速开发
要使用Axios需要先引入可以通过script标签进行引入
script srchttps://unpkg.com/axios/dist/axios.min.js/script
