flaviocopes Vue教程笔记 – Records And Memorys

第一个 app: https://flaviocopes.com/vue-first-app/

<html>
  <body>
    <div id="example">
      <p>{{ hello }}</p>
    </div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#example',
            data: { hello: 'Hello World!' }
        })
    </script>
  </body>
</html>

<html>

<body>

<p>{{ hello }}</p>

</div>

new Vue({

el: '#example',

data: { hello: 'Hello World!' }

})

</script>

</body>

</html>

What this code does is, we instantiate a new Vue app, linked to (el mean element link )the #example element as its template (it’s defined using a CSS selector usually, but you can also pass in an HTMLElement).

Then, it associates that template to the data object. That is a special object that hosts the data we want Vue to render.

In the template, the special {{ }} tag indicates that’s some part of the template that’s dynamic, and its content should be looked up in the Vue app data.