页面局部使用vue等框架其它部分用JQuery进行交互
这个需求是原有django在网页需要定制一个人员签到信息。状态有三种,在岗,下班。好吧两种。但是你想 1,1.这是两次、共四个可能,00, 10,01,11.其中00是在家。10是在岗。01是。不签到只签退,算是异常, 11 最后和00是一样的。所以有三种状态,三个色表示,全部的人员信息。其中还有搜索之类。做成了VUE在一个单文件。需要借用信息并显示出来。
在html中有总的树状菜单。点击就让vue加载一次。vue会从接口或点到时传入window的全局变量接到数据。
具体就是一样一个流程。有利于用vue集成到原有系统中实现一个功能。
下面是普通在一直在用的点数字vuetkyc
<script >
import { ref,watch ,getCurrentInstance } from 'vue'
import { useHttp } from './http';
const count =ref(0)
const parentmsg = ref(String("dsafd"))
export default {
props: {
// 基本类型验证
msg3: {
type: String,
default: '默认标题'
},
},
mounted() {
window.msgproxg=this
},
setup() {
const users = ref([]);
const fetchUsers = async () => {
fetch('/api/'+parentmsg.value)
.then((response) => {
if (response.ok)
{
return response.json();
}
})
.then((data) => {
if (data)
console.log(data["222"]);
})
.catch((error) => {
console.error('Fetch error:', error);
});
};
watch(parentmsg, async (newValues, oldValues) => {
console.log('parentmsg changed:', newValues, oldValues);
if (newValues){
fetchUsers();
}
});
const { loading, data, error, get } = useHttp();
return {count,
parentmsg,
get,
data,
loading,
fetchUsers,
error,
changemsg() {
parentmsg.value=" 1222233333"
}
};
},
};
</script>
<template>
<h1 ref="into"></h1>
{{ msg3 }}
<div class="card">
<button type="button" ref="btn" @click="count++">count is {{ count }}</button>
<p>
{{ parentmsg }} Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
还算这样吧 in mounted
VUE2
```bash
window.msgproxg=this
VUE3
```bash
import { ref,onMounted,computed,getCurrentInstance } from 'vue';
onMounted(() => {
fetchUsers()
window.myvue=getCurrentInstance()
}
然而
https://blog.csdn.net/jieyucx/article/details/134030633
J-JQuery, 外部
V- VUE ,内部
V中有
. Element
<h1 ref="into"></h1>
J中 操作普通元素。
window.msgproxg.$refs.meme.innerHTML=“标题”
. 事件
V
<button type="button" ref="btn" @click="count++">count is {{ count }}</button>
J 中
window.msgproxg.$refs.btn.click()
上面是refs在两个例子
, 方法及监听变化
V中
watch(parentmsg, async (newValues, oldValues) => {
console.log('parentmsg changed:', newValues, oldValues);
if (newValues){
fetchUsers();
}
});
changemsg(value) {
parentmsg.value= value
}
J中,因为只接改变内部变量,暂未找到方法,所以使用changmsg。而没有只接使用,异步方法在调用。这是因为我也不明白,只接使用,会有什么不可想像的事。所以经过这一圈 watch。 function, 还有async的fecthuser
只有一行,获取参数2344的API数据
window.msgproxg.changemsg("2344")
介绍结束J-V结束。
另外V到J在控制,感觉除了window和,document应该可以做一些吧。就是另一个话题了。
原文地址:https://blog.csdn.net/wjcroom/article/details/143027272
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!