<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 1. 导入Vue的包 --> <script src="./lib/vue-2.4.0.js"></Script > </ head > < body > <! - the future of the new Vue instance, will control all of the content of this element -> <! - This element controlled area Vue instance, is our V -> < div ID = "App" > <-! {} {} braces which two names for the write data -> < P > {{MSG}} </ P > < P > {} {} Sao MSG1 in </ the p- > </ div > < Script > // 2.Create an instance of Vue // When we import the package in the browser's memory, it is more than a Vue constructor // Note: Our new objects out of the vm that we MVVM in VM scheduler var vm = new Vue ({ EL: ' #app ' , // , said the current Vue our new example of this, which is to be controlled on the page region // here you can write selector js // data is herein MVVM those of M, specifically to store data for each page of data: { // data property, is stored in data to use to el msg : ' Welcome to the Vue vue start learning ' , msg1: ' start it up! ' // instructions provided by Vue, very convenient to be able to render data on a page, programmers no longer manually manipulate the DOM element of [front-end Vue frame or the like, we do not advocate the DOM element to manually} } }) </ Script > </body> </html>