Vue入门系列:二十 Vue中使用Jquery
骚年 2020-11-25 23:35:09
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./asset/jquery.min.js"></script> <script src="./asset/vue.js"></script> <title>Vuejs</title></head><body> <div id="app"> <div id="#app"> {{ msg }} </div> </div> </body><script> var app=new Vue({ el:'#app', data:{ msg:'大家好,我是张无忌' }, methods:{ }, mounted(){ let app_dom = $('#app').text(); console.log('app_dom',app_dom); $('#app').text('大家好,我是张三丰'); } })</script></html>



Vue入门系列:二十 Vue中使用Jquery


页面输出


Vue入门系列:二十 Vue中使用Jquery


控制台输出


Vue入门系列:二十 Vue中使用Jquery


解析
  • 我们利用了vue的声明周期函数mounted方法
  • 在页面挂载的时候,我们利用jquery可以获取到div(#app)原始的内容是"大家好,我叫张无忌"
  • 随后又利用jquery将内容变更为"大家好,我叫张三丰"
  • 所以jquery可以在vue里面使用
版权声明
本文为[骚年]所创,转载请带上原文链接,感谢
https://www.seoxiehui.cn/article-267433-1.html
相似文章

2021-08-09