How to use the constructor: Vue ()?

1. Create a .html file => to introduce an online vue library => write with id of html tag => write a script tag, where the vApp is Vue () an instance of this constructor, he passed el and dom contacts established through the data and template syntax declarative manner rendering the data into the dom in.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <h1>{{ name }} 今年 {{ age }} 岁了!</h1>
    </div>
    <script>
        var vApp = new Vue({
            el: "#app",
            data: { 
                name: "李雷",
                age: "23"
            }
        })
    </script>
</body>
</html>

2. After the browser opens, we find that name and age of the data properly displayed. Then we console directly by vApp.name and vApp.age change his value, the result immediately shows up on the page. This show vApp this Vue instance is a global property, we can change it through his various internal data, this change will be displayed in real time in a web page results.

How to use the constructor: Vue ()?

Guess you like