为了账号安全,请及时绑定邮箱和手机立即绑定

请教一下vue怎么导入自己写的js文件?

/ 猿问

请教一下vue怎么导入自己写的js文件?

vue怎么导入自己写的js文件


查看完整描述

3 回答

?
料青山看我应如是

1. 首先我们要改变我们要映入的外部js文件,改成以下这个格式。

代码:<pre class="html">function realconsole(){ alert("hello.thanks use me"); } export { realconsole } </pre>

2. 到我们的寄主那里,我们需要导入仿造的文件,方法是这样的:

代码:<pre class="html">&lt;template&gt; &lt;div class="teslist"&gt; &lt;button @click="methods1"&gt;显示console&lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;script src="../../lib/myconsole.js"&gt;&lt;/script&gt; &lt;script&gt; import { realconsole } from '../../lib/myconsole.js' export default { methods:{methods1:function(){ realconsole(); } }} &lt;/script&gt; &lt;style&gt; .teslist { } &lt;/style&gt;</pre>

注意红色叉的部分,那是我们es5的写法,绿色才是正确的,下面是效果图

 


查看完整回答
反对 回复 2019-11-17
?
慕姐8265434

 1.在components 目录下新建一个validate.js:
  export default{
  install(Vue){
  Vue.prototype.$myName = "zhagngsan";
  }
  }
  这就是我们的插件,定义了一个属性
  2.入口文件jssrc/index.js 加入:
  // 引入
  import validate from "./../components/validate";
  // 使用
  Vue.use(validate);
  3.我们到user-username.vue 组件下验证一下:
  mounted(){
  alert(this.$myName);
  },
  浏览器访问登录页面,成功弹出:
  这里写图片描述
  4.刚刚我们已经学会插件里定义属性,马上来学一下如何定义方法:
  export default{
  install(Vue){
  // Vue.prototype.$myName = "zhagngsan";
  Vue.prototype.checkUserName = (value) => {
  if(/\w{6,20}/.test(value)){
  return true;
  }else{
  return false;
  }
  }
  }
  }
  同样可以使用该方法:
  if(this.checkUserName("hello")){
  alert("ok");
  }else{
  alert("error");
  }
  5.
  这里写图片描述
  我们修改user-name.vue 组件,来实现文本框验证:
  <template>
  <div class="form-group">
  <label class="col-sm-2 control-label">用户名</label>
  <div class="col-sm-10">
  <input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
  <label class="label label-danger" v-if="showErrorLabel">用户不合法</label>
  </div>
  </div>
  </template>
  <script>
  export default{
  props:["placeholder"],
  data:function () {
  return {
  username:"",
  showErrorLabel:false,
  }
  },
  methods:{
  userNameChange(){
  // 用户名改变的方法里判断 用户名是否复合要求
  if(this.checkUserName(this.username)){
  this.showErrorLabel = false; // 如果验证没有通过就显示错误提示
  }else{
  this.showErrorLabel = true;
  }
  // 调用父组件的方法
  this.$emit("childChange","username",this.username)
  }
  }
  }
  </script>
  这里写图片描述
  自定义指令
  文档:https://vuefe.cn/guide/custom-directive.html
  1、validate.js:
  export default{
  install(Vue){
  // Vue.prototype.$myName = "zhagngsan";
  Vue.prototype.checkUserName = (value) => {
  if(value == ""){
  return true; // 如果没有填写,默认为true
  }
  if(/\w{6,20}/.test(value)){
  return true;
  }else{
  return false;
  }
  }
  Vue.directive("uname",{
  bind(){
  console.log("bind"); // 只会调用一次
  },
  update(el,binding,vnode){
  console.log(el);
  console.log(binding);
  console.log(vnode);
  },
  })
  }
  }
  2、我们自定了一个uname 指令,下面来看一下如何使用的?
  <input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
  我们在组件的模板里使用了 v-uname ,并且给绑定了”username”数据。
  我们打开浏览器的控制台:
  这里写图片描述
  说明我们定义的指令里,这个方法执行了:
  bind(){
  console.log("bind"); // 只会调用一次
  },
  3、下面我们来看一下update 里的东东
  update(el,binding,vnode){
  console.log(el);
  console.log(binding);
  console.log(vnode);
  }



查看完整回答
反对 回复 2019-11-17
?
HUWWW

这里的组件化开发是使用什么??
vue-loader么...
如果是vue-loader可以通过 require来引入就可以
比如Js文件写到assets/js中
在main.js中可以 require('./src/assets/xxx.js')
如果只是单页面html,可以直接引入就行了<script src="xxxx.js">

查看完整回答
反对 回复 2019-11-17

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信