Framework7 vue中的Css选择器

Question

我尝试使用vue.js和Framework7构建Cordova / Phonegap应用程序。我发现如何使用html元素中的“v-on：click =”OnClick“属性来使用像”onClick“这样的函数.Conmield7已经在dom中实现了jquery。

但有一个问题。我如何直接访问dom，以便我可以使用jquery选择器选择整个css类。喜欢：$('.likeButton')。 ？

在官方框架7中，我发现这样的东西可以通过其功能访问dom：

this.$$ or this.Dom7

这是我已经在home.vue文件中写下的内容：

    <script>


  //import Fonts-awesome Icons
  import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
  import {} from '@fortawesome/fontawesome-free-solid'
  import F7Icon from "framework7-vue/src/components/icon";
  import F7PageContent from "framework7-vue/src/components/page-content";
  import * as Framework7 from "framework7";

  export default {
    name: 'FAExample',

    components: {
      F7PageContent,
      F7Icon,
      FontAwesomeIcon
    },
    methods: {
      clickit: function () {
        console.log("hi");

        //this is what i have tested, looking if i have access to dom
        let $$ = this.$$;
        console.log($$);
      },
      //this is what i want to use
      $('.likebutton').on('click',function () {

  })
  }


  }


</script>

你们有没有人知道这是如何运作的？我希望你能帮助我。我将vue.js与framework7结合使用。

谢谢你的帮助 ：）

Answer 1

我们可以使用所有DOM函数

this.$$('.classname)

例如，如果你想通过jquery隐藏某些东西，你可以使用：

this.$$('.classname).hide()

要检查所有DOM功能，您可以查看官方文档。 https://framework7.io/docs/dom7.html

但请确保您的DOM函数不应该在任何Window函数中。如果你得到错误来实现它，只需先制作'this'实例。

就像：var self = this; //使用此实例的全局变量

self.$$('.classname).hide()

对于任何framework7的帮助，只需在Skype上ping我：sagar dhiman 5_1

Answer 2

你尝试过使用Vue的$refs吗？您可以设置对特定DOM元素的引用，然后在Vue中访问该元素。

一个简单的例子：

<template>
  <div class="some-item" ref="itemRef">Some item</div>
</template>

然后在组件中：

var myItem = this.$refs.myItem;
// do what you want with that DOM item...

您还可以从父级访问$ refs。以下链接中的示例提供了有关详细信息。

更多关于$ refs：https://vuejs.org/v2/guide/components.html#Child-Component-Refs