day 3 of learning vue

Time:2021-10-19

Key modifier

System modifier

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

.exactModifier

  • The. Exact modifier allows you to control events triggered by a precise combination of system modifiers.

Mouse button modifier

  • .left
  • .right
  • .middle

Why listen for events in HTML?

Form input binding

? For languages that need to use input methods (such as Chinese, Japanese, Korean, etc.), you will find that V-model will not be updated during the text combination of input methods. If you also want to handle this process, use the input event. After the test, it is found that it will be updated during the process of inputting Chinese?

text

  • 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:''
    }
    });

    Multiline text

  • 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
  • ? Interpolation () does not take effect in the text area, so V-model should be used instead.

Check box (single)

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

    The rest are very basic. All tests can be completed.

  • JS can write multi line strings in ES6..
    Vue.component('blog-post', {
    props: ['post'],
    template: `
      <div class="blog-post">
        <h3>{{ post.title }}</h3>
        <div v-html="post.content"></div>
      </div>
    `
    })

    Send messages to parent components through events

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

Throw a value using an event

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

I won’t read the rest for the time being. I’ve learned the basic documents.

This work adoptsCC agreement, reprint must indicate the author and the link to this article