普通web项目中可嵌入vue使用,仅需将vue的js引入页面即可,例子如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="app">
{{msg}}}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
</body>
<script>
new Vue({
el: '#app',
data: function () {
return {
msg:"Hello world!"
}
}
});
</script>
</html>
在普通web项目中,如果我们想自定义组件,按官方文档的写法如下:
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
但是此方法有一些不友好的地方,如果我们模板内容过大,则 template 内容会比较多,而且对代码整体的结构不太友好,因此我们希望通过新建.vue文件的形式来自定义组件。
http-vue-loader组件实现了不需要编译和build即可加载vue组件,具体使用方式如下:
1、创建自定义组件文件,如 my-component.vue ,内容如下:
<template>
<div class="hello">{{msg}}</div>
</template>
<script>
module.exports = {
data: function() {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.hello {
background-color: #ffe;
}
</style>
2、在网页上引入vue 和 http-vue-loader的js文件
<script src="js/vue.js"></script>
<script src="js/httpVueLoader.js"></script>
组件下载地址:https://download.csdn.net/download/ajian132/12054208 (可直接引入项目使用)
3、在网页上通过httpVueLoader载入子组件
<div id="app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
components: {
'my-component': httpVueLoader('components/my-component.vue')
}
});
</script>