jq && vue 引入外部模板文件

最新推荐文章于 2023-11-08 17:05:19 发布

uuai

最新推荐文章于 2023-11-08 17:05:19 发布

阅读量1.8k

点赞数 2

分类专栏： vue javascript

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vue

12 篇文章 0 订阅

订阅专栏

1.通过jq的load引入文件

index，abou文件内容相同，无跳转刷新页面

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div>
    <div class="container">
        <div classs="row">
            <div class="col-md-3">
                <ul class="list-group">
                    <li class="list-group-item list-group-item-action" >
                        <a href="index.html">首页</a>
                    </li>
                    <li class="list-group-item list-group-item-action" >
                        <a href="about.html">关于我们</a>
                    </li>

                </ul>
            </div>
            <div class="col-md-9">
                <div class="panel panel-default">
                    <div id="main" class="panel-body">
                        <p>首页</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
    $(function ($) {
        $('.list-group-item').on('click', function () {
            var href = $(this).attr('href');
            $('#main').load(href + " #main>*");
            return false;
        })
    })
</script>
</html>

2.vue引入.html作为模板

template.html

<p>我是导入模板    自身参数：{{a}}|外部入参：{{b}}</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <hello-world :b="parame"></hello-world>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.5/vue.js"></script>
<script>
    Vue.component('hello-world', function (resolve, reject) {
        $.get("./template.html").then(function (res) {
            resolve({
                template: res,
                props: ["b"],
                data: function () {
                    return {
                        a: "子组件参数"
                    }
                }
            })
        });
    })
    new Vue({
        el: "#app",
        data: {
            parame: "父组件参数"
        },
    })
</script>
</html>