vue에서 js 파일을 참조하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

vue에서 js 파일을 참조하는 방법에 대한 자세한 설명

php中世界最好的语言

풀어 주다： 2018-05-28 15:48:45

원래의

6062명이 탐색했습니다.

이번에는 vue에서 js 파일을 인용하는 방법에 대한 자세한 설명을 가져왔습니다. vue js 파일 인용 시 주의사항은 무엇인가요?

1. vue-cli webpack은 jquery를 전역적으로 도입합니다

(1) 먼저 npm install jquery --save(--save는 모듈을 프로젝트 디렉터리에 설치하고 패키지의 종속성 노드에 쓰는 것을 의미합니다. file 종속성을 입력합니다.)

(2)

  var webpack = require("webpack")

로그인 후 복사

(3) 추가

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
 jQuery: "jquery",
 $: "jquery"
 })
]

로그인 후 복사

를 module.exports 끝에 추가합니다. (4) main.js에 도입하면 괜찮습니다. (테스트 건너뛰어도 됩니다. 이 단계)

import $ from 'jquery'

로그인 후 복사

(5) 그러면 npm run dev는 페이지에서 $를 직접 사용할 수 있습니다.

2. 외부 js를 참조하는 vue 구성 요소의 방법

프로젝트 구조는 다음과 같습니다.

콘텐츠 구성 요소 코드:

<template>
 <p>
   <input ref=&#39;test&#39; id="test">
   <button @click=&#39;diyfun&#39;>Click</button>
 </p>
</template>
<script>
import {myfun} from '../js/test.js' //注意路径
export default {
 data () {
  return {
   testvalue: ''
  }
 },
 methods:{
   diyfun:function(){
     myfun();
   }
 }
}
</script>

로그인 후 복사

test.js 코드:

function myfun() {
console.log('Success')
}
export { //很关键
 myfun
}

로그인 후 복사

es6 구문을 사용합니다.

3. 단일 vue 페이지는 내부 js 메서드를 나타냅니다

(1) 먼저 npm install jquery --save(--save는 모듈을 프로젝트 디렉터리에 설치하고 종속성 노드에 쓰는 것을 의미합니다. 패키지 파일 Import dependency.)

(2) 참조해야 하는 vue 페이지에서 $를 가져온 다음 사용하세요

console.log($를 변경하면 이 그림에 노란색 경고가 표시됩니다. ) to this:

export default{
  mounted: function(){
    console.log($)
  }
}

로그인 후 복사

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!