10.15 冯娜

学习日志

今天整理了对象和函数的创建方式、vue的事件绑定

一、对象的创建方式(6种)

1、字面量方式:

var car={
cname:'轿车',
width:'1.5m',
hiegth:'2m',
run:function(){
console.log('跑')
}
}
console.log(car.cname);
car.run();

2、表达式方式:

var person=new Object();//必须是 new
person.name='fn';
person.age='22';
person.say=function(){ //function
console.log('hi~');
}
console.log(person.name);
person.say();

3、工厂模式(Object关键字)推荐使用

function school(sclass,teacher){ //一定要传参
var obj=new Object();
obj.sclass=sclass;
obj.teacher=teacher;
obj.say=function(){
console.log('hi')
}
return obj;//一定要return
}
var school1=new school(50,300);
console.log(school1.teacher); //用新创建的对象名调用
school1.say();//用新创建的对象名调用

4、使用构造函数

function Dog(name,age){ //传参的重要性!!!!
this.name=name;
this.age=age;
this.say=function(){
console.log('汪汪汪')
}
}
var Dog1=new Dog('乐乐','2岁啦');
console.log(Dog1.name);
Dog1.say();

5、原型模式(prototype关键字)

function cat(){
cat.prototype.name='胖胖';
cat.prototype.age='1岁啦';
cat.prototype.hobby=function(){
console.log('看铲屎官喜欢我又干不掉我的样子')
}
}
var cat1=new cat();
console.log("我叫:"+cat.prototype.name);
cat1.hobby()

6、混合模式(原型和构造函数)

function book(name,price){//既然有构造函数,就不能忘记传参
this.name=name;
this.price=price;
}
book.prototype.sell=function(){ //使用原型创建方法
console.log('我可以给大家带来宇宙上的知识哦~')
}
var yuzhong=new book('宇宙的奥秘','¥49.9')
console.log(yuzhong.name,yuzhong.price)//用新创建的对象名调用
yuzhong.sell();

二、创建函数(3种)

1、函数声明(命名函数)

function sum1(num1,num2){
var sum=num1+num2;
console.log(sum);
}
sum1(1,2);

2、函数表达式(函数字面量)也就是匿名函数

var getSum=function(num1,num2){ //这里的getSum是变量名
return num1+num2;
}
console.log(getSum(2,3))

3、构造函数(参数必须加引号)不需要return

(1)

var Sum=new Function('a','b','return a+b');{
}
console.log(Sum(4,5))

三、事件绑定:

(1)body部分:

{{num}}
        <div>
            <button v-on:click='num++'>点击</button>
            <button @click="num++">点击加一</button>
            <button v-on:click="handle">点击2</button>
            <button @click="handle()">点击三</button>
            <button v-on:click="handle(123)">点击传参</button>
        </div>
    </div>

(2)js部分:

var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle: function() {
console.log(this === vm)
this.num++;//this就是vm 也就是vue的实例对象
}
}

        })

事件绑定传参:

methods:{
handle: function(p,p1) {
console.log(p,p1)
this.num++;
}
}

标签

评论