Basic use of the Vue framework

May 30, 2021 Article blog

1. How to use Vue

2. Code sample

3. Instance parameter analysis

4. The use of interpolated expressions

5. Vue code operation principle analysis

How to use Vue

1. Create a label for populating the data
2. Introduce Vue .js library files
3. Instantiate the Vue object
4. Fill the data provided by Vue into the label

Code sample

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{ msg }}</div>
        <div>{{ 1 + 1}}</div>
        <div>{{"===" + msg + "==="}}</div>
    </div>
    <script src="js/vue-2.5.16.js"></script>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app', // 元素的挂载位置（值可以是CSS选择器或者DOM元素）
            // data 模型数据（值是一个对象）
            data: {
                msg: 'Hello Vue',
            }
        });
    </script>
</body>

</html>

Instance parameter analysis

In the Vue object el is the mount position of the element (the value can be a CSS selector or a DOM element) data is model data (the type is an object)

The use of interpolated expressions

Fill the data into HTML tags using the interpolation expression
Interpolation expressions also support JavaScript's basic calculation operations

Vue code operation principle analysis

Overview of the compilation process concept (Vue syntax→ native js syntax)

Basic use of the Vue framework

Table of contents

How to use Vue

Code sample

Instance parameter analysis

The use of interpolated expressions

Vue code operation principle analysis

Cookie Consent