10.31vue(一)

2018-10-31 19:58:45

耳机一个响一个不响,,,该换耳机了

又换个新老师预计讲五天的vue后面的路飞项目用!

这是vue参考连接: https://www.cnblogs.com/majj/category/1216624.html

这个老师小马哥是专业的前端老师!

详情可以看小马哥博客,里面很全前端资料!

贴上今天讲的东西,老师就是没有记课堂的习惯!!23333333333!

越努力,与幸运!万圣节快乐!!永远不要高估自己!

这是es6部分!

1.01-let和const

<script type="text/javascript">

    // let声明变量块级作用域,不能重复声明
    // let声明的变量 是块级作用域,不能重复声明
    // {
    //     // let a = 12;
    //     let a  = 12;
    //     let a  = 13;
    // }
   
    // console.log(a);

    // var a = [];
    // for (let i = 0; i < 10; i++) {
    //  a[i] = function () {
    //     console.log(i);
    // };
    // }
    // a[6](); // 6 10
    
    // 不存在变量提升
    console.log(foo); // 输出undefined
    var foo = 2;

    // const 声明常量，一旦声明，立即初始化，不能重复声明。
    </script>

02-模板字符串

    <script>
        var a = 1;
        var b = 2;

        // var str = "哈哈哈哈" + a + "嘿嘿嘿" + b;
        var str = `哈哈哈哈${a}嘿嘿嘿${b}`;
        console.log(str);
    </script>

03-箭头函数

    <script>
    // function(){} === ()=>{}

    // 1.this的指向发生改变，指向了定义对象时的对象
    // 2.arguments不能使用
    </script>

04-对象的单体模式

    <script>
    var person = {
        name:'张三',
        age: 18,
       
        fav(){
            console.log(this);
        }
    }
    person.fav();
    </script>

05-面向对象

 <script>
     // 构造函数的方式创建对象
    //  function Animal(name,age){
    //      this.name = name;
    //      this.age = age;
        
    //  }
    //  Animal.prototype.showName = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName2 = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName3 = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName4 = function(){
    //      console.log(this.name);
    //  }
    //  var dog = new Animal('日天',18)



    class Animal{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        showName(){
            // 一定不要加逗号
            console.log(this.name)
        }
    }
    var d = new Animal('张三',19);
    d.showName();
    </script>

这是用vue做的一个小小小项目!

先下载vue.js 

这是index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <div id="app">
        <h3>{{title}}</h3>
    </div>
    <script src="vue.js"></script>
    <script>
        // 1.创建vue实例化对象
        // 参数

        var app = new Vue({
            el:"#app",
            // 所有的数据都放在数据属性中
            data:{
               title:'土豆' 
            }
        })
    
    </script>
</body>
</html>

 

posted @ 2018-10-31 20:06  我想喝杨枝甘露~  阅读(176)  评论(0)    收藏  举报