Vue

变量定义

var

  • 全局变量
  • 存在变量提升现象
  • 可以重复定义
<script>
    console.log(a); #全局变量会提升，并不会在未定义之前报错
    {
        var a = 1;
        var a = 10;
    }
    console.log(a) # 输出10
</script>

　　

let 

  • 局部作用域
  • 不会存在变量提升
  • 变量不能重复定义
    console.log(a);  //报错
    {
        let a = 10;
        console.log(a) 
    }
    console.log(a) //报错

　　

<script>
    let b = [];
    for (let i=0;i <10;i++){
        b[i] = function () {
          console.log(i)
        };
    }
    b[4]();
</script>

 

const

  • 包含let特性
  • 只能定义常量

 

<script>
    const a = 5;
    const a = 6;
    
    const a = function () {
        console.log(1)
    };
    console(a)
</script>

　　

 

模板字符串

  • 使用反引号进行字符串拼接
    let name = 'wangys';
    let fullname = `我是${name}`;

 

箭头函数

  • function关键字没有了
  • 参数和函数体之间使用 =>
<script>
    // 普通用法 1
    // function add(x) {
    //     return x;
    // }

    // 普通用法 2
    // let add = function (x) {
    //     return x;
    // };

    // 箭头函数 1
    // let add = (x) => {
    //     return x;
    // };
    // 箭头函数 2
    let add = x => x;
    console.log(add(3));
</script>

 

Vue的基本用法

 

Vue介绍

Vue  angular React

https://cn.vuejs.org/v2/guide/    Vue官网

　

 

 

 

 

Vue的模板语法

<body>
    <!--闭合标签-->
    <div id="app" >
        <!--模板语法，使用双大括号，里面放Vue对象里的数据属性（data）-->
        <h2>{{ name }}</h2>
        <h2>{{ info.age }}</h2>
        <!--可以简单的运算-->
        <h2>{{ 1+2 }}</h2>
        <!--三元运算-->
        <h2>{{ 1>2? '真':'假' }}</h2>
        <!--字符串方法-->
        <h2>{{ name.split('').reverse().join('') }}</h2>

    </div>

  <!-- 引入vue.js-->
<script src="vue.js"></script>
<script>
    // 实例化Vue对象
    new Vue({
        // 绑定app
        el: '#app',
        // 设置数据属性
        data: {
            'name': 'wangys',
            'info': {
                'age': 18,
            }
        }
    })
</script>
</body>

　　

Vue的思想-数据驱动视图

 

 

Vue基本指令

 

posted @ 2019-10-18 18:40  择一事，终一生  阅读(97)  评论(0)    收藏  举报