vue引入外部jquery

我们测试使用App.vue页面

一.先把js文件放到项目中

二.引入jquery文件

在<script>...</script>代码段中引入,放置在头部(注意import后面有一个空格)
import ‘../utils/niuniu/jquery-1.6.4.min.js‘

注意,如果不加 /* eslint-disable*/ ,那么在开启ESLint时,会报以下错误信息,加上则可以免除验证

三.编写文件,测试jquery

文件完整信息如下
<template>
  <div id="app">
    <img src="./assets/logo.png"><br/>
    <input type="text" name="user" id="user" value="888" /><br/>
    <span id="msg"></span>
    <!-- <router-view/> -->
  </div>
</template>

<script>
/* eslint-disable*/
import ‘../utils/niuniu/jquery-1.6.4.min.js‘
import { Script } from ‘vm‘;
export default {
  name: ‘App‘,
  created () {
    console.log($(‘#user‘))
  }
}

$(function() {
  // 绑定jquery处理事件
  $(‘#user‘).click(function () {
    $(‘#msg‘).html(‘文本框里的内容是:‘ + this.value)
  })
})
</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;
}
</style>

查看效果,出现以下效果,说明jquery引用成功:

原文地址:https://blog.51cto.com/1197822/2391864

时间: 2024-11-10 17:42:57

vue引入外部jquery的相关文章

Vue style里面使用@import引入外部css, 作用域是全局的解决方案

问题描述 使用@import引入外部css,作用域却是全局的 <template> </template> <script> export default { name: "user" }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> @import &q

vue导入外部js

1.在项目的入口文件中(app.js)定义remoteScript标签 Vue.component('remote-script', { render: function (createElement) { var self = this; return createElement('script', { attrs: { type: 'text/javascript', src: this.src }, on: { load: function (event) { self.$emit('lo

【html】【2】html引入外部文件js css

1>引入js 我们只是写了简单必须的html标签,从未给标签添加点击事件,这次页面添加事件. >写入html页面,可以在<head>标签内  也可以在<body>标签内 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>小娜娜</title> 5 <script type="text/javascript"> 6 document.writ

vue安装openlayers,jquery,bootstrap,

安装 安装openlayers安装指定包安装openlayersVUE中的地图import ol from "openlayers";import "openlayers/dist/ol.css"; cnpm install openlayers --save 安装jquery cnpm install jquery --saveimport $ from 'jquery' 安装 bootstrapnpm install bootstrap --save-dev /

在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

&lt;link&gt;和@import url()引入外部css文件的区别

<link>和@import url()引入外部css文件的区别:标题中的两种方式都可以引入外部css文件,关于它们的基本用法这里就不多介绍了,具体可以参阅相关阅读.相关阅读:(1).<link>标签可以参阅HTML的<link>标签一章节.(2)[email protected] url()可以参阅css的@import url用法简单介绍一章节.下面介绍一下这两者的比较明显的区别.(1).加载机制不同,link方式是首先加载完css文件,然后再加载页面,而@impo

XML配置中 引入外部property文件

新建properties配置文件 内容如下: jdbc.driverClassName=com.mysql.jdbc.Driver jdbc.url=jdbc\:mysql\://localhost\:3306/book_mybatis?user\=root&password\=root&useUnicode\=true&characterEncoding\=UTF-8 有两个属性, ①jdbc.dirverClassName ; ②jdbc.url. <!-- 导入属性配置

Vue.js比jQuery更好学

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

jsp、css中引入外部资源相对路径的问题

在jsp页面中添加base,可用相对路径: <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> 然后在<head>标签内添加base <base