在vue中使用jquery

首先默认你已经有了一个vue程序,如果你想在vue中使用jquery,那么请继续阅读。

当然,加入你没有一个vue程序,这里也给出创建一个vue程序的命令。当然,你肯定装了vue-cli,不然你不会点进这篇博客

vue init webpack vue-demo01

项目的目录类似如下:

对了,这个demo里使用了element-ui
安装方式:

npm i element-ui -S

配置方式:

可以直接拷走

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
jquery安装

直接运行下面的命令

npm run jquery
jquery引用

在需要使用jquery的组件里,引入jquery后,即可正常使用

  import $ from 'jquery'
举例

HelloWorld.vue

<template>
  <div>
    <el-tree :data="list" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
  </div>
</template>

<script>
  import $ from 'jquery'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        list:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    mounted() {
      this.getList()
    }, methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      getList() {
        var _this = this
        $.getJSON("../static/list.json", function (data) {
          _this.list = data
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

list.json

[{
  "label": "一级 1",
  "children": [{
    "label": "二级 1-1",
    "children": [{
      "label": "三级 1-1-1"
    }]
  }]
}, {
  "label": "一级 2",
  "children": [{
    "label": "二级 2-1",
    "children": [{
      "label": "三级 2-1-1"
    }]
  }, {
    "label": "二级 2-2",
    "children": [{
      "label": "三级 2-2-1"
    }]
  }]
}, {
  "label": "一级 3",
  "children": [{
    "label": "二级 3-1",
    "children": [{
      "label": "三级 3-1-1"
    }]
  }, {
    "label": "二级 3-2",
    "children": [{
      "label": "三级 3-2-1"
    }]
  }]
}]

运行效果:

如果需要源码,在下面下载

下载地址:vue-demo01

==如果这篇博客对你有用,点个赞再走呗~==

原文地址:https://www.cnblogs.com/lauyon/p/12248662.html

时间: 2024-10-29 07:24:29

在vue中使用jquery的相关文章

vue 中使用jquery

1.安装jquery npm install jquery --save 2.配置 webpack 找到  build/webpack.base.conf.js  文件. 在开头  添加 var webpack = require('webpack') // 原有代码 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } }, /

Vue中引入jquery方法 vue-cli webpack 引入jquery

在vue-cli 生成的工程中引入了jquery(模板用的webpack) 首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后npm install或者用npm install --registry=http://registry.npm.taobao.org安装的会更快一点 在webpack.base.conf.js里加入 var webpack = require("webpack")

vue中使用jquery插件

(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.c

在Vue.js中引入jQuery的方法:

步骤一:首先先下载jQuery包 cnpm i jquery -D // 下载 jQuery包 步骤二:在webpack.config.js中配置jquery插件 步骤三:在要使用jQuery的组件页面引入jQuery import $ from 'jquery' //引入jquery

Vue中如何使用axios发送jsonp跨域验证

https://cnodejs.org/topic/5930430f03dba3510d8a62c6 在使用axios发送请求时,服务器端设置 res.header("Access-Control-Allow-Origin", "*");可以正确得到结果 当服务器端不设置允许跨域时,使用jsonp方式发送就不行了,提示错误如下 XMLHttpRequest cannot load http://localhost:3000/axios?cb=cb. No 'Acce

Vue.js比jQuery更好学

大家普遍认为,对于新手web程序员来说,jQuery被认为是一个好的入门点,甚至于很多程序员都是先学jQuery,再学原生Javascript. 为什么呢?首先是因为jQuery非常流行,但更重要的是,有经验的程序员都认为jQuery十分简单,推己及人,对于新手来说当然也应该是非常简单的,然而这并不正确. jQuery简洁,但不简单. jQuery绝对可以帮你处理掉很多老浏览器的麻烦事(译者注:比如各种兼容性问题),但对于简化DOM API操作和封装Javascript变化而言,它就帮不上什么忙

vue中监听window.resize的变化

我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也真的让人有种想要发狂的感觉.但是还好,最后在不断的查资料和尝试当中.实现了想要的效果,仅供参考: 首先我这里实现的效果是切换echart图形,然后在window.resize过程中想要实现自适应窗口大小的变化. 这里的两个button分别是控制两个路由切换,也就是两个echart图形(柱状图和饼图)

在vue中使用jq或者第三方插件

1.安装jQuery npm i jquery -S 2.修改webpack的配置文件 文件目录及名称:build/webpack.base.conf.js 注释代码为修改部分 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf

如何在vue中使用ts

注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马