vue引入外部jquery
阿新 • • 發佈:2019-05-09
set san 一個空格 app alt inpu 內容 temp scrip
我們測試使用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引用成功:
vue引入外部jquery