HTML5结合Vue总结
HTML5是一种用于构建网页和应用程序的标准，而Vue是一个用于构建用户界面的JavaScript框架。结合HTML5和Vue可以实现更丰富、动态和交互性的网页和应用程序。
要结合HTML5和Vue，首先需要在HTML文件中引入Vue的脚本文件。可以通过CDN（内容分发网络）引入，或者将Vue的脚本文件下载到本地并引入。
然后，在HTML文件中创建一个容器，用于渲染Vue组件。可以使用<div>标签或其他HTML元素作为容器。
接下来，可以使用Vue的语法和指令来构建Vue组件。Vue的语法使用{{}}来绑定数据，使用v-开头的指令来处理逻辑和事件。可以在Vue组件中定义数据、方法、计算属性等。
在Vue组件中，可以使用HTML5的各种特性和API，如Canvas绘图、音视频播放、地理位置定位、本地存储等。可以通过Vue的生命周期钩子函数来初始化和操作HTML5的特性和API。
最后，将Vue组件渲染到HTML文件中的容器中。可以使用Vue的根实例来挂载组件，并指定要渲染的容器。可以通过Vue的模板语法来渲染组件的内容。
通过结合HTML5和Vue，可以实现更灵活、交互性更强的网页和应用程序。HTML5提供了丰富的特性和API，而Vue提供了简洁、可复用的组件化开发方式，两者结合可以实现更好的用户体验和开发效率。
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<script>
</script>
<style>
</style>
</head>
<body>
</body>
</html>
|
Vue
1
2
3
4
5
6
7
8
9
10
11
12
| <template>
<!-- HTML模板 -->
</template>
<script>
// JavaScript代码
</script>
<style>
/* CSS样式 */
</style>
|
结合
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="my-component.vue"></script>
<script>
new Vue({
el: '#app'
});
</script>
</body>
</html>
|
试用示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <head>
<meta charset="utf-8" />
<title>vjmap</title>
<!-- 引入Vue脚本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<!-- 引入http-vue-loader -->
<!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
<!-- 这里使用了vjmap -->
<link
rel="stylesheet"
type="text/css"
href="https://vjmap.com/demo/js/vjmap/vjmap.min.css"
/>
<script
type="text/javascript"
src="https://vjmap.com/demo/js/vjmap/vjmap.min.js"
></script>
<!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.min.js"></script>
<!-- import CSS -->
<link
rel="stylesheet"
href="https://unpkg.com/element-plus/dist/index.css"
/>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-plus"></script>
<!-- <link rel="stylesheet/less" href="./element-ui_less.less" /> -->
</head>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <script type="module">
const vm = Vue.createApp({
data() {
return {
},
};
},
created() {
this.message = vm.config.globalProperties.$message;
//后面解释
},
methods: {
}
vm.use(ElementPlus);
vm.mount("#app");
</script>
|
全局属性
1
2
3
4
5
6
7
8
9
10
11
12
13
| import { createApp } from 'vue';
const app = createApp({});
// 注册全局属性
app.config.globalProperties.$appName = 'My App';
// 注册全局方法
app.config.globalProperties.$greet = () => {
console.log('Hello!');
};
app.mount('#app');
|
同步”（synchronous）以及”异步”（asynchronous）
同步操作是指程序的执行顺序按照代码的顺序依次执行。当遇到一个同步操作时，程序会等待该操作完成后再继续执行下一个操作。在同步操作中，程序会阻塞等待操作完成，只有在操作完成后才能进行下一步。这意味着在同步操作中，程序的执行是有序的、按照预定顺序进行的。
异步操作是指程序的执行顺序不按照代码的顺序进行。当遇到一个异步操作时，程序会继续执行后续的代码，而不会等待该操作的完成。在异步操作中，程序不会阻塞等待操作完成，而是继续执行其他的任务。当异步操作完成后，通常会通过回调函数、Promise、async/await等方式来处理操作的结果。
异步操作通常用于处理可能会花费较长时间的任务，如网络请求、文件读写等。通过将这些任务设置为异步操作，程序可以在等待这些任务完成的同时继续执行其他任务，提高了程序的性能和响应能力。
总结来说，同步操作是按照顺序执行的，会阻塞程序的执行；而异步操作是在后台执行的，不会阻塞程序的执行。
异步实现
可以使用await关键字来等待异步操作的结果。await会暂停函数的执行，直到异步操作完成，并返回操作的结果。
异步函数会返回一个Promise对象，该对象代表了异步操作的最终结果。可以使用.then()方法来处理Promise对象的结果。.then()方法接受一个回调函数作为参数，当Promise对象的状态变为resolved（已完成）时，回调函数会被调用，并传入异步操作的结果作为参数。
下面是一个使用异步函数和.then()方法处理异步操作的示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
| async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData().then(() => {
console.log('Async operation completed');
});
|
在上面的示例中，fetchData()是一个异步函数，它通过await关键字等待fetch函数返回的Promise对象。当fetch函数的Promise对象状态变为resolved时，await之后的代码会被执行，并将结果赋给response变量。然后，再次使用await等待response.json()方法返回的Promise对象，并将结果赋给data变量。最后，打印出data的值。
在异步函数调用后，我们使用.then()方法来处理异步操作的结果，并在回调函数中打印出”Async operation completed”。
这样，我们可以在异步函数内部使用await关键字来等待异步操作的结果，并使用.then()方法来处理异步操作的最终结果。
wechat