[Vue, the first day of self-study]

1. Create your first Vue application

Next we create our first Vue application.

View layer - HTML code is as follows:

<div id="app">
  {{ message }}
</div>

 Model layer - JavaScript code is as follows (must be placed after the specified HTML element):

new View({
    el: '# app',
    data: {
        message:'Hello World!'
    }
});

 

• two-way data binding

Next, we create a view layer HTML file: vueapp.htm, and a model layer file: vueapp.js, and then complete the underlying logic in the middle through vue.js (using the v-model instruction) to achieve the effect of binding. Change any of these layers and the other layer will change.

vueapp.html file code:

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

 vueapp.js file code:

new View({
  el: '#app',
  data: {
    message: 'Rookie tutorial!'
  }
})

 

 

In the above example, {{message}} will change according to the input of the input box. If you don't want it to change, you can modify it as:

{{* message }}

 Some simple expressions are also supported:

<!-- String concatenation-->
{{ message + 'Official website address: www.runoob.com' }}
<!-- String reverse -->
{{ message.split('').reverse().join('') }}

 

• list output

List output is done using v-for (v-for replaces v-repeat in versions prior to 1.0) this command:

<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ all.text }}
    </li>
  </ul>
</div>
<script>
    new View({
  el: '#app',
  data: {
    everyone: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})
</script>

 

• Conditional judgment

In a string template, like Handlebars, we would have to write a conditional block like this:

<!-- Handlebars template -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

 In Vue.js, we use the v-if directive to achieve the same functionality:

<h1 v-if="ok">Yes</h1>

 You can also add an "else" block with v-else:

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

 

Because v-if is a directive, it needs to be added to an element. But what if we want to toggle multiple elements? At this point, we can use a <template> element as a wrapper element and use v-if on it, and the final rendering result will not include it.

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

• v-show

The effect of v-show is similar to that of v-if, except that the elements of v-show will always be rendered and kept in the DOM, and v-show does not support the <template> tag.

<h1 v-show="ok">Hello!</h1>

• filter

Similar to pipes in Linux, vue.js also uses |:

{{message | uppercase}}

 This will output the capitalization of the message, and the filters can also be chained together:

{{message | reverse | uppercase}}

 

Here reverse is not a built-in filter, we can customize it with Vue.filter: 

 

Vue.filter('reverse', function (value) {
    return value.split('').reverse().join('')
})