How to introduce vue.js into HTML

How to introduce vue.js into HTML: First download vue.js; then add the vue.js package to HTML, with syntax such as "7f2531c94def682ab747f710381f5e242cacc6d41bbb37262a98f745aa00fbf0".

The operating environment of this tutorial: Windows 7 system, vue version 2.0, Dell G3 computer.

Recommended: "vue tutorial"

vue.js is introduced into HTML

For those who have not been exposed to es6 and webpack For children's shoes, it is not recommended to directly use the official scaffolding vue-cli component project.

First study at least the component chapter in document order. Directly introduce vue.js into the html file to start learning, understand the basic instructions of vue, and the infrastructure of the entire vue instance.

Download vue.js address: https://vuejs.org/v2/guide/installation.html. After downloading, add the vue.js package to the HTML.

<script src="${path}/web/constant/vue.js"></script>

In the current html, write the js code:

<script type="text/javascript">
new Vue({
el:&#39;#app&#39;,
data: {
message:&#39;hello vue.js.&#39;
}
});
</script>

In the html, add the following code:

<h1>Vue demo</h1>
<div id="app">
<div>{{message}}</div>
<input type="text" v-model="message">
</div>

Modify the content in the text box and you can see the text box The content above is also changing accordingly; this is the two-way binding of vue.

The above is the detailed content of How to introduce vue.js into HTML. For more information, please follow other related articles on the PHP Chinese website!