Home > Article > Web Front-end > How to introduce vue.js file into 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 "290d22f4ce919bbc4aebecde421fc90b" can be used to introduce the local vue.js file.
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 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag.
Download address: https://vuejs.org/js/vue.min.js
Then use the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag to introduce the local vue.js file
<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 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag to introduce the vue.js file in the network.
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: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</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: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</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: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>3f1c4e4b6b16bbbd69b2ee476dc4f83a Tag
3f1c4e4b6b16bbbd69b2ee476dc4f83a Tag is used to define client-side scripts, such as JavaScript.
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.
3f1c4e4b6b16bbbd69b2ee476dc4f83a The src attribute of the tag: specifies the URL of the external script file.
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!