很多站长朋友们都不太清楚vue和html怎么结合，今天小编就来给大家整理vue和html怎么结合，希望对各位有所帮助，具体内容如下：
本文目录一览： 1、 vue和html的关系 2、 vue组件中怎么引入html文件 3、 vue html 怎么绑定数据 4、 vue组件中怎么引入html文件？ 5、 如何利用Vue.js库中的v-html指令添加html元素 vue和html的关系不恰当但好理解的说法，就是包含和被包含，vue包含html，并把html当做视图部分，因为vue还有model部分。
vue组件中怎么引入html文件vue组件中引入html文件
<script type="text/template" id="tpl">
--
</script>
js:
var MyComponent = Vue.extend({
template: '#tpl'
});
vue html 怎么绑定数据声明数据：
var vm = new Vue({
el: '#example',
data: {
/data/upload/help/202211/19/6f05bc6fdf14aa75cc5051146c376cc0.: ""
}
})
绑定数据：
<div id="example">
<img v-bind:src="/data/upload/help/202211/19/6f05bc6fdf14aa75cc5051146c376cc0." />
</div>
vue组件中怎么引入html文件？1、HtmlPanel.vue文件
<template> <div> <mu-circular-progress :size="40" v-if="loading"/> <div v-html="html"></div> </div></template><style> </style><script> export default{ // 使用时请使用 :url.sync=""传值 props: { url: { required: true } }, data () { return { loading: false, html: '' } }, watch: { url (value) { this.load(value) } }, mounted () { this.load(this.url) }, methods: { load (url) { if (url url.length > 0) { // 加载中 this.loading = true let param = { accept:'text/html,text/plain' } this.$http.get(url, param).then((response) => { this.loading = false // 处理HTML显示 this.html = response.data }).catch(() => { this.loading = false this.html = '加载失败' }) } } } }</script>
htmlViewSample.vue
?
12345678910111213141516171819202122232425
<template> <div> <v-html-panel :url.asyc="url1"></v-html-panel> <v-html-panel :url.asyc="url2"></v-html-panel> </div></template><style scoped> div{color:red}</style><script> export default{ data () { return { url1: '', url2: '' } }, mounted () { this.url1 = '' this.url2 = '' }, methods: { } }
</script>
2、效果图
3、注意事项：
直接使用axios处理的GET请求，需要处理跨域；
外部的css样式会作用到显示的html；
同时加载的外部html里的script也可能会执行，需要按需处理下；
外部HTML文件内部的相对路径将不会被自动识别，绝对路径可以。
如何利用Vue.js库中的v-html指令添加html元素so easy!
<div v-html="demo"></div>
data:function(){
return{
demo:"<p>123123</p>"
}
}
关于vue和html怎么结合的介绍到此就结束了，不知道本篇文章是否对您有帮助呢？如果你还想了解更多此类信息，记得收藏关注本站，我们会不定期更新哦。
查看更多关于vue和html怎么结合 用vue写html页面的详细内容...