day 3 of learning vue

按键修饰符

系统修饰键

  • .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
      }
    }
    })

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

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!