|
|
@@ -1,71 +1,25 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html>
|
|
|
-
|
|
|
+<html lang="en">
|
|
|
<head>
|
|
|
- <meta charset="utf-8" />
|
|
|
- <title>快速入门</title>
|
|
|
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
|
- <script src="https://unpkg.com/vue-router@3.5.2/dist/vue-router.js"></script>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Vue3快速入门</title>
|
|
|
</head>
|
|
|
-
|
|
|
<body>
|
|
|
- <div id="app">
|
|
|
- <div class="sidebar">
|
|
|
-
|
|
|
-
|
|
|
- <video autoPlay preload="auto" controlsList="nodownload" loop="loop" muted playsInline data-wf-ignore="true" data-object-fit="cover" poster="xxx.png">
|
|
|
- <source src="/assets/img/banner/111.png" type="video/mp4" data-wf-ignore="true" />
|
|
|
- 您的浏览器不支持 video 标签。
|
|
|
- </video>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <!-- <video id="videoPlay" autoplay="autoplay" loop="loop" muted="muted" poster="/assets/img/banner/111.png" style="width: 100%; height: 100%; object-fit: fill;" src="http://file.usky.cn/statics/202402/20240205170431A572.mp4"><source type="video/mp4"></video> -->
|
|
|
-
|
|
|
- <!-- <video src="assets/video/20240205093233A374.mp4" autoplay type="video/mp4"></video> -->
|
|
|
-
|
|
|
- <video poster="" width="900" preload="auto" autoplay="autoplay" loop="loop" muted="muted" height="auto"><source src="http://file.usky.cn/statics/202402/20240205170431A572.mp4" type="video/mp4"></video>
|
|
|
-
|
|
|
- <!-- <video poster="" controls="true" autoplay="autoplay" loop="loop" muted="muted" width="900" height="auto"><source src="http://file.usky.cn/statics/202401/20240131141241A505.mp4" type="video/mp4"></video> -->
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <router-link to="/menu1">首页</router-link>
|
|
|
- <router-link to="/menu2">关于我们</router-link>
|
|
|
- <router-link to="/menu3">新闻动态</router-link>
|
|
|
- </div>
|
|
|
- <div class="content">
|
|
|
- <router-view></router-view>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div id="vue-app" >
|
|
|
+ <div :style="{'display':'block'}" style="display:none">
|
|
|
+ {{text}}
|
|
|
+ </div</div>
|
|
|
+ <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
|
|
|
+ <script>
|
|
|
+ const app = Vue.createApp({
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ text: "今天就开始使用 Vue.js！",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ });
|
|
|
+ app.mount("#vue-app");
|
|
|
+ </script>
|
|
|
</body>
|
|
|
-
|
|
|
- <script>
|
|
|
- // 定义组件
|
|
|
- const Menu1 = {
|
|
|
- template: '<div>首页的内容：<p>{{ customContent }}</p></div>',
|
|
|
- data () {
|
|
|
- return { customContent: "这是首页的自定义内容" }
|
|
|
- }
|
|
|
- };
|
|
|
- const Menu2 = { template: '<div>关于我们的内容：<p>{{ customContent }}</p></div>', data () { return { customContent: "这是关于我们的自定义内容" } } };
|
|
|
- const Menu3 = { template: '<div>新闻动态的内容：<p>{{ customContent }}</p></div>', data () { return { customContent: "这是新闻动态的自定义内容" } } };
|
|
|
-
|
|
|
- // 创建路由实例
|
|
|
- const router = new VueRouter({
|
|
|
- routes: [
|
|
|
- { path: '/menu1', component: Menu1 },
|
|
|
- { path: '/menu2', component: Menu2 },
|
|
|
- { path: '/menu3', component: Menu3 }
|
|
|
- ]
|
|
|
- });
|
|
|
-
|
|
|
- // 创建Vue实例，并将路由实例注入
|
|
|
- new Vue({
|
|
|
- el: "#app",
|
|
|
- router
|
|
|
- });
|
|
|
- </script>
|
|
|
-
|
|
|
</html>
|
ming