Question

我对jquery的安装和使用步骤有些困惑。 jQuery已经在package.json

中

"devDependencies": {
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",

我的laravel-mix如下所示。

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

和App.js

require('./bootstrap');
require('./jquery');

window.Vue = require('vue');

Vue.component('index-content', require('./components/Index.vue').default)


const app = new Vue({
    el: '#app',
    // router
});

Index.vue

<script>

import JQuery from 'jquery';
let $ = JQuery

$("#btn").click(function(){
  $("#hello").toggle();
});

export default {

  data() {
    ...
    ...
  }
}
</script>

我不确定，我是否在这里缺少东西。另外，关于vue模板中的jQuery用法：在我的Index.vue中是否只需要在<template>之后打开另一个脚本标签并在其中编写jquery代码？还是在写作方面有所不同？因为我的jquery代码在Index.vue

中不起作用

Answer 1

默认情况下，jQuery已在bootstrap.js中加载并初始化

bootstrap.js

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

因此，您可以在Vue组件的方法中使用jQuery，包括已安装，已创建等...，但是您不能在

内部使用jQuery。

<template>
// your code is here
</template>

但是如果要在模板标记内使用jquery（$）。那么您必须在app.js中添加这些行

App.js

require('./bootstrap');

window.Vue = require('vue');

// below above code
Vue.prototype.$ = $;

然后您可以在模板标记内使用$。

例：

AnyVueComponent.vue

<template>
   <div class="container">
       <div class="test">
          <h1>Text inside of .test class</h1>
          {{ $(".test").css({
          backgroundColor: 'red'
          }) }}
        </div>
   </div>
</template>

Answer 2

您需要将其导入为app.js文件中的

String filePath = System.getProperty("user.dir")+File.separator+"KerberosConfDir";
System.out.println(filePath);
String connectionUrl = "jdbc:sqlserver://mymachine;databaseName=master;integratedSecurity=true;authenticationScheme=JavaKerberos";
Properties connProperties = new Properties();
        //connProperties.put("serverSpn","MSSQLSvc/mymachine.mydomain.com:1433");
        System.out.println("connectionUrl : "+connectionUrl);

        Connection con = null;
        System.setProperty("sun.security.krb5.debug", "true");
        System.setProperty("java.security.auth.login.config", filePath+File.separator+"SQLJDBCDriver.config");
        System.setProperty("java.security.krb5.conf", filePath+File.separator+"krb5.ini");

        try {
          Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
          System.out.println("Loading the Driver....");
          con = DriverManager.getConnection(connectionUrl);
          System.out.println("Establishing the connection....");
          DatabaseMetaData dbmd = con.getMetaData();

          System.out.println("dbmd:driver version = " + dbmd.getDriverVersion());
          System.out.println("dbmd:driver name = " + dbmd.getDriverName());
          System.out.println("db name = " + dbmd.getDatabaseProductName());
          System.out.println("db ver = " + dbmd.getDatabaseProductVersion());
        }
        catch (Exception e) {
          e.printStackTrace();
        }

Answer 3

从layouts / app.blade.php中的脚本标签中删除延迟关键字，该关键字会加载app.js

在Laravel 5.7中的vue js中使用jquery

3 个答案:

bootstrap.js

App.js

AnyVueComponent.vue