Vue. Js core features

  • Data-driven view

  • Componentized development

1. Data-driven view

• Data changes are automatically updated to the corresponding element without manual manipulation of the DOM, a behavior known as one-way data binding (data changes cause views to change).

• Bidirectional data binding can be set for input-able elements such as input boxes. On the basis of data binding, bidirectional data binding can automatically update the input content of elements to data, and realize the bidirectional binding between data and element content.

The data driven view of vue.js is implemented based on the MVVM model.

MVVM (Model – View – ViewModel) is a software development idea

  • The Model layer, which represents data

  • View layer, which stands for View template

  • ViewModel layer, which represents the business logic processing code

Advantages and disadvantages of data-driven view:

• Data-driven views based on the MVVM model liberate DOM manipulation

• View and Model processing are separated to reduce code coupling

• However, Bug debugging becomes more difficult with bidirectional binding

• Large projects have too many Views and models and high maintenance costs

2. Componentized development

• Component-based development allows us to encapsulate web functions as custom HTML tags, which can be reused by writing custom tag names.

• Components can encapsulate not only structure, but also style and logic code, greatly delivering development efficiency and maintainability.

Vue.js basic syntax

Vue instance

Vue instances are objects created through Vue functions and are the basis for using Vue functionality.

Basic options

El options

Used to select a DOM element as the mount target of a Vue instance, only a single.

Only mount elements inside are processed by Vue, and normal HTML elements outside. Typically, a container is set up.

• Represents the View layer (View) in MVVM.

writing

It can be a string or an HTMLElement instance in CSS selector format, but not HTML or body. Vue must begin with a capital letter.

Once mounted, it can be accessed through vm.$el.

    / / way
    var vm = new Vue({
      el:"#app"
    });
    console.log(vm.$el);

    2 / / way
    var app = document.getElementById("app");
    var vm = new Vue({
      el:app
    });
    console.log(vm.$el);
Copy the code

Vue instances without EL can also be mounted using vm.$mount() with the same parameter form as the EL rule. The parameters to mount in vm.$mount() are the same as before, either a string in CSS selector format or an HTMLElement instance.

    var vm = new Vue({});
    vm.$mount("#app");

    console.log(vm.$el);
Copy the code
    var app = document.getElementById("app");
    var vm = new Vue({});
    vm.$mount(app);
    console.log(vm.$el);
Copy the code

Interpolation expression

Elements can be mounted using the template syntax of vue.js, in which the dynamic content of the element can be set by interpolation, written as {{}}.

  <div id="app">
    <ul>
      <li>{{10+2+3}}</li>
      <li>{{22 > 3? "22da" : "3da"}}</li>
    </ul>
  </div>

  <script src="lib/vue.js"></script>
  <script>
     var vm = new Vue({
       el: "#app"
     });
  </script>
Copy the code

Note:

• Interpolation can only be written in the tag content area and can be mixed with other content.

• Only JavaScript expressions can be written internally, not statements.

The data options

The object type is used to store the data needed by the Vue instance.

The data in data can be either through vm.$data. Data or VM. Data access.

The data in data can be accessed directly in the view through interpolation. The data in data is reactive data, and the view updates automatically when changes occur.

  <div id="app">
    <p>{{title}}</p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
   var vm = new Vue({
    el: '#app'.data: {
      title: "Heading text"}}); vm.title ="New heading text";
   
   console.log(vm.$data.title);
   console.log(vm.title); / / more commonly used
  </script>
Copy the code

Vue. Set (VM) can be used when the index and length operations do not automatically update the view (other pop() methods and so on are normal) when arrays are present in data. Array name, array index value, changed value) method substitution operation.

For example, if you change these two properties in the console, you can’t actually update them on the page:

  <div id="app">
    <p>{{arr[0]}}</p>
    <p>{{arr[1]}}</p>
    <p>{{arr[2]}}</p>
  </div>

  <script src="lib/vue.js"></script>
  <script>
   var vm = new Vue({
    el: '#app'.data: {
      arr: ["1"."2"."3"]}}); Vue.set(vm.arr,2."hello");
  </script>
Copy the code

The methods options

Used to store functions that need to be used in Vue instances.

Methods in methods can be accessed by vm. Method name.

This is the VM instance in the method, which can conveniently access VM data and other functions.

    <div id="app">
        <p>{{ fn(title1 )}}</p>
        <p>{{ fn(title2 )}}</p>
    </div>
    <script src="lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el:"#app".data: {
                prefix: "Processing result :".title1: "a-b-c-d-e".title2: "b-c-d-e",},methods: {fn(value){
                    console.log(this);
                    return this.prefix + value.split("-").join(""); }}})</script>
Copy the code