精华内容
下载资源
问答
  • 【Vue】html调用vue组件实例函数以及动态修改变量的值
    千次阅读
    2020-05-09 21:36:20

    自从用了vue.js之后,习惯了双向绑定后,已经回不去以前的传统的jstl,jquery等模式了。

    本博文主要为了解决某些特殊情况下,需要通过调用index.html的全局function,从而达到调用vue组件里面对应的方法,并且能够修改对应vue组件里面变量属性。

    特殊情况例如:写个安卓app使用webview组件,然后h5页面是使用vue框架,原生的安卓要调用页面js的方法从而达到某种目的。如果使用传统的html,我们可以写一个全局function,然后安卓那边直接调用这个function就好了。当然使用vue框架也是这个原理,但是要稍微绕点圈子。

    index.html代码:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <title>vue_web_demo</title>
    </head>
    <body>
    
    <div id="app">
    </div>
    <!-- built files will be auto injected -->
    
    <script>
    	//全局函数 
      function openDialog(num) {
        warning(num);
      }
    
    
    </script>
    
    </body>
    </html>
    
    
    

    text.vue 组件代码

    <template>
      <div>
        <el-input type="text" v-model="text" auto-complete="off"></el-input>
        <el-button type="info" class="resetBtn" @click="resetForm">测试</el-button>
      </div>
    </template>
    
    
    <script>
    
      export default {
        data() {
          return {
            num: 1,
            text: "this is text"
          }
        },
        //初始化加载
        mounted: function () {
          //绑定全局函数(可以理解为函数监听初始化)
          this.loginAlert();
        },
        //具体js方法
        methods: {
          //绑定全局函数(可以理解为函数监听初始化)
          loginAlert() {
            const that = this;
            //声明全局函数
            window.warning = function (data) {
              console.log(data);
              //在全局函数里面调用当前实例的函数方法
              that.getCount(data);
            }
          },
          //组件函数方法
          getCount(data) {
            //直接对当前实例变量修改
            this.text = data;
            console.log(this.text);
          },
          //调用全局函数 即index.html的openDialog函数
          resetForm() {
            this.num = this.num + 1;
            openDialog(this.num);
          }
        }
      }
    
    
    </script>
    
    
    
    

    简要说明

    上面两个代码实际上功能是,点击“测试”按钮。

    1. 先调用text.vue组件的resetForm方法,
    2. 然后调用index.html页面的全局方法 openDialog
    3. openDialog方法又调用了全局方法warning
    4. 因为全局方法warning又绑定了当前text.vue组件的getCount方法。
    5. 最后通过getCount方法修改当前text.vue的属性变量

    实际上,我们如果想使用安卓调用text.vue的方法或者修改组件变量属性的话,其实是从第2步开始直接在安卓原生代码调用openDialog的全局js函数,从而达到修改text.vue属性变量的值

    小细节

    1. index.html页面的函数openDialog已经是全局函数了,在任何vue组件里面都可以直接调用。
    2. text.vue通过loginAlert方法,声明全局函数与本实例函数绑定,从而达到外部调用js,修改当前组件的属性变量。
    3. 组件里面声明全局函数warning,注意方法名不要跟其他全局函数命名一样,不然会有问题的。
    4. 如果大家有更好的思路,希望在下方评论留言,给后来人一个参考的机会。

    最后

    一般情况都不建议这样写,除非某些特殊情况下才写吧。。。。

    更多相关内容
  • 最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组件的经验,所以借此...
  • HTML文件中使用VUE组件

    千次阅读 2020-10-20 01:05:36
    本文的目的是学习如何在html中使用vue组件。主要内容是使用组件以有序列表的形式展示数组的数据。主要知识点有html,vue,v-for指令,js等等。

    一、前言

    本文的主要目的是学习如何在html文件中定义并使用组件。
    主要内容是定义一个用来展示文本的组件,在 <ol> 标签内部循环展示一个列表。
    学习本文前需要掌握html基础,vue实例,v-for指令。

    二、示例

    1、流程

    1. 引入vue.js文件
    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    
    1. 定义组件
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    });
    

    todo-item是组件的名字,props中声明从外部传入组件中的值,template定义组件的内容和样式。

    1. 创建vue实例
    var vm = new Vue({
        el: '#app',
        data: {
            groceryList: [
                { id: 0, text: '蔬菜' },
                { id: 1, text: '奶酪' },
                { id: 2, text: '牛肉' }
            ]
        }
    });
    

    数组groceryList是需要展示的数据。

    1. 使用组件
    <todo-item v-for="item in groceryList" :key="item.id" :todo="item"></todo-item>
    

    定义的组件用标签的形式使用,示例:<todo-item></todo-item>。v-for指令循环数组的每一项item,将item的值传给todo-item组件的todo变量。

    2、完整代码

    <!DOCTYPE html>
    <html>
    
    <head>
        <title>使用组件示例</title>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    
    <body>
        <div id="app">
            <ol>
                <todo-item v-for="item in groceryList" :key="item.id" :todo="item"></todo-item>
            </ol>
        </div>
        <script>
            Vue.component('todo-item', {
                props: ['todo'],
                template: '<li>{{ todo.text }}</li>'
            });
            var vm = new Vue({
                el: '#app',
                data: {
                    groceryList: [
                        { id: 0, text: '蔬菜' },
                        { id: 1, text: '奶酪' },
                        { id: 2, text: '牛肉' }
                    ]
                }
            });
        </script>
    </body>
    
    </html>
    

    3、目录结构

    |
    |--html                      // 保存html文件
    |  |--index.html             // 示例起始页
    |--js                        // 保存js文件
    |  |--vue.js                 // vue框架js文件
    

    三、总结

    1. 使用Vue.component()定义组件。
    2. 用标签的形式使用组件。
    展开全文
  • html中创建vue组件及引用

    千次阅读 2020-09-30 17:17:48
    html中创建vue组件及引用 需要的js文件 组件vue文件中的代码 <template> <div class="person-infor" @click="addressClick"> <div class="address-wrap" v-if="!data.address_str"> <p>...

    html中创建vue组件及引用

    需要的js文件
    在这里插入图片描述
    组件vue文件中的代码

    <template>
      <div class="person-infor" @click="addressClick">
        <div class="address-wrap" v-if="!data.address_str">
          <p>请添加收货地址</p>
        </div>
        <div class="address-wrap" v-else>
          <img
            src="./images/icon_adress.png"
            alt=""
            style="
              width: 11px;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
            "
          />
          <p style="padding-left: 20px">
            {{ data.username }}&nbsp;&nbsp;{{ data.phone }}
          </p>
          <p class="adress">{{ data.address_str }}</p>
        </div>
      </div>
    </template>
    <style scoped>
    p {
      margin: auto;
      padding: 0;
    }
    /* 地址组件 */
    .person-infor {
      background-color: #fff;
      padding: 10px 10px 10px 15px;
      font-size: 14px;
      line-height: 24px;
      margin-bottom: 10px;
      color: #5d5d5d;
    }
    .person-infor p {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-wrap: break-word;
      word-break: break-all;
      text-overflow: ellipsis;
    }
    .person-infor .adress {
      padding-left: 18px;
      line-height: 1.3;
    }
    .address-wrap {
      padding-right: 20px;
      position: relative;
    }
    .address-wrap:after {
      content: " ";
      display: inline-block;
      height: 6px;
      width: 6px;
      border-width: 2px 2px 0 0;
      border-color: #c8c8cd;
      border-style: solid;
      -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: relative;
      top: -2px;
      position: absolute;
      top: 50%;
      right: 0;
      margin-top: -4px;
    }
    /* 地址组件end */
    </style>
    <script>
    module.exports = {
      props: {
        data: Object,
      },
      data: function () {
        return {
        };
      },
      methods: {
        addressClick() {
          console.log("子组件,点击了");
          this.$emit("addressclick");
        },
      },
    };
    </script>
    

    html文件中引入及用法

    <!DOCTYPE html>
    <html lang="zh-cn">
    
    <head>
        <meta charset='utf-8'>
        <title>http-vue-loader引用vue组件</title>
        <!-- 页面描述 -->
        <meta name="description" content="" />
        <!-- 为移动设备添加 viewport -->
        <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
        <!-- 不让百度转码 -->
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <!--页面css end-->
        
        <style type="text/css">
            body {
                background: #f5f5f5;
                margin: auto;
                padding: 0;
            }
        </style>
    </head>
    
    <body>
        <div id="app" class="forget-pass">
            <address-info :data="datas" @addressclick="addressClick"></address-info>
        </div>
    
    
        <!--公共js start-->
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <!--公共js end-->
        <script src="./js/vue.js"></script>
        <script src="./js/httpVueLoader.js"></script>
        <!--页面js start-->
        <script type="text/javascript">
            // Vue.use(httpVueLoader)
            var vm = new Vue({
                el: '#app',
                components: {
                    'address-info': httpVueLoader('indexs.vue')
                },
                data: {
                    // 传到组件的数据
                    datas: {
                        username: '李湘湘',
                        phone: '123456789',
                        address_str: '用户地址用户地址用户地址用户地址'
                    }
                },
                methods: {
                    addressClick() {
                        // 这里执行跳转地址列表
                        console.log('父组件点击了,跳转到地址列表');
                    },
                },
                mounted: function () {
    
                },
                destroyed: function () {
    
                },
                created: function () {
                }
    
            })
    
    
        </script>
        <!--页面js end-->
    
    </body>
    
    </html>
    
    展开全文
  • 如何在HTML中使用VUE组件

    千次阅读 2022-02-25 11:56:15
    今天要在html中写入vue的代码。 这个问题很有趣。 首先vue是一个渐进式的框架。 但是很少人在html中写vue的代码,这种现象的原因是很多企业如果选择使用VUE,那么就会使用VUE的全家桶。 我认为 如果是用到VUE...

    今天要在html中写入vue的代码。

    这个问题很有趣。

    首先vue是一个渐进式的框架。

    但是很少人在html中写vue的代码,这种现象的原因是很多企业如果选择使用VUE,那么就会使用VUE的全家桶。

    我认为

    如果是用到VUE全家桶。

    那么

    这时vue这个框架已经渐进到了“最终形态”。

    需要vue的生态来支撑所以业务和需求。

    当然Vue有这个能力来很好地胜任。

    所以vue的市场份额就会于react难较高低。

    回归问题本身。

    为什么会有人选择在html中写入vue的代码。

    原因很简单,

    因为vue是一个渐进式的框架。

    就是他们并不需要一个完整的vue来帮我们支撑业务。

    他们不需要非常组件化的开发。

    不能因此就断定这个项目的好坏。

    但至少从现在的web开发角度来看,这是落后的。

     

    展开全文
  • 如下所示: 1、main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2、App.vue是我们的主组件,所有页面都是在App.vue下进行...以上这篇vue项目中,main.js,App.vue,index.html调用方法就是小编
  • 1、在HTML中使用vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ...
  • html页面引入vue组件

    千次阅读 2021-06-29 08:16:42
    html页面引入vue组件需要在页面引入http-vue-loader.js注意:要查看页面引入vue组件的效果不能直接在本地打开index.html,会有跨域问题,可以在本地配置一个nginx转发,再用浏览器访问...component.vueHello {{who}}...
  • vue组件调用组件的方法

    千次阅读 2022-02-15 11:53:46
    组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了...
  • js调用vue方法,vue.js引入封装组件

    千次阅读 2019-10-14 21:45:33
    今天在vue和js共存的...在这里简单记录一下VUE和JS方法的互相调用 <script> new Vue({ el: '#app', data: function() { return { } }, created: function (){ window.creatA...
  • 如果放在index.html,这样每个组件都会有这个js。所以需要在组件内单独引入。 第一种操作 Dom引入js: export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript';...
  • vue组件如何自己调用自己(组件递归) 在做侧边栏导航动态加载时,需要用到vue的组件递归,最开始打算直接写函数递归来解决问题,结果没什么卵用,越写越复杂。直接上代码 给组件name值 <script> export ...
  • 如何把孙组件内特定的数据传给爷组件? 例如 把孙组件的名字传给爷组件并在爷组件上显示 思路 在孙组件被点击后 emit 事件 1 和孙组件的名字 在父组件上监听孙组件 emit 出的事件 1,再次 emit 事件 2 在爷组件...
  • 01-创建一个好的组件 02-在js文件创建函数 html <!-- * @Author: Allyn * @Description: * @Date: 2022-02-05 19:47:40 * @LastEditTime: 2022-02-05 20:05:03 * @FilePath: \hmYouGou\components\test....
  • vue2中,子组件调用组件,直接使用this.$emit()即可。 但是在vue3中,很显然使用this.$emit() 已经开始报错了,为什么会报错呢? 原因是:在vue3中setup是在声明周期beforeCreate和created前执行,此时vue对象还...
  • Vue组件的三种调用方式

    万次阅读 2018-01-14 17:30:15
    最近在写fj-service-system的时候,遇到了一些问题。那就是我有些组件,比如Dialog、Message这样的组件,是...通常我们看Vue的一些文章的时候,我们能看到的通常是讲Vue单文件组件化开发页面的。单一组件开发的文章相
  •  【父组件】: <template> <div> <span style="color: red">-------------------------------------------</span><br> <span style="color: red">这是父组件页面</span&...
  • VUE组件调用组件弹窗

    千次阅读 2021-04-11 16:39:02
    VUE组件调用组件弹窗 想搞一个新增编辑弹窗,和列表页面分开 先来一个父组件调用组件弹窗的demo 父组件 <template> <div> <el-button @click="show">按钮</el-button> &...
  • Vue的父组件调用组件方法

    千次阅读 2021-01-12 10:35:57
    没想到第一篇要分享的竟然是前端的内容,在进入项目组之前我所会的只是一些原生的html、js,目前前台最流行的两大框架Vue和React基本没接触过,正式接过来需求之后,因为研发项目组前端人员紧张,我就不得不硬着头皮...
  • Vue3.x中子组件调用组件的方法

    千次阅读 2021-08-07 18:35:49
    文章目录前言一、问题描述二、解决方法1. 问题原因2. 解决办法总结 前言 困难与折磨对于人来说,是一把打向坯料的锤,打...也很庆幸从坑中爬了出来并在此留下记录,本文解决我当时在子组件中如何调用组件中的方法。
  • 1.vuejs组件之间的调用components 注意:报错Do not use built-in or reserved HTML elements as component id: 修改组件的名字,例如不能使用address为组件名字 组件名字不要使用内置的或保留HTML元素为组件id, ...
  • .html页面引入vue并使用公共组件

    万次阅读 热门讨论 2019-09-10 14:26:59
    问题描述: 整体项目采用传统 .html 文件搭建,vue仅作为渲染数据工具使用,需要使用的地方使用 <...公共部分写在 .js 文件里,本质就是在当前页面中写的公共组件组件规则遵从vue组件规则。 temp...
  • 我就废话不多说了,大家看代码吧~ ...DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> [removed][removed] [removed][removed] [removed][removed]
  • vue中如何用纯js调用组件

    千次阅读 2021-01-09 23:30:34
    创建任务的抽屉需要在多个页面中调用,如果每个页面都要写import然后写html啥的很麻烦,所以决定模仿组件库的this.$message,这种一行调用的方法。 主要功能如下: 1.能给抽屉传值 2.抽屉关闭后有callback函数,方便...
  • 也需要在原生的js中调用vue组件的函数。 一、Vue中引入原生未封装js 一般情况下对于已封装的js文件,只需要import该js,然后直接使用即可,但是问题就出现在该js未封装。 最终的解决办法,将该js引入到index.html...
  • 这篇文章是搬运:https://www.cnblogs.com/jin-zhe/p/9523782.html#commentform 如果想看原版请前往这个网址,谢谢 这篇文章中介绍了三种方法分别为:1、子组件通过使用this.emit('xxx') (xxx:是你要调用的方法名,...
  • 第一章 Vue中创建组件及引入组件调用 文章目录一、什么是组件?二、如何注册组件?1.注册组件2.vue项目中引入组件总结 Vue创建组件 ` Vue框架最核心思想就是组件化,方便开发,便于维护管理,那么,如何在vue中...
  • Vue组件化开发和vue接口调用

    千次阅读 2020-08-19 11:17:49
    全局组件注册Vue.component 示例代码: Vue.component('my-cart',{ data:function(){ return {返回的是组件中使用的数据} }, template:`<h1>这是组件的模板结构</h1>` }) 参数分析: data:必须...
  • side.vue 文件内容 <template> <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s"> <div style="background-color: black; height: 60px;...
  • 组件P的HTML构成如下,想调用组件C的c_method方法,首先给子组件定义ref属性: <!-- P.vue --> <template> <C ref="C"/> </template> JS定义一个child_C_method方法,使用 this.$...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 65,933
精华内容 26,373
关键字:

html调用vue组件

友情链接: ov5648_driver.zip