• html中使用vue组件

    VUE有两种使用方式，一种实在html中直接使用vue做开发，一种是企业级的单页面应用。后者是主流的使用方式，真正项目中很少使用前一种方式。原认为前一种方式主要作用是为了降低VUE的学习门槛——通过在大家熟悉的HTML环境中使用vue，大家很容易去了解和熟悉VUE。现在看来在html使用vue组件还有两大作用，一个是封装比较复杂的组件，在其他应用中使用，如：开发一个工业环境中视觉检测系统组件，将这个组件嵌入到MES系统中去；另外一个作用就是今天要讲的调样式。
    要让自己的页面变得精致，就要在样式上下功夫。VUE组件中的样式封装在组件的内部，如果页面上每个组件都很美观，组装起来就不会差到那儿去，但是如果要把样式的调整分离出去，就需要将所有的单页面应用代码提供出去，这样增加了调样式人员的学习成本，如果放到html中去，只需要通过浏览器预览就很容易了，使用起来非常简单，示例如下：

    1. 在html页面头部引入vue、组件使用的UI库、http-vue-loader，示例代码如下
    	<head>
		<meta charset="utf-8">
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">script>
		
		<script src="https://unpkg.com/http-vue-loader">script>
		
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/element-ui/lib/index.js">script>
		<title>title>
	head>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    1. 在body部分写相关html和script代码，代码如下
    <body>  
        <div id="app">  
            <h1>hhhhhhhhhhhhhhh1>  
            <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    在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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    与单页面唯一不同的是代码的12行，在单页面中使用的是“export default”默认输出，而在这里要改为“module.exports = ”
    4. 运行结果
    在这里插入图片描述
    查看组件运行状态，不合适的地方调整样式，直到满意为止。

    注意： 在html页面中组件的名称不少于两个单词，且单词之间一定是用中划线分割，否则出现莫名其妙的错误。

    小结：在html中使用vue组件只需三步。第一步：引入http-vue-loader；第二步：将引入组件中的export default修改为module.exports =；第三步：在html中components选项中使用httpVueLoader加载组件

  • 相关阅读:
    数据结构 - 数组
    Tomcat深入浅出——Servlet(二)
    vSphere 架构设计方案（下）
    TechEmpower 21轮Web框架 性能评测 -- C# 的性能 和 Rust、C++并驾齐驱
    菜品识别易语言代码
    外贸跨境电商网站常用的在线客服系统
    Java 入门练习（6 - 10）
    [第三篇]——学习CentOS Docker 安装
    centos k8s安装dapr
    新来的员工，突然在我面前哭了
  • 原文地址：https://blog.csdn.net/guoyp2126/article/details/126166787