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:

<🎜>

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:

<div id="my_view"></div>

Data Model:

var myModel = {
  name: "Ashley",
  age: 24
};

View model:

var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});

Show data in view using {{ }} syntax:

<div id="my_view">
  {{ name }} is {{ age }} years old.
</div>

Bidirectional data binding

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

<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>

Filter

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

{{ name | uppercase }}

Rendering array

Render the array using the v-for directive:

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

Sorting with orderBy Filter:

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

Filter with filterByFilter:

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

Event Handling

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

var myViewModel = new Vue({
  // ...
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});

<button v-on:click="myClickHandler">Say Hello</button>

Create component

Create components using the Vue.component method:

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

Use the props attribute to pass component properties:

Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a/{{ channel | lowercase }}">{{ channel }} @Sitepoint</a>',
});

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!