这个需求是原有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```bashwindow.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应该可以做一些吧。就是另一个话题了。