按键修饰符

• 可以通过全局 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
    }
  }
  })

剩下的几个暂时不看了，基础文档学习完毕。

本作品采用《CC 协议》，转载必须注明作者和本文链接