Vue.jsのセレクターはあるのでしょうか？

jqueryはVue.jsに置き換えられると色んな場所で見かけます。
（早い話がjqueryはオワコンだと）

場合によっては置き換えも可能かもしれませんが、それぞれの目的や内容が異なりますので、本来同列に考える事に無理がある気がします。

例えば、jqueryは素のjavascriptよりもセレクターが優れており、短い記述で直感的に対象物を選択出来ると思いますが、jqueryなしでVue.jsで同じ様な事が出来るのでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

対象のDOMを取得するということでしたら、refを使用することで取得が可能です。

例えば、jQueryでは下記のような書き方で、DOMを取得するかと思います。

<div id='test' />

console.log($('#test')) -> id='test'を取得

これをVueに書き直すと下記のようになります。

vue
1<template>
2  <div ref='test' />
3</template>
4
5<script>
6  mounted () {
7    console.log(this.$refs.test) -> ref='test'を指定したdivの要素が取得できる
8  }
9</script>

投稿2020/10/13 13:13

編集2020/10/14 09:42

stakizawa

総合スコア117

teratailmacr2

2020/10/14 08:14

ご回答ありがとうございます。なるほど、「<input type="text" name="age" ref="age" value="20">」も「this.$refs.age.value」とする事で値が取得出来るのですね。ただこれだとjqueryで言うところの$('#age')と同等だと思いますが、#age直下のliの三番目とかそう言った取得方法も可能なのでしょうか？

stakizawa

2020/10/14 09:53

> なるほど、「<input type="text" name="age" ref="age" value="20">」も「this.$refs.age.value」とする事で値が取得出来るのですね。もちろん可能です。ただ上記の例の<input>の場合、Vue.jsではv-modelというディレクティブを使用して、dataと紐づける方法の方がいいかと思います。具体的には、下記のようなコードになります。 <input v-model='test' /> // vue data: () => ({ test: '' <- このプロパティとv-modelがリンクする }) こうすることで、ユーザーがinputに対して、入力した際にtestプロパティに値が入ります。これは、入力するたびに動的におきかわります。 // testプロパティへのアクセス console.log(this.test) -> ユーザーが入力した値 > ただこれだとjqueryで言うところの$('#age')と同等だと思いますが、#age直下のliの三番目とかそう言った取得方法も可能なのでしょうか？これに関しては、v-forを使用した場合には、アクセス可能になります。 (もしかしたら、別でやり方はあるかもしれませんが...) 長くなってしまうので、ここでの解説は控えさせていただきます。また、個人的な意見になってしまい申し訳ないのですが、基本的にVue.jsで直接DOMを参照する機会はほとんどないかと思います。

teratailmacr2

2020/10/16 01:43

遅くなりましたがご回答ありがとうございます。なるほど、予め必要なエレメントの値をモデル化しておくと取得出来ると言う事ですね。 jqeuryの様に動的に作り出されたものに対して、値が何であったら、action1、違えばaction2みたな事をしたい場合、やはりvue.jsの範疇ではない為対応は難しいのでしょうか？その様な事がしたい場合は、やはりjqueryを使った方が良いのでしょうか？

stakizawa

2020/10/16 02:10

> jqeuryの様に動的に作り出されたものに対して、すいません。jqueryで動的に作り出されたものというのは、具体的にどのようなものでしょうか？ DOMの作成・削除のことを指していますかね？？ > 値が何であったら、action1、違えばaction2みたな事をしたい場合、やはりvue.jsの範疇ではない為対応は難しいのでしょうか？値の変更を監視するには、watchというものを使用することが出来ますね。 (データのモデル化は必要ですが...) watchでは、変更前と変更後の値を取得できるので、それを元に処理をすることも可能です。 teratailmacr2さんの望んでいる回答が出来ているか不安ではありますが...

teratailmacr2

2020/10/17 04:10

ご回答ありがとうございます。 > DOMの作成・削除のことを指していますかね？？そうです。例えば、createElementで<input type="text">を3つ作ったとして、この3つに入力された数値の合計が15を超えていれば4つめ以上を作らせず、超えていなければ4つめ以上も作成可能としたい場合等、入力欄を動的に生成しているので、Model化が出来ない(？)場合はjqueryでしか対応出来ないでしょうか？ stakizawaさんのご回答は質問に対して的確なご回答をいただけております。お手数ですが、引き続きご教示いただけましたら幸いです。

行動規範の内容に同意します