VUE有两种使用方式,一种实在html中直接使用vue做开发,一种是企业级的单页面应用。后者是主流的使用方式,真正项目中很少使用前一种方式。原认为前一种方式主要作用是为了降低VUE的学习门槛——通过在大家熟悉的HTML环境中使用vue,大家很容易去了解和熟悉VUE。现在看来在html使用vue组件还有两大作用,一个是封装比较复杂的组件,在其他应用中使用,如:开发一个工业环境中视觉检测系统组件,将这个组件嵌入到MES系统中去;另外一个作用就是今天要讲的调样式。
要让自己的页面变得精致,就要在样式上下功夫。VUE组件中的样式封装在组件的内部,如果页面上每个组件都很美观,组装起来就不会差到那儿去,但是如果要把样式的调整分离出去,就需要将所有的单页面应用代码提供出去,这样增加了调样式人员的学习成本,如果放到html中去,只需要通过浏览器预览就很容易了,使用起来非常简单,示例如下:
- 在html页面头部引入vue、组件使用的UI库、http-vue-loader,示例代码如下
<head>
<meta charset="utf-8">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr/npm/vue@2.5.16/dist/vue.js"></script>
<!-- 引入http-vue-loader -->
<script src="https://unpkg/http-vue-loader"></script>
<!-- 这里使用了element ui框架 -->
<link rel="stylesheet" href="https://unpkg/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg/element-ui/lib/index.js"></script>
<title></title>
</head>
- 在body部分写相关html和script代码,代码如下
<body>
<div id="app">
<h1>hhhhhhhhhhhhhh</h1>
<information-box :bar-object='titleObj' :data-list='dataList121'></information-box>
</div>
<script>
Vue.use(httpVueLoader)
new Vue({
el: '#app',
data: {
msg: '大家好,欢迎大家学习Vue.js',
titleObj: {
sno: 1,
title: '法律条文'
},
dataList121: [{
sno: '1',
title: 'fdshkjfhkjsdahfk'
}, {
sno: '2',
title: 'werwerwerwerwerwerw'
}]
},
components: {
'information-box': httpVueLoader('../com/information-box.vue'),
},
})
</script>
</body>
在body中第四行information-box就是我们要使用的组件,使用方式和通常在html使用VUE是一致的。在components:中引入要使用的组件,注意这里:需要使用httpVueLoader(‘…/com/information-box.vue’)引入组件。
3. information-box组件代码,组件代码和通常单页面组件代码基本一致,代码如下:
<template>
<div class='main_div'>
<span>{{barObject.stitle}}</span>
<span class="span_more">更多</span>
<el-divider></el-divider>
<ul style="padding:0.0.0.0;">
<li v-for="(item,index) in dataList" :key='item.sno'>{{item.title}}</li>
</ul>
</div>
</template>
<script>
module.exports = {
name: "informationBox",
props: {
barObject: {
sno: String,
stitle: String
},
dataList: {
type: Array
}
}
}
</script>
<style scoped>
ul li {
list-style: none;
}
.main_div {
width: 256px;
position: absolute;
}
.span_more {
position: relative;
right: 0;
color: red;
}
</style>
与单页面唯一不同的是代码的12行,在单页面中使用的是“export default”默认输出,而在这里要改为“module.exports = ”
4. 运行结果
查看组件运行状态,不合适的地方调整样式,直到满意为止。
注意: 在html页面中组件的名称不少于两个单词,且单词之间一定是用中划线分割,否则出现莫名其妙的错误。
小结:在html中使用vue组件只需三步。第一步:引入http-vue-loader;第二步:将引入组件中的export default修改为module.exports =;第三步:在html中components选项中使用httpVueLoader加载组件
更多推荐
html中使用vue组件
发布评论