精华内容
下载资源
问答
  • VUE引入Html页面并进行交互

    千次阅读 2020-10-09 18:25:14
    VUE使用ifram引入html,并且实现页面间传值: 1、VUE页面代码: <template> <divclass=""> <iframe:src="src"width="80%"height="500"ref="iframe"></iframe> <div><button@...

    VUE使用ifram引入html,并且实现页面间传值:

    1、VUE页面代码:

    <template>

      <div class="">

        <iframe :src="src" width="80%" height="500"  ref="iframe"></iframe>

        <div> <button @click="sendMessage">向iframe中的html发送信息</button></div>   

      </div>

    </template>

    <script>

     

    export default {

      data () {

        return {

          src: 'http://localhost:8088/WebTest/',

          iframeWin: {}

        }

      },

      methods: {

        sendMessage () {

          // 外部vue向iframe内部传数据

          this.iframeWin.postMessage({

            cmd: 'getFormJson',

            params: {id:'接收到vue的传值'}

          }, '*')

        },

     

        handleMessage (event) {

        const data = event.data

        switch (data.cmd) {

          case 'returnFormJson':

            alert("Test:"+data.params.success);

            // 业务逻辑

            break

          case 'returnHeight':

            alert("vue接收:"+data.params.data);

            // 业务逻辑

            break

        }

      }

     

      },

      mounted () {

          window.addEventListener('message', this.handleMessage)

        this.iframeWin = this.$refs.iframe.contentWindow

      }

      

    }

    </script>

     

    2、Html页面代码:

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>iframe Window</title>
      <style>
        body {
          background-color: white;
          color: rgb(12, 0, 0);
        }
      </style>
    </head>
    <body>
    
    <h1>Html页面信息展示</h1>
    <button οnclick="sendMessage2()">向VUE发送信息</button>
    <script>
      function sendMessage2(){
        // 向父vue页面发送信息
        window.parent.postMessage({
          cmd: 'returnHeight',
          params: {
            success: true,
            data: "Hello,vue。"
          }
        }, '*');
      }
    
      // 接受VUE页面发来的信息
      window.addEventListener("message", function(event){
        var data = event.data;
        switch (data.cmd) {
          case 'getFormJson':
            alert("html接收:"+data.params.id);
            // 处理业务逻辑
            break;
        }
      });
    </script>
    </body>
    </html>
    

     

    展开全文
  • html页面引入vue

    千次阅读 2020-08-11 12:35:35
    基础环境 ①所需的基本ui组件 ...可以无需脚手架情况下对vue以脚手架形式编写vue文件,同时便捷了引入方式 基于Mui样例 index.html <!DOCTYPE html> <html> <head> <meta char.

     

    基础环境

    ①所需的基本ui组件

    基本后台模块 element、iview ,手机端可以mui 、 uniapp

    ②所需Vue版本

    建议官方最新版本为准,稳定性可靠

    ③兼容vue文件的http-vue-loader

    可以无需脚手架情况下对vue以脚手架形式编写vue文件,同时便捷了引入方式

     

    基于Mui样例

    index.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <link href="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/css/mui.min.css" rel="stylesheet">
            <script src="https://unpkg.com/vue"></script>
            <script src="https://unpkg.com/http-vue-loader"></script>
        </head>
        <body>
            <div id="app">
                <my-component />
                <router-view />
            </div>
            <script>
                new Vue({
                    el: '#app',
                    components: {
                        'my-component': httpVueLoader('components/body-see.vue'),
                    }
                });
            </script>
        </body>
    </html>

    组件部分

    <template>
        <div class="hello">
            <header class="mui-bar mui-bar-nav">
                <h1 class="mui-title">{{who}}</h1>
            </header>
        </div>
    </template>
    ​
    <script>
        module.exports = {
            data: function() {
                return {
                    who: 'world'
                }
            },
        }
    </script>
    ​
    <style>
        .hello {
            background-color: #ffe;
        }
    </style>
    ​

     

    一、参数传递差异性

    参数传递与正常webpack模式一致,可以引用官方传参的方式进行传值操作

    同时官方中的v-bind 依旧可以转换为 :

     

    一般来说HTML中页面引入vue的参数值,需要以data或props传递 
        1、index.html中若需多个js互相引用,建议vue对象以var设置为全局对象
    ​
        2、建议在初始化的时候就命名好data与props对象
        
        3、存在大小写值时,会以‘-’来自动区分,例如 testDemo,参数值传递的时候,以test-demo为基准

    动态设置data/props

    #格式上采用以下这种形式,默认上,数据赋值类型上都以此形式为准
        #设置data动态值
        vue.$data.datademo = "23"
    ​
        #设置props动态值
        vue.$props.propsdemo = "678"

     

    二、路由定制(vue-router)

    默认此处定义变量为 router

    //引入vue-router
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    ①路由抽离

    #page.js 类似路由的一个个例
    const routes = [
        {
            path: '/one',
            name: '1',
            component: httpVueLoader('components/body-one.vue')
        },
        {
            path: '/two',
            name: '2',
            component: httpVueLoader('components/body-two.vue')
        }
    ]

    ②整合vue-loader与路由

    #./js/router/router-plugin.js 负责挂靠vue-loader和路由
    ​
    #用于Vue实例中注册路由使用
    let router = null
    ​
    let RouterPlugin = function() {
        this.$router = null
    }
    ​
    /**
     * 安装VueRouter与挂载路由
     * @param {Object} VueLoad  加载VueRouter
     * @param {Object} list     分页
     */
    RouterPlugin.loadVueRouter = function(VueLoad, list) {
        router = new VueLoad({
            routes: list
        })
    ​
        this.install(router)
        this.clearOriginalRouterErr(router)
        return RouterPlugin
    }
    ​
    /**
     * 用于清除重复打开某一地址栏的错误信息
     * @param {Object} VueLoad   加载VueRouter
     */
    RouterPlugin.clearOriginalRouterErr = function(VueLoad) {
        const originalPush = VueLoad.prototype.push
        VueLoad.prototype.push = function push(location, onResolve, onReject) {
          if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
          return originalPush.call(this, location).catch(err => err)
        }
    }
    ​
    /**
     * @param {Object} router 自定义VueRouter方法
     */
    RouterPlugin.install = function(router) {
        this.$router = router
    ​
        this.$router.$avueRouter = {
            //正则处理路由
            validPath: function(list, path) {
                let result = false;
                list.forEach(ele => {
                    if (new RegExp("^" + ele + ".*", "g").test(path)) {
                        result = true
                    }
                });
                return result;
            },
        }
        #website.whiteList 为url路径列表,主要用于白名单免检列表
         this.$router.beforeEach((to, from, next) => {
            if (router.$avueRouter.validPath(website.whiteList, to.path)) {
                next()
            } else {
                next('/')
            }
         })
    }
    ​

    ③整合html页面(含初始化vue的页面)

    ...
    <script src="./js/vue-router.js"></script>
    <script src="./js/router/page.js"></script>
    <script src="./js/router/router-plugin.js"></script>
    ...
    ​
    <body>
            <div id="app">
                <p>
                    <router-link to="/one">Go to one</router-link>
                    <router-link to="/two">Go to two</router-link>
                </p>
                <router-view></router-view>
            </div>
    </body>
    ···
    <script>
        #pageRouter 代表第一个路由设置,page2Router代表第二个路由设置
        RouterPlugin.loadVueRouter(VueRouter,
                                   [].concat(pageRouter, page2Router))
                var vue = new Vue({
                    router,
                    el: '#app',
                })
    <script>            

    ④导航编程式路由

    ...     
    #vue的传统方法
    methods: {
        clickit() {
            this.$router.push({path: `one`})
        }
    }
    ​
    对应html
    <button @click="clickit()">2</button>
    ...
    ​
    #js的传统方法
    function clickit() {
        this.vue.$router.push({ path: `one` })
    }
    ​
    对应html
    <button onclick="clickit()">1</button>

     

    三、Http请求处理(axios)

    引入axios 优化ajax的请求处理机制

    默认此处定义为request

    //引入axios
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    ①定制化httpClient

    #./js/httpClient.js
    ​
    var request = null
    ​
    ​
    let httpClient = function() {
        this.request = null
    }
    ​
    ​
    httpClient.install = (res => {
        this.request = res
        return httpClient
    })
    ​
    ​
    /**
     * @params {object} 
     * 1、baseUrl 基础url
     * 2、timeout 超时时间设置
     * 用于初始化请求返回数据格式为json格式
     */
    httpClient.init = (params => {
        if (undefined != params) {
            if (undefined != params.baseUrl) {
                this.request.defaults.baseUrl = params.baseUrl
            }
            if (undefined != params.timeout) {
                this.request.defaults.timeout = params.timeout
            }
        }
        //跨域请求,允许保存cookie
        this.request.defaults.withCredentials = true;
        this.request.defaults.headers.post['Content-Type'] = 'application/json';
        this.request.defaults.headers.get['Content-Type'] = 'application/json';
        this.request.defaults.headers.put['Content-Type'] = 'application/json';
        this.request.defaults.headers.delete['Content-Type'] = 'application/json';
        return httpClient
    })
    ​
    ​
    /**
     * @params {object} 
     * 1、NPgres  页面加载条
     * 2、requestHandler 
     *      对数据请求前预处理及错误预处理
     * 3、responseHandler
     *      对数据返回的结果进行处理及错误处理
     * 用于初始化请求返回数据格式为json格式
     */
    httpClient.interceptors = (params => {
        let NProgress = {
            start: () => {},
            done: () => {}
        }
        let requestHandler = {
            advance: () => {},
            error: () => {}
        }
        let responseHandler = {
            advance: () => {},
            error: () => {}
        }
    ​
        if (undefined != params) {
            if (undefined != params.NPgres) {
                NProgress = params.NPgres
            }
        }
    ​
        //HTTP request拦截
        request.interceptors.request.use(config => {
            requestHandler.advance(config)
            NProgress.start()
            return config
        }, error => {
            requestHandler.error(error)
            return Promise.reject(error)
        })
    ​
        //HTTP response拦截
        request.interceptors.response.use(data => {
            responseHandler.advance(data)
            NProgress.done()
            return data
        }, error => {
            NProgress.done()
            responseHandler.error(error)
            return Promise.reject();
        });
    })
    ​

    ②请求头设置

    ## 以授权为例子,描述请求头标识的问题,AUTH_TOKEN 为自己提供的一个存储值
    #1、可以在请求头拦截器中配置信息
    ​
    axios.interceptors.request.use(config => {
     
        config.headers['Authorization'] = AUTH_TOKEN
     
        return config
    }
                                   
    #   初始化拦截校验中配置信息       
                            
     axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

    ③整合html页面

    # 引入httpClient
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./js/httpClient.js"></script>
    ​
    #若需要引入Npgress可以引入
    <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
    <link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet">
    <script>
    ...
    ​
    httpClient.install(axios).init({
        baseUrl: "/api",
        timeout: 15000,
    }).interceptors({
        //根据选择可以是否引入
        NPgres: NProgress
    })  
                
    ...
    </script>
    展开全文
  • html页面引入vue组件

    千次阅读 2020-09-08 11:30:13
    html页面引入vue组件需要在页面引入http-vue-loader.js 注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问...

    html页面引入vue组件需要在页面引入http-vue-loader.js

    注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html

    1.创建my-component.vue

    <template>
        <div class="hello">Hello {{who}}</div>
    </template>
     
    <script>
    module.exports = {
        data: function() {
            return {
                who: 'world'
            }
        }
    }
    </script>
     
    <style>
    .hello {
        background-color: #ffe;
    }
    </style>
    

    2.创建index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <!-- 引入样式 -->
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 先引入 Vue -->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <!-- 引入 http-vue-loader -->
        <script src="https://unpkg.com/http-vue-loader"></script>
    </head>
    
    <body>
        <div id="app">
            <my-component></my-component>
        </div>
    </body>
    
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        // 使用httpVueLoader
        Vue.use(httpVueLoader);
        new Vue({
            el: '#app',
            data: function () {
                return { visible: false }
            },
            components: {
                // 将组建加入组建库
                'my-component': 'url:./component/my-component.vue'
            }
        })
    </script>
    </html>
    

    注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问http://localhost:port/index.html

    展开全文
  • .html页面引入vue并使用公共组件

    万次阅读 热门讨论 2019-09-10 14:26:59
    整体项目采用传统 .html 文件搭建,vue仅作为渲染数据工具使用,需要使用的地方使用 <script> 标签引入。 现有数个页面,每个页面都包含相同 header 和 footer ,希望可以把 header 和 footer 提取出来,避免...

    问题描述:
    整体项目采用传统 .html 文件搭建,vue仅作为渲染数据工具使用,需要使用的地方使用 <script> 标签引入。
    现有数个页面,每个页面都包含相同 headerfooter ,希望可以把 headerfooter 提取出来,避免太多重复代码。

    解决办法
    公共部分写在 .js 文件里,本质就是在当前页面中写的公共组件,组件规则遵从vue的组件规则。
    template后面可以采用字符串拼接(内容少),或者是使用 `定义模板字符串。

    目录结构:

    —test
    ——header.js //公共头部
    ——index.html //页面
    ——vue.js
    在这里插入图片描述
    index.html

    <!doctype html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>test</title>
    		<!--引入vue-->
    		<script type="text/javascript" src="vue.js"></script>
    		<!--引入公共组件-->
    		<script type="text/javascript" src="header.js"></script>
    	</head>
    	<body style="font-size: 30px">
    		<div id="vue_app">
    			<!--自定义的组件使用-->
    			<common-head></common-head>
    			<!--页面自有内容-->
    			<div style="background: #fba">我是内容</div>
    		</div>
    		</div>
    	<script>
    		//vue
    		app_all=new Vue({
    			el: "#vue_app"
    		})
    	</script>
    	</body>
    
    </html>
    

    header.js

    /*Vue.component('common-head',{
    	template:'<div>'+
    				'<h1>hhhhhhh</h1>' + 
    				'<h1>duusdfsjkdfh</h1>' +
    			  '</div>'
    });*/
    Vue.component('common-head',{
    	template:`<div style="background: #baf">
    				<h1>这是公共组件</h1>
    				<h1>公共的头部</h1>
    			  </div>`
    });
    
    展开全文
  • 如图:两个组件在页面上不显示 原因: < template> (将要渲染的HTML)必须是包含在一个标签里面的。 解决: 最外层加个div包起来就行 代码示例: 在App.vue引入一个组件 App.vue <template> <...
  • 最近项目要求,需要在vue中使用iframe标签引入html页面,下面记录采坑记录(注意:我这里使用的是vue3.0) 首先,我在public目录下新建了一个static的文件夹,然后将html页面放在了public/static目录下,然后在...
  • 遇到一个这样的问题,实际页面中用到dialog,并且引入了其他页面,当然这里用的vue + elementUI 如果想要引入页面在弹框每次弹出时进行初始化,如图: 但是dialog中子页面只会在父页面加载完后,第一次点击事件时...
  • 当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时,我们可以使用iframe去引用html页面,实现他们的交互 首先我们可以再vue页面中使用标签引用html页面 <template> <div> <iframe ...
  • html页面引入vue组件之http-vue-loader.js

    千次阅读 2021-04-05 21:13:16
    首先这种方法不推荐,日常工作中也不会在html里面引入一个vue文件,只是为了有时候方便测试才会这么做 1.创建my-component.vue <template> <div class="hello">Hello {{who}}</div> </...
  • 动态生成二维码并显示页面上动态刷新 动态生成二维码并显示页面上动态刷新 业务场景:后端传回来一组数据,数据内容是一个数组中有n个对象,对象的其中一个属性是一串字符串类型的数字,现在需要将这个数字都...
  • vue组件引入html页面并实现数据交互

    千次阅读 2020-12-03 17:00:21
  • HTML引入 vue.js 写页面

    千次阅读 热门讨论 2019-12-05 15:00:04
    突然说要写两个页面(只有两个页面,不是一个完整的项目。。),有点懵,不知道从哪下手,而且只对 vue 熟悉那么一丢丢。但是没办法鸭,只能硬着头皮去做了!在这里做一下笔记。 一、前期准备 1. 新建文件夹,并且...
  • 最近在vue项目中遇到引入外部html页面问题,直接使用了iframe标签显示不全,最后用缩放的思路解决 代码如下: <div class="iframe-father"> <iframe :src="pdfUrl" width="920px" id="iframe1" style=...
  • 页面vue引入富文本tinymce-4.7.5

    千次阅读 2019-04-14 13:03:40
    一直用vue-cli创建项目,差点把原生引入vue的写法忘了,刚好项目有个需求就来做个小练习。 首先要先把富文本tinymce-4.7.5的js下载回来。 tinyMCE下载地址:https://www.tiny.cloud/get-tiny/self-hosted/ 其中...
  • Vue 引入组件、引入图片

    千次阅读 2020-03-31 16:07:36
    1、全局引入(在App.vue的script标签中) 1、引入(Import 变量 from 路径) import head form '@/components/head' import footer form '@/components/footer' 2、注册(注册的名字不能是html的关键字,因为要当...
  • vue页面引入百度统计

    千次阅读 2018-10-25 17:40:01
    开始第一想法就是放在index.html都可以调用,回头一想不对,聪明反被聪明误,vue不会页面刷新了,也就是你的加载百度统计代码也就那一次,统计也就一次,很显然不对 下面是百度给的代码 var_hmt = _hmt || [];  ...
  • vue引入百度离线地图

    千次阅读 热门讨论 2019-04-24 14:01:17
    前几天在vue引入了在线百度地图,根据demo测试,写了几种方法《vue引入在线百度地图》,今天就介绍如何在vue引入百度离线地图。 1、首先要准备下载百度离线地图所需的文件,文件地址:vue引入百度离线地图...
  • 在这里我刁侃下我当时是想要通过components函数去添加组件到.html页面去但是失败了,所以才使用了render函数 接着我们需要在.html文件进行引入我们.js文件 <script src="./webapp/static/dist/custom.js"><...
  • 需求 导入公共页面,比如...header.vue(就是普通的页面没有特殊之处,例如) <template> <view> 这里是header页面 </view> </template> <script> export default { data() {
  • vue页面应用引入并配置weixin-js-sdk

    千次阅读 2019-01-04 10:59:32
    vue项目公众号开发,需要使用到分享功能,根据文档引入weixin-js-sdk,首次接触,所以一开始就百度看了大量的贴吧,几乎所有的文章都是说单页面SPA应用需要在每次url变化的时候都得重新配置sdk,也就是wx.config();...
  • vue引入vue,js插件

    千次阅读 2019-03-19 14:35:53
    一般的vue或是js插件,通常都可以直接install,然后进行下一步。但是不排除各种原因install失败,需要手动下载。还有一部分是自定义的插件。 第二步:引入 install ,手动下载,自定义插件: 这三部分一般推荐使用...
  • vue项目中使用iframe引入本地html页面

    千次阅读 2020-11-13 16:58:08
    2.然后直接在页面中使用iframe,src路径直接static开头,打包好的项目就是已public为根目录的,所以直接这样引用即可. <iframesrc="static/screenNewTest/index.html"frameborder="0"class="iframe"></...
  • html 引入 vue.js

    千次阅读 2020-06-13 23:01:21
    html 引入 vue.js 1 vue官网 下载 vue.js 目录结构 编码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • 然后将页面分成多个组件,分别在vue中实现,但是在引入js时出现了问题,我吧js文件放在了assets下,引入时一直报错这个js中有文件找不到,这个js主要是监听一些DOM元素,动态添加一些样式,还有各种事件的监听,...
  • html页面直接引入vue.js,并用运用

    千次阅读 2020-05-13 18:49:17
    HTML <divid="app"> {{msg}} </div> JS <scriptsrc="https://unpkg.com/vue/dist/vue.js"></script> <script> window.onload=function(){ newVue({ el:'#app', ...
  • vue引入zTree入门

    万次阅读 热门讨论 2018-07-04 15:14:08
    vue引入zTree,和引入其他组件类似,首先在main.js里将以下3个js引入:import "./js/jquery-3.3.1.min.js"; import "../plugins/zTree/js/jquery.ztree.core.min.js"; import "../...
  • 1、npm引入html2canvas npm install html2canvas 2、项目引入html2canvas import html2canvas from 'html2canvas'; 3、html代码,省略了具体的页面内容代码。 弹窗控件使用了vant中的popup 引入popup import Popup...
  • 后来因为种种原因需要使用 vue 开发接下来的页面,但是重新做一个带多组动画的首页很麻烦,于是想到将首页home.html以及它的静态资源assest文件夹作为独立项目引入vue cli 中。 遇到了不少问题,第一天搞到凌晨2...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,192
精华内容 20,876
关键字:

vue引入html页面并显示

vue 订阅