首页
前端开发

分类

当前位置: 云海天教程网 > 技术新闻 > 前端开发 >正文

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

更新时间:2020-11-21  作者:佚名   来源:网络转载


	vue.min.js 独立版本中,第三方js 通过vm使用vue内定义的数据
[web前端开发]

 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内定义的数据

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

上一篇: Java反射的使用 [编程语言教程] 下一篇: 项目部署 [随笔记录]
小编推荐
快速导航更多>>
JavaScript 教程 HTML5 教程 CSS3 教程 jQuery 教程 Vue.js 教程 Node.js 教程 SQL 教程 C 教程 PHP 教程 Linux 教程 Docker 教程 Nginx 教程 Python 教程 Java 教程

云海天教程网 版权所有

陕ICP备14013131号-3