es6 の新しい構文機能 + vue2 の学習メモ

1.es6

2015 年にリリースされた ECMA の第 6 版では、新しい文法機能が規定されています

2.`let`変数を宣言する

だった	させて
宣言された変数はジェイルブレイクされます	宣言された変数には厳密なスコープがあります
何度でも宣言可能	宣言できるのは 1 回のみ
変数のプロモーション == (宣言されていない変数はエラーを報告しません) ==	変動昇進なし

コード例:

<script>
  // {
    
    
  //   var a = 1;
  //   let b = 2;
  // }
  // console.log(a);
  // // Uncaught ReferenceError: b is not defined
  // console.log(b);

  // var a =1;
  // var a =2;
  // let b =11;
  // let b = 22;
  // // Identifier 'b' has already been declared
  // console.log(a,b);

  // undefined
  console.log(aa);
  var aa = 111;
  // Cannot access 'bb' before initialization
  console.log(bb);
  let bb = 222;

</script>

3.`const`定数の宣言

宣言後の変更は許可されません
宣言したら初期化する必要がある

  const aaa = 111;
  // Assignment to constant variable.
  aaa = 222;

4. 式の構造化

<script>
  let arr = [1, 2, 3];
  /**数组**/
  // let a = arr[0];
  // let b = arr[1];
  // let c = arr[2];
  // console.log(a, b, c);
  // let [a,b,c] = arr;
  // console.log(a,b,c);

  /**对象**/
  const person = {
    
    
    name: 'shigen',
    age: 20,
    hobby: ["1", "2", "3"]
  }

  // abc赋值为name
  const {
    
    name: abc, age, hobby} = person;
  console.log(abc, age, hobby);
</script>

5. 文字列

<script>
  // 字符串拓展
  let str = "hello.vue";
  console.log(str.startsWith("hello")); // true
  console.log(str.endsWith(".vue")); // true
  console.log(str.includes("e")); // true
  console.log(str.includes("hello")); // true

  // 字符串模板
  let ss = `<p>this is a <span>span</span></p>`;
  console.log(ss);

  // 字符串中插入变量和表达式
  const person = {
    
    
    name: "shigen",
    age: 20
  }
  const {
    
    name, age} = person;
  function func() {
    
    
    return "hello shigen";
  }
  // ${}中表达式
  let info = `我是：${
      
      name},我的年龄是 ${
      
      age + 10 }, ${
      
      func()}`;
  console.log(info);
</script>

6. 機能の最適化

6.1 関数のデフォルトパラメータ

  function add(a, b) {
    
    
    // b为空，b的值为1
    b = b || 1;
    return a + b;
  }

6.2 デフォルト値を使用したメソッドの宣言

  function add2(a, b = 1) {
    
    
    return a + b;
  }
  // 11 20
  console.log(add2(10), add2(10, 10));

6.3 不定パラメータ

  function func(...values) {
    
    
    console.log(`参数的长度${
      
      values.length}`);
  }
  func(1,2);
  // 参数的长度3
  func(10,20,30);

6.4 アロー関数

  var print = function (obj) {
    
    
    console.log(obj);
  }
  var print1 = obj => console.log(obj);
  print1('hello');

  var sum = function (a, b) {
    
    
    return a + b;
  }
  var sum1 = (a, b) => a + b;
  console.log(sum1(10, 20));

6.4.1 アロー関数 + 構造化

const person = {
    
    
  name : "zhangsan",
  ls: [12,"12","122"]
}
function hello(person) {
    
    
  console.log(`hello ${
      
      person.ls}`);
}
// 箭头函数+解构
var hello1 = ({
     
     ls}) => console.log(`hello ${
      
      ls}`);
hello1(person);

7. オブジェクトの最適化

7.1 `keys`、`values`、を取得する`entries`

const person = {
    
    
  name : "zhangsan",
  age: 21,
  ls: [12,"12","122"]
}
console.log(Object.keys(person));
console.log(Object.values(person));
console.log(Object.entries(person));

7.2`assign`集計

  const target = {
    
    a: 1};
  const source1 = {
    
    b: 2};
  const source2 = {
    
    c: 3};
  // 要变成 {a:1,b:2,c:3}
  Object.assign(target, source1, source2);
  console.log(target);

7.3 宣言オブジェクトの省略形

const age = 11;
const name ="shigen";
const person1 = {
    
    age:age, name:name};
const person2 = {
    
    age, name};
console.log(person2);

7.4 オブジェクトの関数属性の略称

let person3 = {
    
    
  name: "shigen",
  eat: function (food) {
    
    
    console.log(`${
      
      this.name} 在吃 ${
      
      food}`);
  },
  // 获取不到this
  eat2: food => console.log(`${
      
      this.name} 在吃 ${
      
      food}`),
  eat3(food) {
    
    
    console.log(`${
      
      this.name} 在吃 ${
      
      food}`);
  }
}

person3.eat("apple");
person3.eat2("banana");
person3.eat3("orange");

7.5 オブジェクト展開演算子

7.5.1 ディープコピーオブジェクト

  // 对象的深拷贝
  let p1 = {
    
    name: "shigen", age:15};
  let someone = {
    
    ...p1}
  console.log(someone);

7.5.2 オブジェクトの結合

  let age1 = {
    
    age: 15}
  let name1 = {
    
    name: "zhangsan"}
  let p2 = {
    
    name: "lisi"}
  p2 = {
    
    ...age1, ...name1}
  // {age: 15, name: 'zhangsan'}
  console.log(p2);

7.6 `map`_`reduce`

7.6.1`map`使用方法

関数を受け入れ、この関数で元の配列内のすべての要素を処理し、それらを新しい配列に入れて返します。

  let arr = ['1', '-10', 45, '-100']
  arr = arr.map(item => item*2);
  // 2,-20,90,-200
  console.log(arr.toString());

7.6.2`reduce`使用法

配列内の削除された要素や値が割り当てられていない要素を除き、配列内の各要素に対してコールバック関数を順番に実行します。

/**
   * 1.previousValue 上一次调用回调的返回值/或者是提供的初始值：initialValue
   * 2.currentValue 数组中当前被处理的元素
   * 3.index
   * 4. array 调用reduce的数组
   */
let result = arr.reduce((a,b) => {
    
    
  console.log(`previousValue: ${
      
      a} currentValue: ${
      
      b}`);
  return a+b;
}, 100);
// -128 ===> -28
console.log(`result: ${
      
      result}`);

7.7`promise`と`reject`

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>

  function get(url) {
    
    
    /**
     * resolve 成功往下传递
     * reject 失败往下传递
     */
    return new Promise((resolve, reject) => {
    
    
      $.ajax({
    
    
        url: url,
        success: function (data) {
    
    
          resolve(data);
        },
        error: function (data) {
    
    
          reject(data);
        }
      })
    })
  }

  get(`mock/user.json`)
  .then((data) => {
    
    
    console.log('查询用户成功', data);
    return get(`mock/user_course_${
      
      data.id}.json`);
  })
  .then((data) => {
    
    
    console.log('课程查询成功', data);
    return get(`mock/score_${
      
      data.course_id}.json`);
  })
  .then((data) => {
    
    
    console.log('成绩查询成功', data);
  })
  .catch((err) => {
    
    
    console.log('出现异常', err);
  });


</script>

8. モジュール性

8.1 モジュール性とは何か

Java のインポートパッケージと同様に、コードを分割して再利用しやすくします。

exportモジュールの外部インターフェースを指定するために使用されます

import他のモジュールが提供する関数をインポートするために使用されます

const util = {
    
    
  sum(a, b) {
    
    
    return a + b;
  }
}

export {
    
    util}

// ---------------------
import util from './util.js'
import {
    
    name,age} from './user.js'
util.add(1,2);

9.vueの利用

9.1 npmの使用

npm init -y
npm install vue

9.2 入門デモ

<div id="app">
  <h2>{
    
    {
    
    name}} is good!</h2>
</div>

<script src="../../../js/vue.js"></script>
<script>
  let vm = new Vue({
    
    
    el: '#app',
    data: {
    
    
      name: "shigen"
    }
    
  });
</script>

9.3 vue の命令

補間式はタグボディ内にのみ記述でき{ {}}ます
v-htmlそしてv-text
v-bind:href='link'バインディングプロパティ - 一方向バインディング
v-model——- 双方向バインディング
v-onバインドイベント
- イベント修飾子
- v-on:click=func()または@click=func()
- キー修飾子
- v-on:keyup.up="num+=2"

.stop: イベントのバブリングを防止します。JavaScript のevent.stopPropagation() に相当します。

.prevent: プリセット動作の実行を防止します。JavaScript のevent.preventDefault() に相当します。

.capture: バブリングをキャプチャします

.self: イベントをそれ自体にバインドします。イベントをトリガーできるのはそれ自体だけです

.once: 1 回だけトリガーします

.passive: イベントをブロックしないデフォルトの動作

v-forトラバース
v-ifそしてv-show v-show表示属性値を制御するだけです
計算されたプロパティとリスナー

<script>
  let vm = new Vue({
    
    
    el: '#app',
    data: {
    
    
      xyjPrice: 99.87,
      shzPrice: 89.99,
      xyjNum: 1,
      shzNum: 1,
      msg: ''
    },
    computed: {
    
    
      totalPrice() {
    
    
        return this.xyjNum * this.xyjPrice + this.shzNum* this.shzPrice;
      }
    },
    watch: {
    
    
      xyjNum(newVal, oldVal) {
    
    
        if (newVal >= 3) {
    
    
          this.msg = "不能超过三本";
          this.xyjNum = 3;
        } else {
    
    
          this.msg = ''
        }
      }
    }
  });
</script>

フィルター

テキストの書式設定操作、二重括弧補間/v-bind 式を処理するために一般的に使用されます。

<body>
<div id="app">
  <ul>
    <li v-for="(user,index) in userList">
      {
    
    {
    
    user.name}} ==> {
    
    {
    
    user.gender === 1 ? '男' : '女'}} ==> {
    
    {
    
    user.gender | genderFilter }}
    </li>
  </ul>
</div>

<script src="../../../js/vue.js"></script>
<script>
  let vm = new Vue({
    
    
    el: '#app',
    data: {
    
    
      userList: [
        {
    
    name: 'shigen', gender: 1},
        {
    
    name: 'zhangsan', gender: 0}
      ]
    },
    filters: {
    
    
      genderFilter(gender) {
    
    
        return gender === 1 ? '男' : '女';
      }
    }
  })
</script>
</body>

// 定义全局的过滤器  
Vue.filter('gFilter', function (val) {
    
    
  return val === 1 ? '男' : '女';
})

10. vueのコンポーネント化

10.1 コンポーネントをグローバルに宣言する

コンポーネントのデータはメソッドの戻り値です

<body>
<div id="app">
  <button v-on:click="count++">被点击了 {
    
    {
    
    count}} 次</button>
  <counter></counter>
</div>
<script src="../../../js/vue.js"></script>
<script>
  Vue.component('counter', {
    
    
    template: '<button v-on:click="count++">被点击了 {
    
    {count}} 次</button>',
    data() {
    
    
      return {
    
    
        count: 0
      }
    }
  });

  let vm = new Vue({
    
    
    el: '#app',
    data: {
    
    
      count: 0
    }
  });
</script>
</body>

10.2 コンポーネントをローカルで宣言する

const buttonCounter = {
    
    
  template: '<button v-on:click="count++">被点击了 {
    
    {count}} 次</button>',
  data() {
    
    
    return {
    
    
      count: 0
    }
  }
};
components: {
    
    
  'button-counter': buttonCounter
}
<button-counter></button-counter>

11. ライフサイクル

Vue インスタンスのライフサイクル

12.node.js

サーバー上で実行されるJavaScript

# 查看node的版本
node -v
# 运行node
node hello.js                                                                                        
hello js!