How to introduce vue.js file into html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to introduce vue.js file into html

藏色散人

Feb 05, 2021 am 09:48 AM

html

How to introduce the vue.js file into HTML: First download the vue.js file directly from the official website of Vue.js; then pass "

How to introduce vue.js file into html

The operating environment of this article: Windows7 system, HTML5&&Vue2.2.2, Dell G3 computer.

How to introduce vue.js file into html?

Vue.js is a popular JavaScript front-end framework, an open source JavaScript framework for creating user interfaces, designed to better organize and simplify web development.

The core of Vue's focus is the view layer in the MVC pattern. At the same time, it can also easily obtain data updates and realize the interaction between the view and the model through specific methods within the component.

So how to introduce vue.js file into html?

Method 1. You can download the vue.js file directly from the Vue.js official website and import it with the <script> tag. </script>

Download address: https://vuejs.org/js/vue.min.js

Then use the <script> tag to introduce the local vue.js file</script>

<script src="vue/vue.min.js"></script>

Note: vue/vue.min.js is the relative address of the vue.js file

Method 2: Use the CDN method and use the <script> tag to introduce the vue.js file in the network. </script>

The following are two relatively stable CDNs recommended in foreign countries. I have not found which one is better in China. At present, it is recommended to download them locally.

Staticfile CDN (domestic): https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg: https://unpkg.com/vue/dist/vue.js, will remain consistent with the latest version released by npm.

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

Recommended: "vue tutorial"

Staticfile CDN (domestic)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})
</script>
</body>
</html>

unpkg (recommended)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})
</script>
</body>
</html>

cdnjs

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>
<script>
new Vue({
  el: &#39;#app&#39;,
  data: {
    message: &#39;Hello Vue.js!&#39;
  }
})
</script>
</body>
</html>

The script element can either contain script statements or point to an external script file through the src attribute.

The required type attribute specifies the MIME type of the script.

Common applications of JavaScript are image manipulation, form validation, and dynamic content updating.

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn