Framework7 Vue+Cordova开发：如何用jQuery选择器直接访问DOM？

嘿，我来帮你搞定这个问题！在Framework7集成了jQuery的情况下，你有几种靠谱的方式来用类选择器访问DOM元素，同时还能兼顾Vue的特性：

1. 用Framework7原生的$$选择器（最推荐） #

Framework7本身封装了一套和jQuery语法几乎一致的DOM操作工具，全局可用的$$函数就是干这个的，和你熟悉的$用法完全一样，而且和Framework7的生态兼容更好，不会有奇怪的冲突。

比如你要选中所有.likeButton元素：

// 在Vue的方法或生命周期钩子中使用
methods: {
  updateLikeButtons() {
    // 选中所有likeButton元素
    const likeButtons = $$('.likeButton');
    // 比如给它们加个激活类
    likeButtons.addClass('btn-active');
    // 绑定点击事件也可以
    likeButtons.on('click', function() {
      $$(this).toggleClass('liked');
    });
  }
}

如果是在Framework7 Vue组件里，也可以用this.$f7.$$来调用，更符合组件化的规范。

2. 直接使用jQuery（如果确认已集成） #

既然Framework7已经把jQuery挂载到DOM里了，你直接用$('.likeButton')就行，但要注意时机问题：必须等Vue的虚拟DOM渲染完成后再调用，不然会选不到元素。

比如在Vue的mounted钩子（DOM已挂载）或者updated钩子（DOM更新后）里使用：

mounted() {
  // 此时页面DOM已经渲染完毕
  const likeButtons = $('.likeButton');
  likeButtons.click(function() {
    $(this).addClass('liked');
  });
}

⚠️ 小提醒：尽量少在Vue项目里直接操作DOM，因为Vue的虚拟DOM会管理页面状态，直接操作可能导致Vue的数据和实际DOM不一致。如果只是绑定事件，优先用Vue的v-on:click会更稳妥。

3. 用Vue的ref（最Vue化的方式） #

如果不想依赖jQuery或Framework7的选择器，更符合Vue最佳实践的方式是用ref来标记元素，然后通过this.$refs访问：

<!-- 在Vue模板里给元素加ref -->
<button class="likeButton" ref="likeBtn">点赞</button>
<!-- 如果是多个元素，可以用数组收集ref -->
<button 
  v-for="(btn, index) in buttonList" 
  :key="index"
  class="likeButton"
  :ref="el => { if(el) this.likeButtons.push(el) }"
>
  点赞 {{ index + 1 }}
</button>

export default {
  data() {
    return {
      likeButtons: []
    }
  },
  methods: {
    handleLike() {
      // 访问单个ref元素
      this.$refs.likeBtn.classList.add('liked');
      // 访问多个ref元素
      this.likeButtons.forEach(btn => {
        btn.classList.add('btn-active');
      });
    }
  }
}

这种方式完全基于Vue的生态，不需要额外依赖，状态也更可控。

内容的提问来源于stack exchange，提问作者H.Wesche