Je suis un peu confus au sujet des étapes d'installation et d'utilisation de jquery. Jquery est déjà dans package.json
<script>
import JQuery from 'jquery';
let $ = JQuery
$("#btn").click(function(){
$("#hello").toggle();
});
export default {
data() {
...
...
}
}
</script>
Et mon laravel-mix ressemble à ci-dessous.
require('./bootstrap');
require('./jquery');
window.Vue = require('vue');
Vue.component('index-content', require('./components/Index.vue').default)
const app = new Vue({
el: '#app',
// router
});
Et App.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Index.vue
"devDependencies": {
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
Je ne suis pas sûr, est-ce que je manque quelque chose ici ou pas. De plus à propos de l'utilisation de Jquery dans le modèle vue: dans mon Index.vue , ai-je juste besoin d'ouvrir une autre balise de script après et d'y écrire du code jquery? ou en vue l'écriture est différente? Parce que mon code jquery ne fonctionne pas dans Index.vue
3 Réponses :
Vous devez l'importer dans le fichier app.js en tant que
window.$ = require('jquery')
window.JQuery = require('jquery')
et c'est qu'en est-il de l'utilisation dans le modèle? Je veux dire, dois-je ouvrir une deuxième balise de script ou ...?
par défaut jQuery déjà chargé et initialisé dans bootstrap.js
<template>
<div class="container">
<div class="test">
<h1>Text inside of .test class</h1>
{{ $(".test").css({
backgroundColor: 'red'
}) }}
</div>
</div>
</template>
Vous pouvez donc utiliser jQuery dans les méthodes du composant Vue, montées, créées, etc. ... mais vous ne pouvez pas utiliser ceci dans
require('./bootstrap');
window.Vue = require('vue');
// below above code
Vue.prototype.$ = $;
mais si vous voulez utiliser jquery ($) dans la balise template. alors vous devez ajouter ces lignes dans app.js
<template> // your code is here </template>
Ensuite, vous pouvez utiliser $ à l'intérieur de la balise template.
Exemple:
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
supprimer le mot-clé defer de votre balise de script dans layouts / app.blade.php qui charge app.js
Pourquoi essayez-vous d'utiliser jquery avec vue? Ils ne se mélangent pas bien et vous ne devriez pas utiliser jquery avec vue. Votre exemple avec basculement doit être réécrit en utilisant vue, pas en entassant de mauvais éléments jquery dans le bloc