如何诊断网站,h5网站开发案例,十大免费ppt网站下载app,app营销网站建设JavaWeb 前端Web开发HTMLCSSjavaScript1.JS引入2.JS基础语法3.JS函数4.JS对象 BOMDOM文档对象模型JS事件监听VueVue常用指令Vue的生命周期 AjaxAxios 前端工程化环境准备NodeJS安装和Vue-cli安装vue项目Vue组件库Element组件的使用 Vue路由Nginx打包部署 前端Web开发
HTML
负… JavaWeb 前端Web开发HTMLCSSjavaScript1.JS引入2.JS基础语法3.JS函数4.JS对象 BOMDOM文档对象模型JS事件监听VueVue常用指令Vue的生命周期 AjaxAxios 前端工程化环境准备NodeJS安装和Vue-cli安装vue项目Vue组件库Element组件的使用 Vue路由Nginx打包部署 前端Web开发
HTML
负责网页的结构页面元素和内容。
CSS
负责网页的表现页面元素的外观、位置等页面样式如颜色、大小等。
javaScriptJs脚本语言。用来控制网页行为的它能使网页交互。交互效果
javaScript
1.JS引入
!-- 内部脚本 --
scriptalert(Hello JS)
/script!-- 外部脚本 --
script srcjs/demo.js/script2.JS基础语法 JS输出语句
script
//方式一: 弹出警告框
window.alert(hello js);//方式二: 写入html页面中
document.write(hello js);//方式三: 控制台输出,在console可以看到
console.log(hello js);
/scriptJS变量
var var声明的变量可以接受任何数据类型的值变量可以多次赋值后面值把前面覆盖 var声明的变量的作用于是全局的
script//var定义变量var a 10;a 张三;alert(a);var a 20;alert(a);
/scriptlet 局部变量不能重新定义 script{let x 1;x 2;alert(x);}/scriptconst 常量不能重新定义不能多次赋值
3.JS函数
script//定义函数function add(a,b){return a b;}//函数调用var result add(10,20);alert(result);
/script4.JS对象
Array
特点长度可变类型可变
script//定义数组var arr new Array(1,2,3,4);console.log(arr[0]);arr[10] 50;for (let i 0; i arr.length; i) {console.log(arr[i]);}//forEach遍历数组中有值的元素arr.forEach(function(e) {console.log(e)});//push添加元素到数组尾部arr.push(7,8,9);console.log(arr);//splice删除元素arr.splice(2,2) //从数组下标为2开始删删2个console.log(arr);
/scriptString
script//定义字符串var str Hello;
/script自定义对象
script//自定义对象var user {name:Tom,age:20,gender:male,eat: function(){alert(用膳);}};//获取对象中的属性console.log(user.name);//对象中方法的调用user.eat();
/scriptJSON
作为数据的载体在网络中传输。
json必须使用双引号
script//定义jsonvar jsonstr {name:Tom, age:18, addr:[北京,上海,西安]};alert(jsonstr.name) //结果为undefined因为jsonstr是一个字符串要是一个对象才可以//json字符串--js对象var obj JSON.parse(jsonstr);alert(obj.name)//js对象--json字符串var jsonStr JSON.stringify(jsonstr);
/scriptBOM
浏览器对象模型运行JavaScript与浏览器对话JavaScript将浏览器的各个部分封装为对象
BOM中提供了5个对象 主要学习下面两个对象 window浏览器窗口对象
script//BOM//window//获取window可以省略window.alert(Hello BOM);//方法//confirm - 对话框var flag window.confirm(你确认删除该记录吗);alert(flag);//定时器 - setInterval -- 周期性的执行某个函数var i 0;setInterval(function(){iconsole.log(定时器执行了i次)})//定时器 - srtTimeout --延迟指定时间执行一次setTimeout(function(){alert(JS)},3000);
/scriptlocation地址栏对象
script//location地址栏对象alert(location.href)location.href https://www.baidu.com/index.htm
/scriptDOM文档对象模型
将 HTML 文档的各个组成部分封装为对象
获取DOM中的元素对象Element对象 也就是标签 操作Element对象的属性标签的属性
bodyimg 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 获取元素-根据标签获取 - divvar 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 英才教育;/scriptJS事件监听
事件发生在HTML元素上的 “事情”
事件绑定 scriptfunction on(){alert(按钮1被点击了...)}document.getElementById(btn2).onclick function(){alert(按钮2被点击了...);}/script常见事件
Vue
前端js框架
Vue快速入门
!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
/htmlVue常用指令
v-bind、v-model、v-on、v-if、v-show、v-for
Vue的生命周期
主要掌握mounted挂载完成
Ajax
与服务器进行数据交互
异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。
Axios
前端工程化
环境准备
Vue-dli是官方提供的一个脚手架用于快速生成Vue的项目模板
Vue-cli主要提供了如下功能 统一的目录结构 本地调试 热部署 单元测试 集成打包上线
环境依赖NodeJS
NodeJS安装和Vue-cli安装
先下NodeJS再去下Vue-cli NodeJS下载地址 https://nodejs.org/en
Vue-cli安装 使用管理员身份运行命令行在命令行中执行如下指令 npm install -g vue/cli
vue项目 Vue组件库Element
安装ElementUI的组件库 npm i element-ui -S
Vue项目开发流程 组件的使用
官方文档https://element.eleme.cn/#/zh-CN/component/installation
button 按钮 Table 表格 Pagination分页 Dialog对话框 Form表单
Vue路由 Nginx打包部署
需要安装Nginx nginx默认占用80要改端口
