精华内容
下载资源
问答
  • vue中使用jquery插件

    2018-08-13 11:09:00
     在main.js引入插件的样式  在页面直接使用 (2)直接将js文件引入到项目  先将js文件拷到项目  在index.html引入  <script type="text/javascript" src="/public/js/di...

     

    (1)使用npm下载安装依赖

      直接npm  install  ‘插件名称’ --save   安装依赖

      在main.js中引入插件的样式  

      在页面中直接使用

    (2)直接将js文件引入到项目中

      先将js文件拷到项目中

      在index.html中引入

        <script type="text/javascript" src="/public/js/dist/calendar.min.js"></script>
      填写路径的时候注意:
        

     

      在webpaclk.config中添加配置
      

      直接在页面中使用

     

     

    转载于:https://www.cnblogs.com/jcxfighting/p/9466915.html

    展开全文
  • 有时候在 vue 的代码中使用 jQuery 会不起作用,这是因为 vue 还没有绑定变量,所以我们使用的 jQuery 根本就找不到目标变量,就不会执行,正确的做法是先设置一个时延,稍微等一等 vue 的加载。 界面的渲染需要等 ...

    有时候在 vue 的代码中使用 jQuery 会不起作用,这是因为 vue 还没有绑定变量,所以我们使用的 jQuery 根本就找不到目标变量,就不会执行,正确的做法是先设置一个时延,稍微等一等 vue 的加载。

    界面的渲染需要等 VUE 绑定好变量后才做,我们可以使用 setTimeout 函数做一个时延:

    // 界面的渲染需要等 VUE 绑定好变量后才做: 所以加延时 100 ms
    setTimeout(function () {
      $("tr.active").trigger("click");
    }, 100);
    
    展开全文
  • vue脚手架搭建的项目,怎样使用基于jQ的插件呢? · 先安装jQuery以及用到的插件:npm i jquery jstree vue-contextmenu · 在main.js引入jstree插件:import jstree from “jstree”; · 在main.js配置:...
    • 在vue脚手架搭建的项目中,怎样使用基于jQ的插件呢?
      · 先安装jQuery以及用到的插件:npm i jquery jstree vue-contextmenu
      · 在main.js中引入jstree插件:import jstree from “jstree”;
      · 在main.js中配置:Vue.use(jstree)
      · 引入jstree所依赖的css文件:impor “jstree/dist/thems/style.css”
      · 最后在所需要的组件中,引入jQuery,然后直接使用就行了
      代码如下:
      package.json文件:
    {
      "name": "app",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build"
      },
      "dependencies": {
        "jquery": "^3.5.1",
        "jstree": "^3.3.10",
        "vue": "^2.6.11"
      },
      "devDependencies": {
        "@vue/cli-service": "~4.5.0",
        "jquery-contextmenu": "^2.9.1",
        "vue-template-compiler": "^2.6.11"
      }
    }
    

    main.js文件

    import Vue from 'vue'
    import App from './App.vue'
    import JqContext from "jquery-contextmenu";
    import jstree from "jstree"
    
    import "jquery-contextmenu/dist/jquery.contextMenu.css"
    import "jstree/dist/themes/default/style.css"
    
    Vue.use(JqContext)
    Vue.use(jstree)
    
    Vue.config.productionTip = false
    
    new Vue({
      render: function (h) { return h(App) },
    }).$mount('#app')
    
    

    app.vue组件

    <template>
      <div>
        <div id="app" ref="app"></div>
      </div>
    </template>
    
    <script>
    import $ from "jquery";
    export default {
      name: "App",
      data() {
        return {
          node: {}
        };
      },
      mounted() {
        $("#app")
          .jstree({
            core: {
              data: [
                {
                  id: "0",
                  parent: "#",
                  state: { disabled: false, opened: true, selected: false },
                  text: "张三档案"
                },
                { id: "1", parent: "#", text: "李四档案" },
                { id: "2", parent: "#", text: "王五档案" },
                { id: "3", parent: "#", text: "李六档案" },
                { id: "4", parent: "#", text: "陈七档案" }
              ],
              themes: {
                variant: "large", //加大
                ellipsis: true //文字多时省略
              },
              check_callback: true
            },
            plugins: ["wholerow", "themes"]
          })
          .on("select_node.jstree", (event, data) => {
            this.node = data.node; // 获取选中的项,并保存在data数据中
          })
          .on("changed.jstree", (event, data) => {
            this.node = data.node;
          });
        $.contextMenu({
          selector: "#app", //覆盖原来的右键选择器,并指定作用范围
          callback: (key, options) => {
            console.log(key); // 是下面items中的键:add/rename/del
            switch (key) {
              case "add":
                this.create();
                break;
              case "rename":
                this.rename();
                break;
              case "del":
                this.del();
                break;
              default:
                break;
            }
          },
          items: {
            //菜单列表配置
            add: { name: "添加" }, // 每一行的菜单配置项:name: 表示显示的文字,icon: 表示文字前的图标
            rename: { name: "重命名" },
            del: { name: "删除" }
          }
        });
      },
      methods: {
      	// 创建新节点
        create() {
          // $("#app").jstree(true): 参数为true,表示获取jstree的实例
          // $("#app").jstree(): 表示创建jstree的实例
          var ref = $("#app").jstree(true); 
          var currNode = this._getCurrNode(); // 获取当前节点node,是一个数组
          currNode = ref.create_node(currNode, {
            type: "file"
          }); // 创建新节点的node
          if (currNode) {
            ref.edit(currNode, this.node.text); // 让新节点处于编辑状态
          }
        },
        // 重命名新节点
        rename() {
          var ref = $("#app").jstree(true);
          var currNode = this._getCurrNode();
          let text = this.node.text; // 暂存需要重名名节点的原始text
          ref.rename_node(currNode); // 重命名节点
          if (currNode) {
            ref.edit(currNode, text); // 让重命名的节点处于编辑状态
          }
        },
        // 删除选中的节点
        del() {
          var ref = $("#app").jstree(true);
          var currNode = this._getCurrNode();
          ref.delete_node(currNode);
        },
        // 选中项上移
        //moveup() {
        //  var ref = $("#app").jstree(true);
        //  var currNode = this._getCurrNode();
        //  var prevNode = ref.get_prev_dom(currNode, true);
        //  ref.move_node(currNode, prevNode, "before");
        //},
        // 选中项下移
        //movedown() {
        //  var ref = $("#app").jstree(true);
        //  var currNode = this._getCurrNode();
        //  var nextNode = ref.get_next_dom(currNode, true); //返回兄弟节点的下一个节点
        //  ref.move_node(currNode, nextNode, "after");
        //},
        _getCurrNode() {
          var ref = $("#app").jstree(true),
            sel = ref.get_selected();
          console.log(sel);
          if (!sel.length) {// 若没有选中,则返回false
            return false;
          }
          sel = sel[0];
          return sel; // 把选中的第一个项的 id 返回
        }
      }
    };
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
      border: 1px solid red;
    }
    </style>
    

    github 有关于此demo的例子,分享帮助还在奋斗的前端小伙伴,当然,例子中的样式都是插件默认的,关于样式等乱七八糟的东西,可以自己修改。

    展开全文
  • I'm building a web application inside VueJS but I encounter a ... I want to use a jQuery extension (cropit to be specific) but I don't know how to instantiate/require/import it the right way with...

    I'm building a web application inside VueJS but I encounter a problem. I want to use a jQuery extension (cropit to be specific) but I don't know how to instantiate/require/import it the right way without getting errors.

    I'm using de official CLI tool and de webpack template for my App.

    I included jQuery like this in my main.js file:

    import jQuery from 'jQuery'

    window.jQuery = jQuery

    Now I'm building an image editor component where I want to instantiate crept like this:

    export default {

    ready () {

    $(document).ready(function ($) {

    $('#image-cropper-wrapper-element').cropit({ /* options */ })

    })

    },

    }

    But I keep getting errors...Now my question is how to properly instantiate jQuery and plugins via NPM/Webpack/Vue?

    Thanks in advance!

    解决方案

    Option #1: Use ProvidePlugin

    Add the ProvidePlugin to the plugins array in both build/webpack.dev.conf.js and build/webpack.prod.conf.js so that jQuery becomes globally available to all your modules:

    plugins: [

    // ...

    new webpack.ProvidePlugin({

    $: 'jquery',

    jquery: 'jquery',

    'window.jQuery': 'jquery',

    jQuery: 'jquery'

    })

    ]

    Option #2: Use Expose Loader module for webpack

    As @TremendusApps suggests in his answer, add the Expose Loader package:

    npm install expose-loader --save-dev

    Use in your entry point main.js like this:

    import 'expose?$!expose?jQuery!jquery'

    // ...

    展开全文
  • 在同一套UI,通常我们不提倡vuejquery插件结合使用,但在项目重构,我们没时间重写vue组件,想重用特定功能的jquery插件,这个时候就需要将jquery插件包装一下成vue组件。 jquery日期插件包装成一个vue组件 1...
  • 前言 今天与遇到一个令人抓狂的事情, ...不得已必须在react中使用jquery插件。 查阅了很多资料,又是修改插件又是设置全部别名。 效果都不是太好,最后无奈自己想了一种方案。 简单的令人发指,想想自己也挺蠢...
  • 我遇到了和楼主遇到了同样的问题,我是引用jquery的第三方插件jquery.mockjax.js,然后在main.js调用require('./assets/jquery.mockjax.js'),出现$此时是undefined。我是这样解决的:通过npm install的方式去安装...
  • Vue中使用jQuery,简单整理了一下~~有兴趣的同学可以下载~侧重点在.stylus-loader stylus 插件中~有时候小伙伴们会运行出错
  • 使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候。问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的...
  • vue引入jquery插件

    2017-09-11 18:05:00
    vue中使用jquery插件 1.引入jquery 第一种方法:全局引入jquery 在webpack.base.conf.js,新增以下代码 plugins: [ new webpack.optimize.CommonsChunkPlugin('common.js'), new webpack.ProvidePlugin...
  • vue中使用jquery

    2019-08-31 11:42:47
    安装jquery 依赖 cnpm install jquery --save 修改配置文件 首先添加一行代码,引入webpack,如下图所示: ...添加代码配置jQuery插件: plugins: [ new webpack.ProvidePlugin({ $: 'jquery', 'windo...
  • 怎样在Vue.js中使用jquery插件

    万次阅读 2017-03-24 14:33:13
    这个写法适用vue1.0,vue2.0方法基本一致。可参考vue2.0文档 ---------------------------------------- 原文:...使用Vue真的太棒了,但是也有可能使你头疼,当你
  • 使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候。 问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击
  • 今天小编就为大家分享一篇关于在vue项目中使用Jquery-contextmenu插件的步骤讲解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
  • 闲来无事先写一篇博客,整合一下最近网上更新的资源,在用webpack构建VUE项目时会遇到仍旧想用jquery以及依赖jQuery插件,但是引入jq会很麻烦,这里介绍一种比较简单使用的方法,使用expose-loader先简单介绍一下...
  • 前言话不多说,有时候你还是真的需要在Vue中使用某些好用的jQuery插件,这时候为了使用这个插件,犯不着全局引入jQuery,所以还要局部引入,怎么做呢?以ion-rangeslider举例我在我写的《谁说在Vue.js里不能使用...
  • 先来看下效果: <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...jQuery Pagination分页插件demo</title> <link rel...
  • vue.js中使用jQuery插件的问题 不能共享DOM,一旦vue掌握的DOM(即$.el)的控制权,他就会完全忽视jQuery对DOM的操作,   如何解决这个问题 使用component, 准确来说是特殊的component, 可以称为...
  • vue项目中使用Jquery-contextmenu插件

    千次阅读 2018-11-29 15:10:47
    使用步骤: 1、安装: npm i jquery-contextmenu --save-dev 2、在main.js文件引包 ... import Jquery_contextmenu from 'jquery-contextmenu'... Vue.use(Jquery_contextmenu) import 'jquery-contextmenu/di...
  • vue使用 jquery

    2017-12-10 13:20:17
    vue使用 jquery开发工具:vs Code ...用cnpm(推荐)或者npm 安装jquery插件 1. cnpm install jquery –save 2.在webpack.base.config.js文件加入 (1)const webpack = require(‘webpack’); (2)plugins:
  • vue.js 的数据渲染方式已经很方便和强大了,不需要使用JQuery进行这方面的操作 1.安装JQuery npm install jquery --save 2.安装成功后修改配置文件 build 文件夹下的文件webpack.base.conf.js 加入如下代码:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 405
精华内容 162
关键字:

vue中使用jquery插件

vue 订阅