前端引入模板的4种方法

 

本章来介绍php,html,vue和小程序四种环境中引用前端模块的方式方法。我们要知道,引用模块是的开发大大提高了效率和难度,不同开发语言和开发环境引用模块的方式也不同。

一、php中引用公共模版

如果不是vue项目,我们可以利用php的【include】方式在引用html模版,这个方式可以在任何html位置引用html文件,不过毕竟php是后端语言,前端没什么特殊情况一般不用写。不过这里还是介绍一下: 例如:


<?php include 'menu.html'; ?>

二、script承放html模版

除了以上这种方法之外,我们还可以用另外一种方式,使用 < script></script>定义一段可以在网站任何地方引用的html代码块,方法就是把type属性改为“type="text/html",以说明是html类型的,要注意的是,必须要有一个id属性和值,用于引用该模版和查找到模版。也可以在一个.js文件写好html代码之后像引用js文件那样引入。 例如:


<script type="text/html" id="temp">
      <div class="item">
        <p>早上</p>
        <p>晚上</p>
      </div>
    </script>

三、在vue中定义组件

在vue项目中,我们就可以很简单的把重复使用的模版定义成一个组件,在需要使用的页面调用就可以了,方法也是比较单间,使用import关键字引入组件,在export default中定义组件, 在<template></template>中使用组件的标签名,就成功的引入一个vue组件。

例如:

<template>
<div id="app">
<Header />
</div>
</template>


<script>
import Header from './components/Header'

export default {
name: 'App',
components: {
Header
}
}
</script>

四、小程序中引用公共页面

在小程序中是如何引用公共页面的呢?比如一个底部导航文件,无论在哪个子页面都是一样的,这里就需要把它定义为一个模版页,我用到的方法是在根目录中新建一个【template】文件夹,在文件夹中新建一个.wxml文件,在这个文件中书写模版。

例如:

<template name="footer" class='footerbar'>
<view class='footer'>
<navigator class='item active' url="" hover-class="navigator-hover">
<text class='text'>首页</text>
</navigator>
<navigator class='item' url="" hover-class="navigator-hover">
<text class='text'>我的</text>
</navigator>
</view>
</template>

建好模版之后就是引用了,在需要使用的地方使用import 标签和template 标签,需要注意的是template 中的属性is的值是模版中的name值,要一致。 例如:


<!-- 公共尾部 -->
<import src ="../template/footer.wxml"/>
<template is="footer"/>



更多vue学习请移步及项目应用:

vue中的增加删除修改接口请求数据操作

深入了解vue组件——从注册到使用

VUE框架属性方法图文全解

Element-ui中点击table单元格获取该行数据的id

本文为博主原创文章,知识共享,开源精神,转载注明出处。