码迷,mamicode.com
首页 > Web开发 > 详细

vue.min.js 独立版本中,第三方js 通过vm使用vue内定义的数据

时间:2020-11-21 12:46:04      阅读:34      评论:0      收藏:0      [点我收藏+]

标签:alarm   gre   npm   技术   webp   sage   func   div   第三方   

 vue.min.js是啥?

vue.min.js是vue已封装好vue.js技术,方便我们学习vue技术,使用<script>可直接将vue.min.js文件导入HTML中的,即可方便学习和快捷使用vue相关技术。

在HTML中引入vue.min.js文件

1、独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

下载地址:https://vuejs.org/js/vue.min.js

在一个大屏展示的项目里 , <script> 很直接的使用了vue.min.js .不用放在webpack  npm  环境中就可以使用vue, 大屏展示肯定会有chart图 ,china地图等,他们是如何使用vue定义的数据和管控的域内的数据呢

data={
        alarm:{alarm:10,fault:10},
        dtu:{ on:150,off:150},
        plc:{on:10,off:10}
...................

var vm = new Vue({
    el: #content,
    data: scn_data,
    methods: {
        details: function() {
        },
    },
<div class="report">
                    <div class="report1">
                        <p>告警信息</p>
                        <small>{{alarm.alarm}}条</small>
                    </div>
                    <div class="report2">
                        <p>故障信息</p>
                        <small>{{alarm.fault}} 条</small>
                    </div>
               </div>
如果实时信息signalr控制 alarm.alarm
只需在
signalr 控制的js中使用 vm.alarm.alarm=count;  即可 
chat.client.sendmessage = function(name, message)
{
count++;
$("title").html("("+count+"条消息)通知-消息");
vm.alarm.alarm=count;
/* $(‘.report1 small‘).html(count+"条");*/
/* $(‘.layui-btn .layui-bg-gray‘).html(count);*/
//向页面添加消息
$("#messageBox").append(‘<li><strong style="color:green">‘ + name + ‘</strong>:‘ + message + ‘</li>‘);
}

vue.min.js 独立版本中,第三方js 通过vm使用vue内定义的数据

标签:alarm   gre   npm   技术   webp   sage   func   div   第三方   

原文地址:https://www.cnblogs.com/zuochanzi/p/13997864.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!