Vue学习笔记二：文件引入

公用方法、样式处理

 
  1、公共样式、共用rem文件这类型的 直接在main.js中通过import的方式引入，如下： 
 

// 引入公共文件
import './assets/css/reset.css'
import './assets/js/useRem.js'

   2、共用方法，后期会在各组件中调用的函数，需要新建一个base.js的文件，放置位置与main.js同级，base.js内部,写法如下： 
 

exports.install = function (Vue, options) {
  // 提示框
  Vue.prototype.pupUp = function (title) {
    var tips = document.getElementById('tips');
    tips.innerHTML=title;
    tips.style.display = 'block';
    var timer = null;
    timer = setTimeout(function () {
      tips.style.display = 'none';
    }, 3000)
  };
};

   在main.js中引入，如下： 
 

// 引入公共函数
import base from './base'
Vue.use(base);

   在组件中使用的时候，通过 this.pupUp(' hello Jay')来调用； 
 

 
  组件中的script中的各个事件的写法 
 

 
  基本用法 
 

 
  1、 
  v-show 
  控制元素的显示隐藏，以行内样式display:block/display:''，来控制； 
 

 
       所以不能在css中设置display：none,v-show控制的元素行内的display:none/'', 如果css设置了 v-show=true时，默认行内是display:'',依旧会应用css样式 
 

 
  2、 
  v-if 
   控制的是元素的节点的删除和添加 
 

 
  3、为标签添加class类名时，可以通过  
  :class = "item.gray" 
   的方式，如本身即有class，也要这么写，不会覆盖掉class 
 

 
  4、为标签动态的添加src 可通过  
  :src = '定义的变量'  
  的方式 
 

 
  5、可以通过条件设置的方式为标签动态的添加类名或者属性，含义为当isA为true时给img增加该类名，写法如下： 
 

 
  数据处理 
 

 
  1、html中对数据的处理使用过滤器来处理  
 

 <h1>{{price | myCurrency}}</h1>

 
   在插值表达式中进行处理，前面的是要处理的数据 | 管道符分隔 后面是过滤器名称，过滤器在实例中进行声明，可以传参,可传入多个参数  
 

 
   比如  
  <h1>{{price | myCurrency（price,params2）}}</h1>

 
  2、后台返回的数据，通过v-for进行渲染  
 

 
  路由处理 
 

 
  1、页面切换的时候可以通过 
 

 this.$router.push({
          name: 'Login',
          query: { redirect: '/' }
      })

 
       如果不传递参数，则上面可以用name,也可以用path:'/路由'的方式，如果传递参数，则需要使用name不能使用path 
 

 
   传递参数可以使用query :{参数名：参数值的方式}，参数名不需要“”包裹，通过query的方式传递的参数不会在地址栏进行拼接，获取的方式  
  this.$route.query.参数名 
   获取到 
 

 
   也可以使用params：{参数名：参数值的方式}，参数名不需要“”包裹，通过params的方式传递的参数会在地址栏进行拼接，获取的方式  
  this.$route.params.参数名 
   获取到 
 

 
  2、去掉地址栏 # 的方式 
 

 
  在路由实例中添加  
  mode: 'history',  
  即可 
 

 
  3、把vue中的a标签改造成router-link 通过to 跳转到指定的组件 
 

 
  对数据监听 
 

 
  对数据的监听，例如根据实时输入的input值来判断按钮状态，可使用watch 
 

 watch: {
    // 监听手机号码改变发送验证码状态
    codePhone: {
      handler: function(val, oldval) {
        if (this.phoneReg.test(val)) {
          this.$refs.btnSend.removeAttribute('disabled')
          this.$refs.btnSend.style.background = '#d0e8d2'
          this.$refs.btnSend.style.color = '#8aa78a'
          this.$refs.btnSend.style.boxShadow = '0 0px 3px 0px #a5d4ad'
        } else {
          this.$refs.btnSend.setAttribute('disabled', 'disabled')
          this.$refs.btnSend.style.background = '#eee'
          this.$refs.btnSend.style.color = '#888'
          this.$refs.btnSend.style.boxShadow = '0 0 0 0 #fff'
        }
      },
      deep: true //对象内部的属性监听，也叫深度监听
    }
  },

Vue学习笔记二：文件引入

猜你喜欢