js文件如何使用vue文件中的方法

1. vue中怎么调用js方法

定义Vue全局方法。

• main.js中定义：Vue.prototype.myfunction = function() {/*你的自定义Vue方法*/}

• 子组件调用：this.myfunction();

定义Window对象全局方法。

• 在main.js中定义：window.myfunction = function() {/*你的自定义函数*/}

• 子组件调用：myfunction();

2. 我拿到一个js格式的data数据，怎么引入到vue文件中

一般请求的都是json格式的数据

例如

{
"status":200,
"message":[
{'name':'zs','age':15,'gender':'male'},
{'name':'ls','age':20,'gender':'female'},
{'name':'ww','age':25,'gender':'male'}
]
}

那你就需要发起ajax请求（按需引入axios），分为本地和外部请求(get/post, url等)。

本地json文件放在static文件夹下

created(){
this.$axios.get('static/json/getUser.json')
.then(res=>{
console.log(res.data.message)
console.log(res.data.message[0].name)//输出zs
console.log(res.data.message[1].age)//输出20
})
.catch(err=>{
console.log(err)
})
}

3. 2018-09-06 关于在vue中使用外部js，css的过程

  走访了好几个移动框架，来回切换了几次，发现都不是很适合我使用，要么是组件不够用，要么是组件无法二次封装。我在自己的项目中大多是需要使用框架之样式，所以思来想去还是用比较熟悉的mui移动框架（ 官方网址 ）。但是mui是没法使用npm进行安装的（一大遗憾），思来想去于是将mui框架所需的js,css文件放在static目录下：

在index.html中以静态资源的方式进行引用。

当然想要在组件中直接使用mui这个变量，需要在build/webpack.base.conf.js文件中进行配置

如需引用mui框架的样式只需要引入mui中的class样式

以上是我在项目中遇到问题的一些解决方案，谢谢。

4. vue中导入外链css或js

在vue中导入自定义的css文件或js文件

css文件
在main.js中导入公共的css
import '../static/css/common.css' //引入公用css

在页面中引入单独css
<style scoped>
@import '../../static/css/header.css';
</style>

Js文件

自定义js 中写：
function title(t){
alert(t);
}

export {
title //多个方法在此处json中export出去
}

页面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>
<script>
import {title} from './js/common.js' //可以选择需要的方法引入
export default {
data(){
return{
}
},
methods:{
clickme(){
title('你点我了');
}
}
}
</script>

或者

import Comjs from './js/common.js' //引入公用js
Vue.prototype.$comjs = Comjs; //添加到vue属性中

自定义js 中写：
const comjs = {

}

comjs.title = function (title) {
alert(title)
}

export default comjs;

页面中使用：
<template>
<div>
<button class="btn" @click="clickme">click me</button>
</div>
</template>

<script>
export default {
data(){
return{
}
},
methods:{
clickme(){
this.$comjs.title('你点我了');
}
}
}
</script>

5. vue文件里面怎么引用外部的js文件

• 步骤：

1. 首先。我们要改造我们要映入的外部js文件，改成下面这个格式。主要是红色方块内部代码，我们需要将我们的模块“抛出”，让人能获取到以下及相应代码：

   

6. vue引用public中的js文件

由于一些演示，需要对编码名称等可快速进行修改，需要页面方便配置。由于build后的vue项目基本已经看不出原样，因此需要创建一个文件，并在打包的时候不会进行编译。

例如config.js定义了一个变量叫config，并在index.html页面引入后，那么在页面任何一处地方都可以直接使用。
config.js：

index.html：

页面使用：

在开发环境中，我在public下创建了config.js文件，并且用export default方法进行导出。在页面使用的地方使用import config from XXX进入引入。开发过程中，没有出问题，但是在打包发布以后，发现修改config文件并不生效。

经过排查才意识到：不打包编译的js文件不识别es6语法，并且不应该使用import方法进行引入，应该按照原生的js文件进行使用。

原文地址： https://www.cnblogs.com/luoxuemei/p/11926472.html

7. web前端开之网站搭建框架之vue详解

网站搭建框架之vue

Vue是web前端快速搭建网站的框架之一。它与jQuery有所不同，是以数据驱动web界面（以操作数据改变页面，而jQuery是以操作节点来改变页面），同时，vue还实现了数据的双向绑定，可及时响应用户的输入。最主要的是vue的写法简单，容易掌握，组件形式可以大大提高工作效率。

对于vue的使用可以分为两种使用形式：1.引入vue.js文件，在js中将vue实例化；2.通过node安装第三方包--vue，搭建脚手架，用脚手架将页面分成几个组件编写，从而利用组件来搭建页面。

引入vue.js的写法

Vue分为V层（视图层）和M层（数据层），一般都是由M层的数据来驱动V层的改变。而vue的常用指令数量不多且写法简单。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入

，而v-html则会对标签进行编译，只显示标签内的内容。

至于v-show、v-if、v-else这三个指令都是通过布尔值的判断来执行的，当布尔值为真时，设置了v-show、v-if指令的标签会显示出来，当布尔值为假时，标签隐藏；而v-else与这两个指令相反。除此之外，v-show和v-if、v-else之间也有差别，v-show是改变标签的display属性来使标签显示或隐藏；而v-if、v-else是通过添加或删除节点，来显示或隐藏标签的。

V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤

而v-bind：是对html属性或自定义属性的数据驱动方式，格式为v-bind:href，可简写为：href。对于类（class）的操作是通过布尔值来判断增加或者隐藏类，同时。类和样式（style）所接受的数据类型为对象。

V-model指令的作用是将数据进行双向绑定，仅限于输入类型标签。当用户在页面输入时，数据层的数据会跟着改变。这是VM模式。由v驱动m。

除了这些普通的指令之外，还有事件指令v-on:，可简写为@+事件名，例如：@click，并将执行函数写到vue的methods中

通过脚手架来写项目的话，可用通过写组件，再将组件引入（注册）到另一个vue文件里拼接在一起，从而构建出一个页面。

（组件书写格式）

（组件整合）

（注册路由）

路由是通过vue-router来实现的，在注册路由的时候要将router实例化。不同的路由跳转不同的页面，这是搭建单页面应用的优势。

而父组件与子组件之间的通讯可以通过props将父组件的信息传递给子组件，改变子组件的内容，这样子组件的复用就不会有障碍了，而子组件传递信息给父组件或者其他组件的通讯则需vuex。

通过引入vuex并实例化一个Vuex.Store作为一个公共平台，将数据进行传输。通过vue的computed方法接收数据，通过methods方法改变数据。而这个公用平台可以实现组件与组件之间的信息传递，从而实现组件之间的交互。

通过一个星期的实战，深深的体会到了vue的优势，在构建移动端这方面的效率很高。但在搭建的过程中，还是少不了与jQuery结合，毕竟每个工具都有其优点，择其优而用是明智的选择。

8. vue 引入js文件中的方法，在html中使用报错的问题

utils/util.js

index.vue

以上用法会出现报错：Property or method "timeLength" is not defined

虽然vue组件中HTML，css，js可以在同一个页面书写，但是js里面的函数、变量是需要使用export default{ }抛出之后html才能使用的。

解决方法：
需要在methods里面再声明一下这个方法

重新定义一个方法，在这个方法里面使用它

9. js文件调用vue里methods的方法

提示：因为js里绝大部分的this指向都是window,所以不能直接this.方法() 触发
因为vue本身就是一个对象
可以直接 vue.方法()来调用