目的：作為一個新手開發(fā)，我想使用 Vue 3 將代碼封裝在 HTML 文件中時，進行界面打開展示。
一、vue計數(shù)示例
學了一個簡單計數(shù)器界面展示，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<div id="app">
<h1>alllalalallalal 默認會被覆蓋</h1>
</div>
<template id="why">
<div>
<h2>{{message}}</h2>
<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<body>
<!-- 以下是引入vue依賴庫三種的方式 -->
<!-- 方式一 cdn-->
<!-- 引入 Vue 3 的 CDN 資源網(wǎng)絡加載不了 加載慢-->
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<!-- 引入 Vue 3 的 CDN 資源 公司網(wǎng)絡加載不了 無用-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>-->
<!-- 引入 Vue 3 的 CDN 資源 公司網(wǎng)絡能加載 有用 -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.12/vue.global.min.js"></script>-->
<!-- 方式二 本地-->
<!-- 引入 Vue 3 的本地js 有用 -->
<!-- 把cdn遠程vue.global.min.js文件復制到本地，命名，接著真實路徑引用-->
<script src="vue3.2.12global.js"></script>
<!-- 方式三 電腦全局vue.js引入 不需要再文件引用，就可以打開了 -->
<!-- 下載安裝node.js,使用node命令 `npm install vue -g`下載安裝vue.js 到電腦全局，檢查是否安裝成功 `npm list vue` 有用 -->
<script src="D:/html_project/vue_to_android/vue3.2.12global.js"></script>
<script>
Vue.createApp({
template: '#why',
data: function() {
return {
message: "hello world!",
counter: 100
}
},
methods: {
increment() {
this.counter++;
console.log("點擊了+1");
},
decrement() {
this.counter--;
consloe.log("點擊了-1");
}
}
}).mount("#app")
</script>
</body>
</html>
在 上述HTML 文件里,包含了文件頭標題<title>,
接著定義了一個內(nèi)容 <div id="app">
而后定義了一個內(nèi)容，包含標題和數(shù)字,以及兩個按鈕的 <template>，
并在 <body> 中引入了 Vue 3 的庫，通過使用 createApp 方法創(chuàng)建了一個 Vue 應用，并通過 template 設置了要使用的模板選擇器為 #why。
最后，在 <script> 標簽中使用 createApp 和 mount 方法啟動 Vue 應用。
二、保存到html
把以上代碼，手敲復制到一個文件中，我這邊就復制到vue_demo.html
其中可以使用 Vue 3 的 CDN 引入 Vue 庫和相關的依賴,但是對網(wǎng)絡有限制，有的加載太慢了；
這邊采用手動引用依賴庫，把cdn遠程https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.12/vue.global.min.jsvue.global.min.js文件全盤復制到本地，命名vue3.2.12global.js，再進行加載，這樣就快很多了。
三、實際效果
其中標簽 <div id="app"> 根據(jù)#app被vue使用，會主動使用vue中<template>內(nèi)容覆蓋已經(jīng)有的文字alllalalallalal。文章來源：http://www.zghlxwxcb.cn/news/detail-801326.html
創(chuàng)造加載，樂哉分享！文章來源地址http://www.zghlxwxcb.cn/news/detail-801326.html
到了這里，關于vue3 實現(xiàn)簡單計數(shù)器示例——一個html文件展示vue3的效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
