开发

Vue笔记

Vue基础语法

  • v-text 设置文本;
  • v-html 设置文本，可解析html;
  • v-on 绑定事件，简写为@，例@click="f" @mouseover="over", 同时可在事件后面添加.修饰符对事件进行限制，例<input type="text" @keyup.enter="fe">仅在键盘输入enter键后进行触发fe函数；
  • v-show 通过display属性控制元素是否显示;
  • v-if 是否加载该元素dom树;
  • v-bind 绑定属性，简写为:，例 :src="imgSrc";
  • v-for 根据数据生成列表结构<li v-for="item in arr">{{ item }}</li>;
  • v-model 实现表单元素的双向绑定<input type="text" v-model="message">;

es6 语法

  1. 箭头函数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 传统写法
    const f = function(){
        ...
    }

    // 箭头函数（一个参数小括号可省略）
    const f = () => {
        ...
    }

    // 箭头函数（只有一行代码省略写法）
    const f1 = (num1, num2) => num1 + num2

    // 等效f1
    const f2 = (num1,num2) => {
        return num1 + num2
    }



  2. 箭头函数this指向: 向外层作用域中逐个查找，直到有this的定义
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 箭头函数this指向问题
    const obj = {
        f1() {
            setTimeout(function(){
                console.log(this); //window
            })

            setTimeout(() => {
                console.log(this); //obj对象
            })
        }
    }

vue-cli

npm run build卡住
运行

1
npm config set registry http://registry.cnpmjs.org

重新build即可