# 1. 网页设计中的三剑客
- html(内容)
- css(样式)
- javascript(用户交互)
2. JavaScript
ECMA(欧洲计算机制造协会)
Ecmascript标准:
es5
es6
js是一套运行在浏览器的脚本语言,每个浏览器都有一个解析js的引擎,webkit,v8
3. JavaScript的介绍
-
js是一个脚本语言
-
运行在浏览器
-
现在主流的浏览器都支持es6(IE老版本对es6的支持不是很好,有兼容问题)
-
js是一个面向对象+面向过程语言
-
js是一种解释型语言(不需要编译器进行编译,js的解析引擎直接解析执行)
-
javascript与java没有任何关系 “雷锋塔—雷锋”
-
js是弱类型语言(支持类型推断)
4. 在浏览器编写js的代码
在浏览器的控制台直接可以编写js代码进行执行的
5. IDEA(WebStorm)中编写js代码
-
内部编写(方便开发调试,但生产环境不建议这样使用)
<script type="text/javascript"> console.log("hello") </script> -
引入外部的js文件(生产环境建议使用)
先新建一个base.js的文件
<script src="base.js" type="text/javascript"></script>
6. 设置IDE的解析引擎
7. js中的变量的定义
EcmaScript5:变量的定义使用var关键字
Ecmascript6: 变量的定义使用let关键字,常量的定义使用const关键字
8. 变量的类型
-
number
-
string
-
boolean
-
undefined
-
null
打印a的类型
let a = 10; console.log(typeof (a))
9. 运算符
+
-
*
/
%
++
--
&&
||
!
>
<
>=
<=
!=
==
===(带类型的判断)
10. 关于boolean的问题
-
0是false,非0位true
-
空字符串，即""为false
-
undefine为false
-
null为false
-
0.0为false
-
{}为true
-
[]为true
trim()去掉两边的空格，前者成立则显示前者
let a = " ".trim() || ""||"hello3"
console.log(a)
被认作是false(五大金刚):
0
""
0.0
null
undefine
11. 运算符的优先级
()>数学运算符>关系运算符>逻辑运算符
12. 数组
保存一组数据的集合
数组的定义: let ages = [10, 20, 30, 5, 25];
数组元素的获取: ages[1],可获得上面数组的20
数组的遍历:
for (let i = 0; i < ages.length; i++) {
console.log(ages[i])
}
//key为数组的索引，for in 遍历可以包含索引和键值对
for(let key in ages){
console.log(ages[key])
}
数组中还可以存放key-value的数据:
let ages = [10, 20, 30, 5, 25];
ages['name'] = 'admin'
13. js中数组的高级操作
let ages = [10, 20, 30, 35, 5];
ages.push(25); //在尾部追加元素
ages.unshift(8)//在首部追加元素
ages.pop();//在尾部移除元素
ages.shift();//在首部移除元素
ages.splice(2,1)//移除指定位置的元素,移除2号位的一个元素
ages.splice(1,1,300);//替换指定位置的元素，1号位的一个替换成300
let ret = ages.concat([10,0,1]);//两个数组进行拼接返回新数组
const ret = ages.includes("java1");//数组中是否包含某个元素
ages.forEach(ele=>console.log(ele));//遍历元素
let ret = ages.map(ele => ele * 10);//映射元素，即给每个元素乘10
const ret = ages.filter(ele => ele % 2 == 0);//过滤，取出偶数
14. 面向对象编程
创建对象的第一种方式:
const obj = {"name": "admin", "age": 20};
obj.say = function (){
console.log(111)
}
obj.say()
创建对象的第二种方式:
function Person(name, age) {
this.name = name
this.age = age
}
Person.prototype.say = function () {
console.log("my name=" + this.name)
}
let person1 = new Person("小花", 30);
let person2 = new Person("小明", 30);
person1.say();
person2.say();
15. js中获取元素节点
const btn = document.getElementById("btn");
const btn = window.document.querySelectorAll("#btn");
16. js中元素的点击事件
<div>
<button id="btn" onclick="doClick()">点我呀</button>
</div>
<script>
const btn = window.document.querySelectorAll("#btn");
function doClick(){
console.log("....")
}
</script>
17. Vue
前端框架
ue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue是一个渐进式框架(在引入Vue的时候老项目可以渐进式的引入)
组件是一个小型的vue实例
18. Vue中的插值表达式
<h1>{{msg}}</h1>
19. 数据的单向数据绑定
v-bind:value
:value
//例如
<input type="text" placeholder="请输入用户名 " :value="username">
20. 双向数据绑定
v-model:value="xxx"
21. 事件处理
<div id="app">
<button v-on:click="doClick">
点我
</button>
</div>
<script>
const vm = new Vue({
el: "#app",
data() {
return {
msg: "nihao"
}
},
methods: {
doClick(event) {
console.log(event.target.innerText + this.msg);
}
}
});
</script>
