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
})