项目背景是:团队的历史项目,是flask tmeplate写的前段页面。然后我在一个页面A.html中引入了vue文件,使用了vue+element_ui技术。现在想在此A页面中插入另外一个页面B.html的内容(试图tab分开),因为入口只有A页面作为入口,想要在B.html中实现不同与A的功能。
Title
{{done}}
{{ "{{" }} msg {{ "}}" }}
hello
{{ "{{" }} title {{ "}}" }}
hello
前端:
但是全都写到一起,虽然可以分为两个vue实例来处理,但是不想两个功能的html代码和vue代码参和在一个文件中,导致一个文件太大太乱。
比如在A.html中的某个位置
{% include './new_module/B.html' %}
导入B的内容。A.html内容如下:
div id="order">
A部门工单申请
A页面的主要内容
B部门工单申请
{% include './order_manage/param_test.html' %}
注意:导入的内容是无法解析
出现的错误如下:
vue.js:634 [Vue warn]: Error compiling template:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as
查看页面源码,发现B.hmtl的代码已经加载进入A.html中,但是控制台查看元素中button中是没有绑定相关click代码的。
B部门工单申请 ......立即创建sss 立即创建222 取消 再见再见 {{ bye_msg }}但是出现了问题:方法无法调用!!!至今没找到解决办法
点击页面的按钮,方法没有被调用,隐约觉得原因是因为include加载模块后渲染没有识别vue的代码写法丢弃了。但是为啥能识别elment_ui的写法呢?不解....
尝试3,使用import导入script vue代码,然后vue实例加载template模版
此种方法B.html内容是:
{% macro create_param_search() %} var create_param_search = new Vue({ el: '#param_order_search_top', data: function () { return { sub_msg: "感谢阅读", bye_msg: "bye bye", form:{ name:"参数名称" } } }, mounted:function (){ console.log("create_param_search mounted") this.is_test_method() }, methods:{ is_test_method(){ console.log("is_test_method") } } }) {% endmacro %}立即创建sss 立即创建222 取消 再见再见 {{"{{"}} bye_msg {{"}}"}}A.html中展示B内容的区域的代码为:
下面是挑战性内容哦!!.......