Getting Started With Vue.js

Quick view of Vue.js core concepts

Vue.js is a JavaScript library based on the MVVM architecture, used to build user interfaces. It is simpler, easier to learn and flexible than AngularJS. Its core functions include:

• Data binding: supports one-way and two-way data binding. The v-model instruction implements two-way binding, and the model changes are reflected in the view in real time.
• Instructions and Filters: Instructions are used to operate the DOM, and filters are used to process data.
• Componentization: Create reusable custom HTML elements to improve code readability and maintenance, and use the props attribute to pass component properties.

Note: This tutorial is based on Vue.js 1.x version. Please refer to other resources for Vue 2.x tutorial.

Add Vue.js to the page

It is recommended to use CDN to introduce Vue.js:

<code class="language-html"></code>

Create a view model

The

Vue.js view model is created using the Vue class. View model connects data model and view.

Example:

HTML view:

<code class="language-html"><div id="my_view"></div></code>

Data Model:

<code class="language-javascript">var myModel = {
  name: "Ashley",
  age: 24
};</code>

View model:

<code class="language-javascript">var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});</code>

Show data in view using {{ }} syntax:

<code class="language-html"><div id="my_view">
  {{ name }} is {{ age }} years old.
</div></code>

Bidirectional data binding

Use the v-model instruction to achieve two-way data binding:

<code class="language-html"><div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name">
  <p>{{ name }} is {{ age }} years old.</p>
</div></code>

Filter

Filters are used for data processing, and are called using | symbols:

<code class="language-html">{{ name | uppercase }}</code>

Rendering array

Render the array using the v-for directive:

<code class="language-html"><div id="my_view">
  <ul>
    <li v-for="friend in friends">{{ friend.name }}</li>
  </ul>
</div></code>

Sorting with orderBy Filter:

<code class="language-html"><li v-for="friend in friends | orderBy 'age'">{{ friend.name }}</li></code>

Filter with filterByFilter:

<code class="language-html"><li v-for="friend in friends | filterBy 'a' in 'name'">{{ friend.name }}</li></code>

Event Handling

Define event handler function in the methods property of the view model, and bind events using the v-on directive:

<code class="language-javascript">var myViewModel = new Vue({
  // ...
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});</code>

<code class="language-html"><button v-on:click="myClickHandler">Say Hello</button></code>

Create component

Create components using the Vue.component method:

<code class="language-javascript">Vue.component('sitepoint', {
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a">Sitepoint</a>'
});</code>

Use the props attribute to pass component properties:

<code class="language-javascript">Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a/%7B%7B%20channel%20%7C%20lowercase%20%7D%7D">{{ channel }} @Sitepoint</a>',
});</code>

Summary

This tutorial introduces the basic concepts of Vue.js, including data binding, directives, filters, event processing, and component creation. For more advanced features, please refer to the official documentation.

(Subsequent content, such as FAQs, can be added as needed to maintain consistency with the original text.)

The above is the detailed content of Getting Started With Vue.js. For more information, please follow other related articles on the PHP Chinese website!