A.今天学到了什么
1.面向对象编程
<script>
// 构造函数 es6之前没有类的概念 用构造函数来模拟类
function person(age,name){
this.age=age;
this.name=name;
}
// js的继承是基于原型的继承
person.prototype.say=function(){
console.log(this.name+" "+this.age);
}
var xuao=new person(22,"xuao");
console.log(xuao.name);
xuao.say();
// 每一个对象都有一个__proto__属性,指向他的原型对象,共享原型上的属性或方法;
console.log(xuao.__proto__);
console.log(xuao.__proto__==person.prototype);
console.log(person.prototype.__proto__);
</script>
2.继承
<script>
Array.prototype.eat=function(){
alert("吃");
}
var a=[];
a.eat();
</script>
3.改变this指向
<script>
// call apply bind 可以改变this的指向
var name = "xiaoming";
function show() {
console.log(this.name);
}
var zhang = {
name: "zhang"
}
show();
show.call(zhang);
show.apply(zhang);
// call改变函数内部this关键字的指向
// call和apply的区别 call正常传参 ，apply的参数必须是数组
function show1(a, b) {
console.log(a + b);
console.log(this.name)
}
// show1(1,2);
show1.call(zhang, 1, 2);
show1.apply(zhang, [1, 2]);
</script>
4.bind
<button id="btn">btn</button>
<p id="p">p</p>
<script>
var btn=document.getElementById("btn");
var p=document.getElementById("p");
btn.onclick=function(){
console.log(this.id);
}.bind(p);
</script>
5.定时器的指向问题
<p id="p">p</p>
<button id="btn">btn</button>
<script>
var id="world";
var p=document.getElementById("p");
var btn=document.getElementById("btn");
// 函数作为普通函数调用的时候this指向window
btn.onclick=function(){
setTimeout(function(){
alert(this.id)
}.bind(this),1000)
}
</script>
6.箭头函数
<button id="btn">btn</button>
<script>
var id = "world";
var btn = document.getElementById("btn");
// 函数作为普通函数调用的时候this指向window
btn.onclick = function () {
setTimeout( ()=> {
alert(this.id)
}, 1000)
}
// btn.onclick = function () {
// var self=this;
// setTimeout(function() {
// alert(self.id)
// }, 1000)
// }
</script>
7.继承
<script>
function person(name,age){
this.name=name;
this.age=age;
}
person.prototype.say=function(){
console.log(this.name+" "+this.age)
}
function teacher(name,age){
person.call(this,name,age)
}
teacher.prototype=new person();
var xiaoming=new teacher("xiaoming",22);
xiaoming.say();
</script>
8.继承的其他方法
<script>
class person{
constructor(name,age){
this.name=name;
this.age=age;
}
say(){
console.log(this.name+" "+this.age);
}
}
class teacher extends person{
constructor(name,age,sex){
super(name,age);
this.sex=sex
}
eat(){
console.log(this.sex+"1111")
}
}
let xiaozhang= new teacher("xiaozhang",23,"男")
let xiaoming=new person("xiaoming",22);
xiaoming.say();
xiaozhang.eat();
</script>
9.方法的简写
<script>
var obj={
go:function(){
console.log("go");
},
// 简写
eat(){
console.log("eat");
}
}
obj.eat();
</script>
10.node.js
11.babeltest
详情见网上教程
12.vue.js
12.1用法
<p id="test">
<!-- 挂载点里的内容：模板 -->
{{msg}}
</p>
<script>
// 实例 只会渲染挂载点里的内容
new Vue({
// 挂载点
el:"#test",
data:{
msg:"hello world"
}
})
</script>
12.2模板写在实例中
<div id="root">
</div>
<!-- 模板写在实例中 -->
<script>
new Vue({
el: "#root",
template: "<div>{{msg}}</div>",
data: {
msg: "hello world"
}
})
</script>
12.3事件
<div id="root">
<!-- 触发的事件定义的方法,放在实例中的methods方法中 -->
<!-- v-on:click可以简写为@click -->
<div v-on:click="handleClick">{{content}}</div>
<div @click="handleClick">{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
// template:"<div>{{msg}}</div>",
data: {
content: "hello world"
},
methods: {
handleClick: function () {
//this.content指vue实例下的data下的content
this.content = "hello world"
}
}
})
</script>
12.4属性绑定
<div id="root">
<!-- v-bind:title表示title这个属性和data里的title绑定 -->
//
<div v-bind:title="title">hello world</div>
<div :title="title">hello world</div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "this is hell0"
}
})
</script>
12.5双向数据绑定
<div id="root">
<!-- v-model这个模板指令表示双向数据绑定 -->
<input type="text" v-model="content">
<div>{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "hello world"
}
})
</script>
12.6计算属性
<div id="root">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<p>{{firstName}}{{lastName}}</p>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName:"xx",
lastName:"yy"
}
})
</script>
12.7侦听器
<!-- 对姓名作任意变更,count加一 -->
<div id="root">
<input type="text" v-model="firstName">
<input type="text" v-model="lastName">
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
// 侦听数据的变化 做出相对的业务逻辑
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName+" "+this.lastName;
}
},
watch:{
firstName:function(){
this.count++;
},
lastName:function(){
this.count++;
}
}
})
</script>
12.8 v-if
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script>
new Vue({
el:"#root",
data : {
show:true,
},
methods : {
handleClick : function(){
this.show=!this.show;
}
}
})
</script>
12.9 v-test
<div id="root">
<!-- v-test 把所有的内容当成文本去渲染
v-html 把数据当成html标签去渲染 -->
<h1 v-html="msg"></h1>
</div>
<script>
new Vue({
el: "#root",
// template:"<div>{{msg}}</div>",
data: {
msg: "<h1>hello world</h1>",
}
})
</script>
