html通过CDN引入Vue使用Vuex以及Computed、Watch监听

html通过CDN引入Vue使用Vuex以及Computed、Watch监听

近期遇到个需求，就是需要在.net MVC的项目中，对已有的项目的首页进行优化，也就是写原生html和js。但是咱是一个写前端的，写html还可以，.net的话，开发也不方便，还得安装Visual Studio启动项目。所以就计划在html文件中开发，然后移植到.net的项目中

功能说明：需要开发一个dashboard，也就是大屏可视化，多个模块，然后由图表作为主要内容。那么就意味着需要全局监听，如果筛选条件改变，那么所有的组件都需要监听到这个改变，做出相应的反应。

效果图

在这里插入图片描述

代码实现

store.js

const store = new Vuex.Store({state: {msg: 'Hello World',count: 5},mutations: {increment(state, payload) {console.log('的话',state,payload)state.count ++}},actions: {increment(context, payload) {setTimeout(() => {context.commit('increment', payload);}, 2000);}},getters: {msg(state) {return state.msg.toUpperCase();},count(state) {return state.count;}},
});

然后将store挂载到Vue上
主页面html


<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Grid Layout 示例</title><!-- 引入样式 --><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>#loader-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; }#loader {display: block; position: relative; left: 50%; top: 40%; z-index: 1001; width: 90px; height: 90px; margin: -45px 0 0 -45px; border-radius: 50%; border: 3px solid transparent;border-top-color: #fe9501;         -webkit-animation: spin 2s linear infinite;-ms-animation: spin 2s linear infinite;-moz-animation: spin 2s linear infinite;-o-animation: spin 2s linear infinite;animation: spin 2s linear infinite;}#loader:before {content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;-webkit-animation: spin 3s linear infinite;-moz-animation: spin 3s linear infinite;-o-animation: spin 3s linear infinite;-ms-animation: spin 3s linear infinite;animation: spin 3s linear infinite;}#loader:after {content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #fe9501;-moz-animation: spin 1.5s linear infinite;-o-animation: spin 1.5s linear infinite;-ms-animation: spin 1.5s linear infinite;-webkit-animation: spin 1.5s linear infinite;animation: spin 1.5s linear infinite;}@-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }}@keyframes spin {0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }}.load-text{color: #fe9501;text-align: center;position: relative;top: 55%;transform: translateY(-50%);}html {font-size: 100%; /*100 ÷ 16 × 100% = 625%*/}@media screen and (min-width:800px) and (max-width:999px) {html { font-size: 65%; }}@media screen and (min-width:1000px) and (max-width:1024px) {html { font-size: 70%; }}@media screen and (min-width:1025px) and (max-width:1280px) {html { font-size: 90%; }}@media screen and (min-width:1281px) and (max-width:1680px) {html { font-size: 100%; }}@media screen and (min-width:1681px) and (max-width:1920px) {html { font-size: 100%; }}@media screen and (min-width:1921px) and (max-width:2240px) {html { font-size: 150%; }}@media screen and (min-width:2241px){html { font-size: 150%; }}.vue-grid-layout {background: #eee;}.vue-grid-item:not(.vue-grid-placeholder) {background: #ccc;border: 1px solid black;}.vue-grid-item .resizing {opacity: 0.9;}.vue-grid-item .static {background: #cce;}.vue-grid-item .text {font-size: 24px;text-align: center;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 100%;width: 100%;}.vue-grid-item .no-drag {height: 100%;width: 100%;}.vue-grid-item .minMax {font-size: 12px;}.vue-grid-item .add {cursor: pointer;}.vue-draggable-handle {position: absolute;width: 20px;height: 20px;top: 0;left: 0;background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat;background-position: bottom right;padding: 0 8px 8px 0;background-repeat: no-repeat;background-origin: content-box;box-sizing: border-box;cursor: pointer;}.vue-grid-item{display: flex;}.echart{width: 100%;height: 100%;min-height: 5rem;}</style>
</head>
<body><div id="app"><!-- <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true"><grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" class="grid-item">{{ item.i }}</grid-item></grid-layout> --><el-button @click="cliackDialog" type="success">Button</el-button><el-button @click="increment" type="success">{{count}}</el-button><el-dialog :visible.sync="visible" title="Hello world"><p>Try Element</p></el-dialog><my-component title="标题" content="This is the first component"></my-component></div><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 引入Vuex --><script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script><!-- 引入gird组件 --><script src="./vue-grid-layout.common.js"></script><script src="./vue-grid-layout.umd.min.js"></script><!-- 引入组件库 --><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script><!-- 引入子组件 --><script src="./son.js"></script><!-- 引入vuex --><script src="./store.js"></script><script>new Vue({el: '#app',store,data: {draggable: true,resizable: false,index: 0,visible:false,},computed: {count() {return this.$store.state.count;}},watch:{'$store.state.count':{handler(newVal,oldVal){console.log('主界面监听Vuex',newVal,oldVal)}}},mounted(){this.initEchart()},methods: {increment() {this.$store.commit('increment');},cliackDialog(){this.visible = !this.visible},}   });</script>
</body>
</html>

子组件js

{/* <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script> */}var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = './son.css';
document.head.appendChild(link);let htmlstr = `<div><div class="son-box">{{ title }} - {{ content }} - {{str}}</div><div class="echart2">2</div></div>
`
// 导入 mapState 辅助函数  这样监听和通过$store监听都可以
// const { mapState } = Vuex;// my-component.js
Vue.component('my-component', {props: ['title', 'content'],template: htmlstr,data(){return{str:1}},// computed: {//   ...mapState(['count'])// },watch: {// count:{//   handler(v){//     // 在 count 发生变化时执行的操作//     console.log('子组件监听Vuex', v);//   }// },'$store.state.count':{handler(newVal,oldVal){console.log('子组件监听Vuex',newVal,oldVal)}}},mounted(){// setTimeout(()=>{this.initEchart()// })},methods:{initEchart(){var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]};setTimeout(()=>{let chartDom2 = document.getElementsByClassName('echart2')[0]var myChart2 = echarts.init(chartDom2);myChart2.setOption(option);})}}
});

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/213044.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

期末速成数据库极简版【查询】（3）

期末速成数据库极简版【查询】（3）

目录 多表查询 【8】多表连接——内连接 &#x1f642;等值连接 &#x1f642;自然连接 &#x1f642;非等值连接 【9】多表连接——外连接 【10】交叉连接不考 【11】联合查询 【12】扩展多表连接 【13】嵌套查询 &#x1f642; 多表查询 【8】多表连接——内连…
阅读更多...
OSPF路由协议

OSPF路由协议

随着Internet技术在全球范围的飞速发展&#xff0c;OSPF已成为目前应用最广泛的路由协议之一。OSPF&#xff08;Open Shortest Path First&#xff09;路由协议是由IETF&#xff08;Internet Engineering Task Force&#xff09;IGP工作组提出的&#xff0c;是一种基于SPF算法的…
阅读更多...
JS 云服务 Deno Depoly 宣布，推出定时运行功能 Deno Cron

JS 云服务 Deno Depoly 宣布，推出定时运行功能 Deno Cron

如果需要定时执行 JS 脚本&#xff0c;以后多一个选项。 Web 构建日益复杂。编写现代软件包括利用云基础设施、剖析模板代码和管理复杂的配置&#xff0c;而开发人员只想专注于编写业务逻辑。 Deno 旨在通过删除配置和不必要的模板&#xff0c;从根本上简化 Web 开发。我们将无…
阅读更多...
网络攻击（三）--攻击阶段

网络攻击（三）--攻击阶段

5. 威胁建模阶段 目标 了解威胁建模阶段的工作内容 工作内容 威胁建模主要使用在情报搜集阶段所获取到的信息&#xff0c;来标识出目标系统上可能存在的安全漏洞与弱点。 在进行威胁建模时&#xff0c;确定最为高效的攻击方法、所需要进一步获取到的信息&#xff0c;以及从…
阅读更多...
【前端】CSS浮动（学习笔记）

【前端】CSS浮动（学习笔记）

一、浮动 1、传统网页布局 网页布局的本质&#xff1a;用 CSS 来摆放盒子&#xff0c;把盒子摆放到相应位置。 CSS 提供了三种传统布局方式&#xff08;盒子如何进行排列顺序&#xff09; 普通流&#xff08;标准流&#xff09;浮动定位 实际开发中&#xff0c;一个页面基…
阅读更多...
Tomcat头上有个叉叉

Tomcat头上有个叉叉

问题原因&#xff1a; 这是因为它就是个空的tomcat,并没有导入项目运行 解决方案&#xff1a; war模式&#xff1a;发布模式&#xff0c;正式发布时用&#xff0c;将WEB工程以war包的形式上传到服务器 war exploded模式&#xff1a;开发时用&#xff0c;将WEB工程的文件夹直接…
阅读更多...
【网络协议】LACP（Link Aggregation Control Protocol，链路聚合控制协议）

【网络协议】LACP（Link Aggregation Control Protocol，链路聚合控制协议）

文章目录 LACP名词解释LACP工作原理互发LACPDU报文确定主动端确定活动链路链路切换 LACP和PAgP有什么区别&#xff1f;LACP与LAG的关系LACP模式更优于手动模式LACP模式对数据传输更加稳定和可靠LACP模式对聚合链路组的故障检测更加准确和有效 推荐阅读 LACP名词解释 LACP&…
阅读更多...
智能外呼有什么好处？

智能外呼有什么好处？

智能外呼是一种自动化的电话营销方式&#xff0c;利用AI智能外呼技术和大量数据分析&#xff0c;帮助企业实现与客户之间的高效、精准、个性化的客户沟通&#xff0c;还可以在客户服务、市场营销和销售等方面带来助力。那么&#xff0c;智能外呼有什么好处呢&#xff1f; 1. 提…
阅读更多...
通过生成模拟释放无限数据以实现机器人自动化学习

通过生成模拟释放无限数据以实现机器人自动化学习

该工作推出RoboGen&#xff0c;这是一种生成机器人代理&#xff0c;可以通过生成模拟自动大规模学习各种机器人技能。 RoboGen 利用基础模型和生成模型的最新进展。该工作不直接使用或调整这些模型来产生策略或低级动作&#xff0c;而是提倡一种生成方案&#xff0c;该方案使用…
阅读更多...
simulink MATLABFunction模块中实时函数调用函数的使用

simulink MATLABFunction模块中实时函数调用函数的使用

样例 function Predyy matlabceshi(input, Time_s) input1 input; Time_s1 Time_s; Predyy ee(input1) mm(Time_s1); end 上面是主要部分&#xff0c;下面是被调用部分 function A ee(input1) A input1 * 100; end function B mm(Time_s1) B Time_s1 * 100; end 模型…
阅读更多...
Linux(ubuntu)利用ffmpeg+qt设计rtsp_rtmp流媒体播放器（完全从0开始搭建环境进行开发）

Linux(ubuntu)利用ffmpeg+qt设计rtsp_rtmp流媒体播放器（完全从0开始搭建环境进行开发）

一、前言 从0开始搭建Linux下Qt、ffmpeg开发环境。 从安装虚拟机开始、安装Linux(Ubuntu)系统、安装Qt开发环境、编译ffmpeg源码、配置ffmpeg环境、编写ffmpeg项目代码、完成项目开发。 完全从0开始搭建环境进行开发 完全从0开始搭建环境进行开发 完全从0开始搭建环境进行开…
阅读更多...
公务员国考省考小白需知

公务员国考省考小白需知

文章目录&#xff1a; 一&#xff1a;分类 1.国考 2.省考 二&#xff1a;必备途径 1.相关网站 1.1 官网 1.1.1 必须知道的 1.1.2 比较好用的 1.1.3 事业单位的 1.2 机构 ​​1.3 时事 ​​1.4 资源 1.5 题库 1.6 真题 ​2.相关公主号 3.应用 4.群聊如何找 三…
阅读更多...
【TwinCAT学习笔记 1】TwinCAT开发环境搭建

【TwinCAT学习笔记 1】TwinCAT开发环境搭建

写在前面 作为技术开发人员&#xff0c;开启任何一项开发工作之前&#xff0c;首先都要搭建好开发环境&#xff0c;所谓磨刀不误砍材工&#xff0c;一定要有耐心&#xff0c;一次不行卸载再装。我曾遇到过一个学生&#xff0c;仅搭建环境就用了两周&#xff0c;这个过程也是一…
阅读更多...
SSD数据在写入NAND之前为何要随机化？-part2

SSD数据在写入NAND之前为何要随机化？-part2

接part1介绍&#xff1a; 如何达到这个目的&#xff1f;业内常用的是对写入数据的数据进行随机化处理&#xff0c;这部分主要在SSD控制器中通过硬件实现。 上图b/c&#xff1a;在控制器芯片通过硬件方式实现随机化的读写流程&#xff0c;这个也是业内通常做法。随机化处理是在写…
阅读更多...
【K8S in Action】服务：让客户端发现pod 并与之通信（1）

【K8S in Action】服务：让客户端发现pod 并与之通信（1）

服务是一种为一组功能相同的 pod 提供单一不变的接入点的资源。当服务存在时&#xff0c;它的 IP 地址和端口不会改变。 客户端通过 IP 地址和端口号建立连接&#xff0c; 这些连接会被路由到提供该服务的任意一个 pod 上。 pod 是短暂&#xff0c;会删除增加&#xff0c;调度…
阅读更多...
Android 13 Settings蓝牙列表卡顿问题排查及优化过程

Android 13 Settings蓝牙列表卡顿问题排查及优化过程

一.背景 此问题是蓝牙列表界面息屏后再点击亮屏蓝牙界面卡住，划不动也不能返回，在人多的时候(附近开启的蓝牙设备过多的时候)会卡住大概四五秒才能滑动. 优化前效果见资源： 二.查找耗时点 根据Android Studio的Profiler工具进行排查，查找主线程时间线比较长的方法，如下：…
阅读更多...
IDEA远程调试与JDWP调试端口RCE漏洞

IDEA远程调试与JDWP调试端口RCE漏洞

文章目录 前言Docker远程调试Java调试原理远程调试实践 JDWP端口RCE调试端口探测调试端口利用 总结 前言 在对一些 Java CVE 漏洞的调试分析过程中&#xff0c;少不了需要搭建漏洞环境的场景&#xff0c;但是本地 IDEA 搭建的话既麻烦&#xff08;通过 pom.xml 导入各种漏洞组…
阅读更多...
Zookeeper系统性学习-应用场景以及单机、集群安装

Zookeeper系统性学习-应用场景以及单机、集群安装

Zookeeper 是什么&#xff1f; Zookeeper 为分布式应用提供高效且可靠的分布式协调服务&#xff0c;提供了诸如统一命名服务、配置管理和分布式锁等分布式的基础服务。在解决分布式数据一致性方面&#xff0c;ZooKeeper 并没有直接采用 Paxos 算法&#xff0c;而是采用了名为 …
阅读更多...
Android Studio Gradle下载慢解决方法

Android Studio Gradle下载慢解决方法

Android Studio Gradle下载慢解决方法 最近在练习模型部署&#xff0c;主要是在手机端部署&#xff0c;所以使用到了Android Studio&#xff0c;但是在创建项目的时候&#xff0c;一致在下载gradle&#xff0c;而且网速还很慢&#xff0c;不对&#xff0c;是极慢哪种&#xff0…
阅读更多...
MQTT发布、订阅和取消订阅

MQTT发布、订阅和取消订阅

在本文中&#xff0c;我们将深入了解MQTT发布、订阅和取消订阅相关的内容。如果你刚接触发布/订阅模型&#xff0c;建议阅读本专栏之前的文章。 什么是MQTT发布消息 在MQTT中&#xff0c;一个客户端连接到代理&#xff08;broker&#xff09;之后可以立即发布消息。这些消息依…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023