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

Posted 2020-12-21 蒙蒙大川

 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>‘);
}