day 3 of learning vue

按鍵修飾符

• 可以通過全域性 config.keyCodes 物件自定義按鍵修飾符別名
• 自動匹配按鍵修飾符
  • 你也可直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換為 kebab-case 來作為修飾符：

    <input @keyup.page-down="onPageDown">

  • 在上面的例子中，處理函式僅在 $event.key === 'PageDown' 時被呼叫。

系統修飾鍵

• .ctrl
• .alt
• .shift
• .meta

.exact 修飾符

• .exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。

滑鼠按鈕修飾符

• .left
• .right
• .middle

為什麼在 HTML 中監聽事件?

? 對於需要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 input 事件。測試後發現輸入中文的過程中會更新？

文字

• html

  <ul id="example-1">
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
  </ul>

• js

  var example1 = new Vue({
  el: '#example-1',
  data: {
    message:''
  }
  });

  多行文字

• html

  <ul id="example-1">
  <span>Multiline message is:</span>
  <p style="white-space: pre-line;">{{ message }}</p>
  <br>
  <textarea v-model="message" placeholder="add multiple lines">{{message}}</textarea>
  </ul>

• js
• ? 在文字區域插值 () 並不會生效，應用 v-model 來代替。

核取方塊(單個)

• html

  <ul id="example-2">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  </ul>

• js

  new Vue({
  el: '#example-2',
  data: {checked: false}
  });

  剩下的都很基礎，全部測試完畢即可。

• js在ES6中可以寫多行字串了。。

  Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
  })

  通過事件向父級元件傳送訊息

• html

  <div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
      v-on:enlarge-text="postFontSize += 0.1"
    ></blog-post>
  </div>
  </div>

• js

  Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text')">
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
  })
  
  new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [
      {id: 1, title: 'My journey with Vue', content: '...content...'},
      {id: 2, title: 'Blogging with Vue', content: '...content...'},
      {id: 3, title: 'Why Vue is so fun', content: '...content...'}
    ],
    postFontSize: 1
  }
  })

使用事件丟擲一個值

• html

  <div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
      v-on:enlarge-text="onEnlargeText"
    ></blog-post>
  </div>
  </div>

• js

  Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button v-on:click="$emit('enlarge-text', 0.2)">
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
  })
  
  new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [
      {id: 1, title: 'My journey with Vue', content: '...content...'},
      {id: 2, title: 'Blogging with Vue', content: '...content...'},
      {id: 3, title: 'Why Vue is so fun', content: '...content...'}
    ],
    postFontSize: 1
  },
  methods: {
    onEnlargeText: function (enlargeAmount) {
      this.postFontSize += enlargeAmount
    }
  }
  })

剩下的幾個暫時不看了，基礎文件學習完畢。