Vue basis

Early experience

<div id="app">{{ message }}</div>

<script>
    // Declarative programming
    const app = new Vue({
    // Used to mount the element to be managed
    el: '#app'.// Define data
    data: {
        message: 'Hello, Li Yinhe'! }})</script>
Copy the code

The effect

Hello, Li YinheCopy the code

The list shows

<body>
    <div id="app">
        <ul>
           <li v-for="item for movies">{{ item }}</li>
        </ul>
    </div>
    
    <script>
        const app = new Vue({
            el: '#app'.data: {
                message: 'Movie List'.movies: ['Interstellar'.A Chinese Odyssey.Life of PI.Inception]}})</script>
</body>
Copy the code

Results show

Interstellar Odyssey PI inceptionCopy the code

Browser append data

App. Movie. Push (' the sea king)

The effect

Interstellar Odyssey Teen PI Inception AquamanCopy the code

What is the MVVM?

MVVM is briefly

MVVM(Model-view-ViewModel) is a software architecture pattern

  • View layer: The View layer is responsible for displaying information.
  • Model layer: The data layer, which provides the view layer with data for easy presentation.
  • ViewModel layer: The middle layer between the view layer and the data layer, responsible for binding views and data, and DOM event listening in the view layer, which can change the data in the data layer.

Vue does not follow MVVM exactly, because vUE has an attribute called ref that allows you to manipulate views directly through dom objects and ref

Vue life cycle

Life cycle: What happens to a VUE from creation to destruction

  1. BeforeCreate: Executed before the instance is created. The data in data and Methods has not been initialized
  2. Created: Data and methods are already initialized
  3. BeforeMount: Templates are edited in memory and have not yet been rendered to the page
  4. Mounted: A template in the memory is displayed on a page. Users can view the template
  5. BeforeUpdate: Data in memory is updated but the page has not been rendered
  6. Updated: Data in memory has been updated and the page has been rendered

Basic instructions

v-once

  1. No expression is required after this instruction
  2. This directive renders elements and components once and does not change as the data changes
<body>
    <div id="app">
        <h2>{{ message }}</h2>
        <h2 v-once>{{ message }}</h2>
    </div>
    
    <script src=""./js/vue.js></script>
    <script>
        const app = new Vue({
            el: '#app'.data: {
                message: 'hello'}})</script>
</body>
Copy the code

v-html

The returned string data is parsed in HTML syntax

<body>
    <div id="app">
        <h2>{{ link }}</h2>
        <h2 v-html='link'></h2>
    </div>
    
    <script src=".. /js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app'.data: {message: 'Hello World'}})</script>
</body>
Copy the code

The results showed

<a href="http://www.baidu.com"</a> BaiduCopy the code

v-text

Parsing data as text, usually accepts string, usually not

<body>
    <div id="app">
        <h2 v-text="message"></h2>
        <h2>{{message}}</h2>
    </div>
    
    <script src=".. /js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app'.data: {
                message: 'hello! Li '}})</script>
</body>
Copy the code
The result will say: Hello! Hello, Li Yinhe! Li yinheCopy the code

v-bind

Dynamic binding, general abbreviation:

<body>
    <div id="app">
        <a v-bind:href="link">Vuejs website</a>
        <img v-bind:src="logoUrl" alt="">
    </div>
    
    <script src=".. /js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app'.data: {
                logoUrl: 'https://vuejs.org/image/logo.png'.link: 'https://vuejs.org'}})</script>
</body>
Copy the code

The results show:

v-on

Stop: prevents bubbling. Prevent: prevents default events. Native: listens for component events

V – if, v – else

statement

v-show

Similar to v-show, except v-if: When the condition is false, dom elements with v-if are removed. V-show: when false, an inline style display: None is added to the element

v-for

Objects are traversed in the order value,key, and index

When using v-for components, it is recommended to add component key attributes for efficient update.

v-model

Two-way binding

Principles of interpretation

V-bind allows one-way binding, and the page changes as the data changes. But the elements of the DOM page don’t change. Bidirectional binding can be achieved by simply adding the corresponding event listener on the page and passing in the modified value to the data.The modifier

  1. Lazy: lazy loading. Updates are synchronized only after hitting Enter in input
  2. Number: Converts the contents of the input box to a number type, which is converted to a string by default
  3. Trim: Remove the Spaces on the left and right sides of the content