Learning notes:Vue.js Basic Knowledge

Basic knowledge

Root instance of constructor Vuenew Vue({})And start the Vue application.

var app = Vue({
    el: "#app",
    data: {},
    methods: {}
});

VariableappOn behalf of this Vue instance.

Among them, the essential options areelA that specifies a DOM element that already exists in a page to mount a Vue instance, which can beHTMLElement, or CSS selectors.

var app = Vue({
    el: document.getElementById('app')
});
    

After the mount is successful, you can use theapp.$elAccess this element. Vue provides many commonly used instance properties and methods, all of which are based on$The beginning.

dataOption is used to declare data that requires bidirectional binding within the application. It is recommended that all data to be used should be available in advancedataInternal statement, improve the maintainability of the business.

Vue instancenew Vue({}), which can be used hereappActingdataAll properties in the object can be accessed as followsdataData in:

console.log(app.name);

In addition to explicitly declaring data, it can also point to an existing variable, and a two-way binding is established between them by default. When any one is modified, the other will also change accordingly.

var myData = {
    a: 1
};

var app = Vue({
    el: "#app",
    data: myData
});

app.a = 2;
console.log(myData.a);//2
myData.a = 3;
console.log(app.a);//3

Life cycle

Vue’s Lifecycle Hook:

• created: Called after the instance is created. Data observation is completed at this stage, but not mounted.$elNot yet available. (This is useful when initialization is required to process some data)
• mounted：elCalled after being mounted on the instance, the first business logic starts here.
• beforeDestroy: Called before the instance is destroyed. Mainly untie some useaddEventListenerMonitoring events, etc.

These hooks are associated withelAnddataSimilarly, it is also written into Vue instance as an option and hookedthisPointing to the Vue instance that called it.

Interpolation and Expression

Use (Mustache syntax){{}}Is the most basic text interpolation method, it will automatically display our two-way bound data in real time.

v-htmlDirectly output HTML instead of parsed plain text.

<div id="app">
<span v-html="link"></span>
</div>

new Vue({
    el: "#app",
    data: {
        link: '<a href="#">this is a link.</a>'
    }
});

Link’s content will be rendered into aaTags, not plain text.

If user-generated content is usedv-htmlAfter the output, it may lead to XSS attack, so to process the content submitted by the user at the server, you can generally<>Escape.

If you want to display{{}}Label, without replacement, usev-preYou can skip the compilation of this element and its child elements.

• In{{}}In addition to simple binding attribute values, JavaScript expressions can also be used for simple operations, ternary operations, etc.
• Vue supports only a single expression, not statements and process control.
• User-defined global variables cannot be used in expressions, only global variables in Vue whitelist can be used, for exampleMathAndDate.

Filter

Vue.js supports{{}}Add a pipe character to the end of the interpolation(|)Filter data, often users format text, such asAll letters are capitalized、Currency thousands are separated by commasWait. The filtering rules are customized by adding options to Vue instancesfilterTo set.

<div id="app">
    {{date | formatDate}}
</div>

Filters can also be connected in series and can receive parameters:

<!--串联-->
{{message | filterA | filterB}}

<!--接收参数-->
{{message | filterA('arg1','arg2')}}

Filters should be used to handle simple text transformations, and if more complex data transformations are to be implemented, computational properties should be used.

Command event

Instruction (Directives) is the most commonly used function in Vue.js templates, which is prefixed withv-. The main responsibility of an instruction is to apply certain behaviors to the DOM when the value of its expression changes.

v-bindThe basic purpose of is to dynamically update attributes on HTML elements, such asid、classWait.

Another very important instruction isv-onA used to bind event listeners.

On common elements,v-onYou can listen for native DOM events exceptclickThere are alsodbclick、keyup、mousemoveWait. An expression can be a method name, and these methods are written in Vue citymethodsProperty and is in the form of functions whosethisPointing to the current Vue instance itself, it can be used directly.this.xxxTo access or modify data in the form of.

Vue.js willmethodsIn the method of proxy, can like access Vue data call method:

<div id="app">
    <p v-if="show">这是一段为本</p>
    <button @click="handleClose">点击隐藏</button>
</div>

new Vue({
    el: "#app",
    data: {
        show: true
    },
    methods: {
        handleClose: function () {
            this.close()
        },
        close: function () {
            this.show = false
        }
    }
});

InhandleCloseThrough the method directlythis.close()Calledclose()Function.

var app = new Vue({
    el: "#app",
    data: {
        show: true
    },
    methods: {
        init: function (text) {
            console.log(text);
        },
    },
    mounted: function () {
        this.init('在初始化时调用');
    }
});
app.init('通过外部调用');

syntactic sugar

Grammatical sugar refers to adding a method to achieve the same effect without affecting the function, thus facilitating program development.

Vue.jsv-bindAndv-onInstructions all provide grammatical sugar, or abbreviations, such asv-bindAbbreviated as:, mostly fora、imgLabel;v-onAbbreviated as@Forinput、buttonLabel.