一、HTML
1、概述
是超文本标记语言，专门用来完成网页的制作
是由大量的标记/标签组成的，类似于< >
结构：文档声明行，头部分使用 head 标签，体部分使用 body 标签(控制浏览器要展示的内容)
案例格式
<!DOCTYPE html> <!-- 文档声明行,表示这是一个HTML网页 -->
<html> <!-- HTML网页文件里的,根元素/标签,成对儿出现的标签 -->
<head> <!-- 网页的头部分,用来描述网页的信息 -->
<meta charset="utf-8"> <!-- 网页要使用的编码,防止中文乱码 -->
<title>hello</title> <!-- 网页的标题 -->
</head>
<body><!-- 网页的体部分,用来控制网页中即将展示的数据 -->
test html~~ 你 好 <br />
test html~~ 你好
test html~~ 你好
test html~~ 你好
<!-- br是HTML中的换行符, 是HTML里的空格 -->
</body>
</html>2、HTML的常用标签
1.标题标签：<h1~h6>标题内容</h1~h6>
2.列表标签：
有序：ol li，ol 用来定义有序列表orderlist，li 是列表项，
无序：ul li，ul 用来定义无序列表unorderlist，li 是列表项。
格式：<ol> <li></li> </ol>
3.图片标签：
src 属性用来指定图片的路径，width 属性用来指定图片的宽度，
单位是像素px，height属性用来指定图片的高度。
格式：<img src="图片名字" width="200px" height="100px"/>
4.超链接标签：href 指定要跳转的位置，target 指定要打开的方式
格式：<a href="跳转位置" target="打开方式"> 内容 </a>
回到顶部格式：<a name="_top"> 回到的位置内容 </a>
内容......
<a href="#_top">回到顶部</a>
5.Input标签：
普通输入框：<input type="text"/>
密码输入框：<input type="password"/>
日期输入框：<input type="date"/>
星期输入框：<input type="week"/>
数字输入框：<input type="number"/>
邮箱输入框：<input type="email"/>
单选框：<input type="radio"/>后面插入内容
多选框：<input type="checkbox"/>后面插入内容
按钮：<input type="button" value="保存"/> 或者 <button>按钮的另一种写法</button>
提交：<input type="submit" value="提交"/> 或者
<button type="submit">提交的另一种写法</button>
6.table标签
表格标签：table 是向网页中添加表格，tr 是表格里的行，td 是行里的列元素
border 用来设置边框，width 设置宽度，height 高度，cellspacing 单元格的间距，
bgcolor 是背景色，th 表头标签(加粗，居中)，colspan 列合并，rowspan 和并行。
7.form表单验证：只有form标签可以提交数据，表单标签form比表格标签多了提交功能。
要求：必须用表单标签 + 必须有提交按钮 + 必须有name属性。(包裹table标签)
二、CSS
1、概述
是专门用来修饰HTML网页的一个技术，全程是层叠样式表stylesheet
使用位置：
1.行内CSS：是指给这行代码添加css的修饰
2.内部CSS：是指在head标签中使用style标签，添加css的代码
3.外部CSS：是指会单独生成 .css文件，里面写css代码，哪个网页需要就引入到哪个网页里
# link引用一个外部的css文件，rel用来说明文件的类型，href用来指定文件的位置
语法：<link rel="stylesheet" href="XX.css">
语法：
选择器{ 属性名：属性值；属性名：属性值;...}
2、CSS选择器
1.概述：CSS提供特殊语法，可以帮你选中元素
分类：基本选择器(标签名，类class，id) + 高级选择器(分组，属性)
基本选择器：
1）标签名选择器：input 等
2）类class选择器：给元素加 class属性(值可以重复) + 通过 . 获取class属性的值
3）id选择器：给元素加 id属性(值不重复) + 通过 # 获取id的属性的值
高级选择器：
1）分组选择器：可以使用多种选择器选中多个元素，多种选择器用逗号隔开
2）属性选择器：如 href ，type=" "等用【】括起来
制作可以提交上传的表单：
1）要求：使用 form + 有 submit 按钮 + 有 name 属性
2）单选和多选提交了on，添加value属性，会提交value属性的值
3）优化了下拉框提交文字的，给下拉框添加value属性，会提交value属性的值
4）form标签的 method 用来指定数据的提交方式默认是 get
action 用来指定一段java程序的访问方式
三、JS
1、概述
全称是javascript，是脚本语言，只能在浏览器中运行。js是一个基于对象和事件驱动的脚本语言。
1）基于对象：js也能像java一样通过nwe自定义js对象。
2）事件驱动：js也可以让网页动起来，什么时候要触发执行js代码。
js的特点：
1）直译式：不需要编译过程。
2）弱类型：js不关心类型。
2、JS的语法(与java语法大致相同)
1）JS的数据类型：number / string / boolean / null / undefined
2）JS中定义变量用 var 与 let 即可，输出用 alert ，后台查看用 console.log
3）接受用户数据：var score = prompt(" 请您输入~ ")
3、定义数组
1）方式一：let a = new Array()；
2）方式二：let a = [ ]；
3）for循环遍历：for（let i in a）{} ，i 是数组下标，c 为数组名。
4）优势1：js是弱类型的语言，js的数组可以存放各种类型的数据 ( java里的Object[ ] 也可以)
优势2：js里的数组长度，随时可以变。例（ a [ 100 ] = 'ok' ）
4、JS函数
1）方式一：通过 function 关键字声明函数
声明：function 函数名称 ( [ 参数列表 ] ){ 函数体 }
调用：函数名称 ( [ 参数列表 ] )；
2）方式二：通过函数直接量声明函数
声明：var 函数名称 = function ( [ 参数 ] ){ 函数体 }
调用：函数名称 ( [ 参数列表 ] )；
基本的对象功能：
<script>
function text1(){
//String对象的功能
let s = 'abcefgh'
console.log(s.length);//获取字符串长度
console.log(s.toUpperCase());//全转大写
let b = s.substring(1,5);//截取(下标，含头不含尾)
console.log(b);
console.log(s.concat('hello'));//拼接
//Math对象的功能
console.log(Math.PI);//π的值
console.log(Math.random());//随机数 0~1
console.log(Math.random() * 10);//随机数 0~10
console.log(Math.round(1.67));//对小数的处理，四舍五入取整
//Array对象
let a = [2,3,8,7,5];
console.log(a.toString());//打印数组里的数据
console.log(a.sort());//对数组排序，默认从小到大
//Window对象
window.alert('啊啊哈哈~');//弹出框
window.prompt("输入：");//输入框
window.confirm('ddd');//确认框
}
text1();
</script>5、自定义对象
方式一：
1）声明对象：function Person () {}
2）创建对象：var p = new Person();
3）设置属性：p.name = "少爷"；p.age = 22;
4）设置方法：p.run = function () { console.log(); }
5）访问p对象：p.run();
/* 自定义对象*/
function Person(){ } /* 定义对象*/
var p1 = new Person(); /* 创建对象*/
p1.name="张三";
p1.age=20;
console.log(p1);
p1.say = function(){ /* 定义函数*/
console.log("haha");
}
p1.say(); /* 函数调用*/方式二：
var p2 = {
"pname":"李四",
"page":100,
"psay":function(){
/* this使用p2里定义的 */
console.log(this.pname+this.page);
}
}
console.log(p2);
p2.psay(); /* 函数调用*/四、VUE
1、概述
是一个轻量级的MVVM的框架，可以使用数据驱动 / 双向绑定，组件化，路由...
特点：1）综合了HTML CSS JS的技术
2）渐进式的框架：按需配置，vue.js + ？？？
3）优化了DOM操作网页元素的方式，使用了CSS的选择器
2、使用步骤
1）在网页中引入 vue.js 文件；
2）数据渲染区：获取vue的数据；
3）准备数据，将被数据渲染区来获取；
3、MVVM
是Vue框架的一种设计思想，实现代码间的松耦合。
好处：实现松耦合，分层的架构思想
1）M：Model 模型，数据；
2）V：View视图，要展示数据的地方；
3）VM：ViewModel，联系着M和V。
4、Vue的基础语法
1）运算符
算术运算符：{{3+2}} {{3-2}} {{3*2}} {{3/2}} {{3%2}}
三元运算符：{{age > 18 ? '成年人' : '未成年'}}
<div>字符串的内容是：{{属性名}}</div>
<div>字符串的长度是：{{属性名.length}}</div>
<div>字符串拼接后：{{属性名.concat('ddd')}}</div>
<div>字符串截取后：{{属性名.substring(1,3)}}</div>2）创建函数
methods：vue里创建函数，必须放在methods里
3）三种data的写法
第一种形式：标准写法
第二种形式：定义函数，返回对象
第三种形式：定义函数，es6的简写法
5、Vue指令
概述：是一些特殊的命令，都是vue提供的，并且有标识：v-
使用方式：在标签上，当做一个属性来用；
常见的指令：v-model v-if v-for v-bind v-on...
1）v-model指令：实现了双向绑定 / 数据驱动，值是属性名。
2）v-text / v-html指令：用来获取属性的值，后者可以解析HTML标签，值是属性名。
3）v-cloak指令：用来解决闪现的问题，给数据渲染区添加 v-cloak 属性的元素，然后隐藏。
4）v-if指令：用来完成判断，判断条件满足就展示，不满足不展示。
v-show 和 v-if 的区别：判断条件满足就展示，不满足判断条件的元素不会展示，
v-show 会加载没有满足条件的元素，背后使用css的样式，让元素隐藏了.style="display:none;"
v-if 根本就不会加载没有满足条件的元素。
( v-if / v-else-if / v-else 指令：类似于java里的嵌套分支)
5）v-for指令：循环获取数据，o,i in hobby 其中 o 是数据，
hobby 是data 里的数组名称，i 是下标。
6）v-on指令：用来给元素添加vue的事件，v-on可以简写成一个@
click 是单机，dblclick是双击
7）v-bind指令：把后面的值当变量来解析，获取变量的值，也可以简写。
6、Vue组件
1）概述：是Vue框架提供的一个功能，扩展了HTML的标签。
使用：像使用HTML标签一样，直接使用Vue组件就可以了。
好处：提高了前段代码的复用性。
分类：1.全局组件 -- Vue.component(组件名，组件的功能)；
2.局部组件 -- 给Vue对象添加新的属性components。
2）全局组件：可以被多个Vue对象使用，封装了前段的代码提高了复用性，
放在 new Vue() 之前，表示所有对象都能用。
3） 局部组件：只能在指定的Vue对象指定的数据渲染区来使用
7、Vue路由
概述：根据用户即将要访问的请求方式，决定交给哪个组件来处理这次请求。
开发步骤：同时导入 vue.js 文件和 vue-router.js 文件
1.使用了路由，router-link 将被浏览器翻译成a标签，to将浏览器翻译成href属性。
2.路由出口，将在这里展示 匹配到的组件的内容
3.定义组件
4.VueRouter对象时vue提供的用来完成路由功能的核心对象
router属性是VueRouter对象的核心属性，用来确定详细的路由规则
5.总体思路
8、Vue的Ajax
1）概述：全称为异步的js和xml，
同步保证了数据的安全，牺牲了效率(排队)；异步的效率高，牺牲安全(不排队)。
开发步骤：先导入axios.min.js文件 + 使用了正确语法发起一个Ajax请求。
2）语法：axios.get(url,params).then(abc =>{alert(abc);})
其中，参数url必要的 .params是请求参数可以省略 .abc是表示请求成功后程序的返回值。
3）使用axios：需要先创建一个json文件。
五、Vue项目
1、Vue脚手架
1）Vue生命周期：三大阶段分别为初始化阶段，服务中阶段，销毁阶段
生命周期函数 / 钩子函数：
1.组件刚被创建时：beforeCreate created
2.模板 / 挂载点 被加载时：beforeMount mouted
3.组件被更新数据时：beforeUpdate updated
4.销毁阶段：beforeDestroy destroyed
2）部分概念
npm：是包管理器，从网站上，下载/更新/删除 一些包
webpack：是一个快速构建(下载)前端项目的工具，快速的下载，打包，压缩...
3）修改npm网站
npm config get registry #查看npm下载的网址
npm config set registry https://registry.npm.taobao.org #修改npm下载的网址4）安装脚手架
C:\Users\WangYiBo>npm install vue-cli -g #下载脚手架,下载一路没有飘红ERR.
C:\Users\WangYiBo>vue -V #查看脚手架的下载版本
C:\Users\WangYiBo>where vue #查看下载好的位置
C:\Users\WangYiBo\AppData\Roaming\npm\vue2、Vue项目
1）创建工作空间：新建一个存放代码的文件夹。
2）下载项目：打开存放代码文件夹的命令窗口；
E:\workspace\vue>vue init webpack jt09
3）启动项目命令：npm run dev；
3、自定义Vue组件
概述：扩展了HTML的标签，可以使用更多的组件，拼接一个大的网页。
1）创建一个新的组件(在 src / components 里)
2）注册组件(修改App.vue)
4、Vue项目整合ElementUI
1）下载资料：
E:\workspace\vue\jt10>npm i element-ui -S2）配置：修改 main.js，引入Element。
import ElementUI from 'element-ui'; //导入element
import 'element-ui/lib/theme-chalk/index.css';//导入element的css
//以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
Vue.use(ElementUI);//使用element3）使用ElementUI：参考ElementUI网站组件。
5、Vue项目中自定义路由功能
1）自定义组件
2）创建router.js文件于src包下 (复制router / index.js文件进行修改)
3）修改App.vue文件
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
