Vue. Js core features

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 (changes in data affect changes in the view).
  • Bidirectional data binding can be set for inputable 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
    • Model layer –> On behalf of the data
    • The View layer–> Represents view template
    • The ViewModel layer –> Represents business logic processing code
  • Data-driven view based on MVVM model liberates DOM manipulation (excellent)
  • View and Model processing separation, reduce code coupling (excellent)
  • However, Bug debugging in bidirectional binding becomes more difficult (missing)
  • Large projects have too many Views and models and high maintenance costs (lack of)
Copy the code

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 installed

Three ways to install:

  1. Local import: Local download, import vue. Js file to use vUE
  2. CDN import: Recommended: faster loading speed, use script: SRC tag to import, automatically apply the updated version when the version is updated
  3. NPM installation: Use the NPM command to install

  • Local introduction

    • Development version: cn.vuejs.org/js/vue.js
    • Production version: cn.vuejs.org/js/vue.min….

  • Introduced the CDN

    • Latest stable version: cdn.jsdelivr.net/npm/vue
    • Version: cdn.jsdelivr.net/npm/[email protected]…

  • NPM install

    • Latest stable version:
      • npm install vue
    • Specify the version

EL options

  • Use to select a DOM element as the mount target for the Vue instance.
  • Only mount elements inside are processed by Vue, and normal HTML elements outside.
  • Represents the View layer (View) in MVVM.

How to mount data:

It can be a string or an HTMLElement instance in CSS selector format, but not HTML or body.

        /** * EL mount data 1 */
        // Create a vue instance
        var vm = new Vue({
            // el option object
            el: '#app'
        })
        console.log(vm.$el); // <div id="app"></div>



        /** * EL mount data 2 */
        var app = document.querySelector('#app')
        // Create a vue instance
        var vm = new Vue({
            // el option object
            el: app
        })
        console.log(vm.$el); // <div id="app"></div>
Copy the code

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

        /** * EL mounting mode 3 */
        // Create a vue instance
        var vm = new Vue({})
        vm.$mount('#app')
        console.log(vm.$el) // <div id="app"></div>
Copy the code

Vue instances without EL can also be mounted using vm.$mount() with the same parameters as the EL rule

    /** * EL mount data 4 */
    var app = document.getElementById('app')
    // Create a vue instance
    var vm = new Vue({})
    vm.$mount(app)
    console.log(vm.$el) // <div id="app"></div>
Copy the code

Interpolation expression

The elements can be mounted using the template syntax of Vue.js, where the dynamic content of the elements can be set by interpolation with the syntax {{}}.

Note:

  • Interpolation can only be written in the tag content area and can be mixed with other content.
  • You can only write JavaScript expressions internally, not statements.
<! -- Mount elements --><div id="app">
        <p>1 + 2 + 3 = {{1 + 2 + 3}}</p>
    </div>

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

    </script>
Copy the code

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.

When an array is present in data, the index and length operations cannot automatically update the view, so vue.set () can be used instead.

Vue.set() syntax: vue.set (vm. Array name, array subscript, new content in effect)

<! -- Mount elements --><div id="app">
        <p>1 + 2 + 3 = {{1 + 2 + 3}}</p>
        <p>{{ title }}</p>

        <ul>
            <li>{{ arr[0] }}</li>
            <li>{{ arr[1] }}</li>
            <li>{{ arr[2] }}</li>
            <li>{{ arr[3] }}</li>
        </ul>
    </div>

    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app'.data: {
                title: 'I am the title'.arr: [Data '1'.Data '2'.'data 3']}});console.log(vm.$data.title);  // I am the title
        console.log(vm.title);  // I am the title
    </script>
Copy the code

The methods options

Methods (methods

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

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

Method this is the VM instance (this represents the instance where the function resides), which can conveniently access vm data and other functions.

<! -- Mount elements --><div id="app">
        <!-- <p>{{ add(加法) }}</p> -->
        <p>{{ outPut(value1) }}</p>
        <p>{{ fn(title) }}</p>
        <p>{{ fn(content) }}</p>
    </div>

    <script src="lib/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#app'.data: {
                // Add: 1 + 2 + 3
                value1: 'the 1-2-3-1-2-3'.title: 'I am the title'.content: 'I am content'
            },
            methods: {
                outPut(value) {
                    // return this. Add;
                    // Intercepts a value1 string
                    return value.split(The '-').join(' ')},fn() {
                    console.log('the title: + this.title + '1');
                    console.log('content' + this.content + '2'); }}});</script>
Copy the code