HTML5中使用vue组件

最新推荐文章于 2024-07-09 14:09:27 发布

余光cc

最新推荐文章于 2024-07-09 14:09:27 发布

阅读量5.7k

点赞数 10

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_42484379/article/details/102987959

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5中使用vue组件

1、创建index.html文件引用vue相关文件

引入vue相关CDN

	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> //vue.js
	<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script> //router.js
	<script src="assets/js/http-vue-loader.js"></script> //运行vue文件

链接: http-vue-loader.js可以在GitHub上面下载,在html中vue文件需要http-vue-loader来引用，不然使用不了

2、创建一个Home.vue

<template>
   <div class="home"> {{msg}} </div>
</template>

<script>
module.exports = { //不能使用 export default
   data() {
      return {
         msg: 'hello world'
      }
   },
}
</script>

<style scoped>
.home{font-size:24px;font-weight: bold;}
</style>

需要注意的是在html使用vue，得用 module.exports={} ，

3.在index文件中引用home组件

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>demo</title>
   </head>
   <body>
      <div id="app">
         <Home></Home>
      </div>
      <!-- 引入 Vue 相关 的 JS 文件 -->
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
      <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script> 
      <script src="assets/js/vue-router.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript">
         Vue.use(httpVueLoader);
         var vue = new Vue({
            components:{
               'Home': httpVueLoader('./views/Home.vue')
            }
         }).$mount('#app')
      </script>
   </body>
</html>

前面文件中引入了http-vue-loader.js，引用vue文件需要httpVueLoader(’./views/Home.vue’)，找到vue文件的相对路径

4、运行index文件

在这里插入图片描述

5、使用vue-router 路由

创建router.js，并在index.html引入,我放在同级目录

	<script src="router.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
        Vue.use(httpVueLoader);
        var vue = new Vue({
           router
        }).$mount('#app')
     </script>

router.js:

const Home = httpVueLoader('./views/Home.vue');

const Foo = {
   template: '<div>foo</div>'
};
const Bar = {
   template: '<div>bar</div>'
};
const routes = [
   {
      path: '/',
      component: Home
   }
];
const router = new VueRouter({
   routes // (缩写) 相当于 routes: routes
})

6、全局组件注册

在router.js文件中注册组件

var Header = httpVueLoader('./components/Header.vue');
Vue.component('my-header', Header);

注意命名规范，要不然组件使用不了
在Home.vue文件中引用组件

<template>
   <div class="home">
      <my-header></my-header>
      {{msg}}
   </div>
</template>

7、路由嵌套

const routes = [
   {
      path: '/',
      component: Home,
      children: [{
            path: '/foo',
            component: Foo
         },
         {
            path: '/bar',
            component: Bar
         },
      ]
   },
];

路由跳转:

 <div>
    <router-link to="/foo">foo</router-link>
    <router-link to="/bar">bar</router-link>
 </div>
 <div>
    <router-view></router-view>
 </div>

8、demo目录

在这里插入图片描述

9、完整代码

index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>demo</title>
   </head>
   <body>
      <div id="app">
         <router-view></router-view>
      </div>
      <!-- 引入 Vue 相关 的 JS 文件 -->
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

      <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
      <script src="assets/js/http-vue-loader.js" type="text/javascript" charset="utf-8"></script>
      <script src="router.js" type="text/javascript" charset="utf-8"></script>
      <script type="text/javascript">
         Vue.use(httpVueLoader);
         var vue = new Vue({
            router
         }).$mount('#app')
      </script>
   </body>
</html>

home.vue

<template>
   <div class="home">
      <my-header></my-header>
      {{ msg }}
      <div>
         <router-link to="/foo">foo</router-link>
         <router-link to="/bar">bar</router-link>
      </div>
      <div><router-view></router-view></div>
   </div>
</template>

<script>
module.exports = {
   data() {
      return {
         msg: 'hello world!'
      };
   }
};
</script>

<style scoped>
.home {
   font-size: 24px;
   font-weight: bold;
}
</style>

router.js

const Home = httpVueLoader('./views/Home.vue');
var Header = httpVueLoader('./components/Header.vue');
Vue.component('my-header', Header);
const Foo = {
   template: '<div>foo</div>'
};
const Bar = {
   template: '<div>bar</div>'
};
const routes = [{
   path: '/',
   component: Home,
   children: [{
         path: '/foo',
         component: Foo
      },
      {
         path: '/bar',
         component: Bar
      },
   ]
}, ];
const router = new VueRouter({
   routes // (缩写) 相当于 routes: routes
})

余光cc

关注

10
点赞
踩
39

收藏

觉得还不错? 一键收藏
5
评论
HTML5中使用vue组件

HTML5中使用vue组件1、HTML5引用vue文件使用vue在线CDN引用vue.js <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
复制链接

扫一扫