vue项目中在外部js文件中直接调用vue实例的方法比如说this
一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦。在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入。
步骤一:main.js导出vue实例
var vue = new Vue({ el: '#app', router, components: { App }, template: '<App/>' }) export default vue
步骤二、在需要使用的js中引入
import context from '../main.js' context.$router.push('/login')
补充:vue项目中引入外部css以及js文件的方法
引入css
<template></template> <style scoped> @import "../assets/common/common.css"; </style>
引入js
1,在需要的页面引入,
import '../../../static/js/jquery-1.9.1.min.js' //jq插件 import util from '../../common/js/util' //自己写的一个js文件。然后可以通过util来引用这个文件里面的函数。比如util.getTime()
2,在main.js全局引入,每个页面都可以直接使用不必在调用了
//引入echart import echarts from 'echarts' Vue.prototype.$echarts = echarts
然后需要的页面不用引入直接使用 let myChartPie = this.$echarts.init(document.getElementById('chartPie'));
总结
以上所述是小编给大家介绍的vue项目中在外部js文件中直接调用vue实例的方法比如说this,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
JavaScript箭头函数中的this详解
前言 箭头函数极大地简化了this的取值规则. 普通函数与箭头函数 普通函数指的是用function定义的函数: var hello = function () { console.log("Hello, Fundebug!"); } 箭头函数指的是用=>定义的函数: var hello = () => { console.log("Hello, Fundebug!"); } JavaScript箭头函数与普通函数不只是写法上的区别,它们还有一些微妙的不
-
JavaScript this绑定过程深入详解
本文实例形式详细分析了JavaScript this绑定过程.分享给大家供大家参考,具体如下: 在理解this 的绑定过程之前,首先要理解调用位置:调用位置就是函数在代码中被调用的位置(而不是声明的位置).只有仔细分析调用位置才能回答这个问题:这个this 到底引用的是什么?通常来说,寻找调用位置就是寻找"函数被调用的位置",但是做起来并没有这么简单,因为某些编程模式可能会隐藏真正的调用位置.最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数).我们关心的调用位置就在当前
-
javascript的this关键字详解
this 的定义 表示当前执行代码的环境对象 因此可将 this 的剖析分为"全局环境" 和 "函数环境" 两种类型的环境对象 全局环境 console.log(this === window); // true var a = 10; console.log(this.a); // 10 函数环境 在函数内部,this 的取值取决于函数被调用时的运行环境. 这里涉及到内存里的数据结构相关的知识点,当我们定义以下字面量对象时会发生一系列的关联关系 var obj =
-
JavaScript中this用法学习笔记
JavaScript这门语言中,最令人迷惑的地方有三个,闭包.this.原型.针对大多数人,可以利用词法作用域等避开this的坑,但是我们不能一直生活在舒适区,要敢于打破砂锅问到底,对我们来说也是一种提升. 一.一般对this关键字的误解: 1.this指向函数自身 2.this指向函数词法作用域 我们可以看以下一段代码: function test() { test.a = 1; this.a = 2; console.log(test.a); console.log(this.a); con
-
JavaScript中this的全面解析及常见实例
前言 this 关键字在 Javascript 中非常常见,但是很多开发者很难说清它到底指向什么.大部分人会从字面意思上去理解 this,认为 this 指向函数自身,实际上this 是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调 用时的各种条件.this 的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式. 总结: 函数被调用时发生 this 绑定,this 指向什么完全取决于函数在哪里被调用. 一.this 的绑定规则 this 一共有 4 中绑定规则,接下来一一介
-
详解JavaScript中关于this指向的4种情况
对很多前端开发者来说,JavaScript语言的this指向是一个令人头疼的问题.先看下面这道测试题,如果你能实现并解释原因,那本文对你来说价值不大,可以直接略过. **开篇测试题:**尝试实现注释部分的Javascript代码,可在其他任何地方添加更多代码(如不能实现,说明一下不能实现的原因): let Obj = function (msg) { this.msg = msg this.shout = function () { alert(this.msg) } this.waitAndS
-
JS匿名函数内部this指向问题详析
前言 网上看到一句话,匿名函数的执行是具有全局性的,那怎么具有的全局性呢? this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 1.案例中,第一个say打出来的是Alan,而第二个则是window var name = 'window' var person = { name :'Alan', sayOne:function () { console.log(this.name) }, sayTwo:functi
-
Javascript的this详解
在理解javascript的this之前,首先先了解一下作用域. 作用域分为两种: 1.词法作用域:引擎在当前作用域或者嵌套的子作用域查找具有名称标识符的变量.(引擎如何查找和在哪查找.定义过程发生在代码书写阶段) 2.动态作用域:在运行时被动态确定的作用域. 词法作用域和动态作用域的区别是:词法作用域是在写代码或定义时确定的:动态作用域是在运行时确定的. this的绑定规则 this是在调用时被绑定,取决于函数的调用位置.由此可以知道,一般情况下(非严格模式下),this都会根据函数调用(调用
-
vue项目中在外部js文件中直接调用vue实例的方法比如说this
一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app
-
在html中引入外部js文件,并调用带参函数的方法
在html中引入外部js文件,并调用js文件中的带参函数 1 项目结构 2 编写a.js.test.html //a.js function abc(str){ alert(str); } //test.html <html> <head> <script type="text/javascript" src="a.js"></script> <script type="text/javascript&
-
vue组件内部引入外部js文件的方法
之所以要做这个是因为,在一个组件内部需要引入一个js文件来定位.如果放在index.html,这样每个组件都会有这个js.所以需要在组件内单独引入. 第一种操作 Dom引入js: export default { mounted() { const s = document.createElement('script'); s.type = 'text/javascript'; s.src = '你的需要的js文件地址'; document.body.appendChild(s); }, } 第
-
如何在JS文件中获取Vue组件
1. 背景 最近在写项目时候遇到这样一个需求: 我封装了一个js文件 utils.js,然后在组件 my-component.vue 中引用了该js文件. 在 utils.js 文件中有一些函数,需要操作 my-component.vue 中的 data 和 methods. 为了方便理解,上述 js 文件和组件名非实际工程中的名字,仅是示例. 2. 思路 通过调用函数把 组件实例 this 传递到 被应用的 js 文件 里. 3. 目录结构 src/ ├── App.vue ├── asset
-
vue中的vendor.js文件过大问题及解决
目录 vue vendor.js文件过大问题 1. cdn 引入 2. 在使用vue等包的地方,注释掉import引入 3. 打包忽视掉vue等包 vue打包降低vendors.js文件大小 vue打包项目优化 vue vendor.js文件过大问题 1. cdn 引入 index.html中cdn的方式引入vue.vuex.axios.element-ui.vue-router等包,代码如下: <script src="https://cdn.bootcdn.net/ajax/libs/
-
从外部的js文件中获取ASPX页面的控件ClientID
前言 当使用MasterPage.UserControl等容器时,为了避免控件的重复命名,asp.net会自动将容器中的控件生成一个ClientID(Control Tree中的可生成,否则不会生成). 例如:ContentPlaceHolder1中的Button1默认情况下会生成"ctl00_ContentPlaceHolder1_Button1"的ClientID. 我们在Render出来的mark up中看到的也是这些ClientID.所以,当我们使用JavaScript对控件元
-
vue在.js文件中引入store和router问题
目录 在.js文件中引入store和router 在js文件中使用vue的router和store 总结 在.js文件中引入store和router 在js文件中使用vue的router和store 在js文件中引入vue的路由配置文件 或者 store文件 import store from '../store'; import router from '../router'; //直接使用即可 router.push({'path': '/'}) store.state.XXX; 总结 以
-
vue.js引入外部CSS样式和外部JS文件的方法
学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径 使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/
-
nginx 部署 vue 项目找不到js css文件的解决方法
很多时候 npm run build 之后, index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对,发布到服务器上之后,nginx 找不到文件. vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index.html 中 的所有文件添加一个 baseUrl. 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容: ... module.exports = { baseUrl: isProd ? '/
-
nuxt 实现在其它js文件中使用store的方式
前言 在新建的js文件中想用store里面的数据,比如token想在封装的axios里面,请求头里面去使用,亦或者通过app的JS接口获取token并存储在store里面. 我们都知道如何在vue中如何使用. 代码 /* * @Description: * @Author: lxc * @Date: 2019-07-02 16:14:07 * @LastEditTime: 2019-08-14 16:08:19 * @LastEditors: lxc */ // 导出 store 的地方 imp
随机推荐
- javascript 循环调用示例介绍
- GO语言求100以内的素数
- 跟我学Nodejs(一)--- Node.js简介及安装开发环境
- 正则表达式regular expression详述(一)
- apache zookeeper使用方法实例详解
- python脚本实现xls(xlsx)转成csv
- ASP.NET实现推送文件到浏览器的方法
- Android简易音乐播放器实现代码
- php数据库抽象层 PDO
- 基于PHP 面向对象之成员方法详解
- 一键关闭服务器危险端口BAT文件安防篇[端口介绍]
- C语言矩阵连乘 (动态规划)详解
- bootstrap手风琴制作方法详解
- 深入探密Javascript数组方法
- 基于PHP的加载类操作以及其他两种魔术方法的应用实例
- php实现读取超大文件的方法
- php实现的CSS更新类实例
- C#中ZipHelper 压缩和解压帮助类
- 详解Android中实现ListView左右滑动删除条目的方法
- Yii2下session跨域名共存的解决方案