uni-app基础语法

计算属性

格式：

computed:{ 
    属性名:function(){ 
        return 返回值; 
    }
 }

在computed中写上计算属性

动态菜单切换实例

事件及事件绑定

事件映射表，左侧为WEB事件，右侧为"ubi-app"对应事件

click:'tap',   //被点击
touchstart:'touchstart',   //当手指开始在元素上触屏的时候
touchmove:'touchmove', //移动的时候
touchcancel:'touchcantel',//取消的时候
touchend:'touchend',//结束的时候
tap:'tap',//点击的时候
longtap:'longtap',//长按
input:'input',//输入
change:'change',//改变
submit:'submit',//表针对于单提交
blur:'blur',//失焦
focus:'focus',//聚焦
reset:'reset',//表单重置
confirm:'confirm',//确认
columnchange:'columnchange',//字段变化
linechange:'linechange',//行变化
error:'error',//错误
scrolltoupper:'scrolltoupper',//滚动元素滚动到顶部
scrolltolower:'scrolltolower',//滚动到到最小
scroll:'scroll',//滚动的时候

注意：在input和textarea中change事件会被转为blur事件
踩坑注意：
上列表中没有原生事件也可以使用，例如map组件的regionchange（位置变化）事件直接在组件上写成@regionchange（除了小程序之外的组件中有些事件没有声明成通用组件，如果小程序有的组件，可以用@+事件名直接应用，可以根据它配套的事件去完成事件的监听动作），同时这个事件也非常特殊，它的event type有begin和end两个，导致我们无法在handleProxy中区分到底是什么事件，所以在监听此类事件的时候同时监听事件名和事件类型即

事件的监听与绑定

事件绑定@click

methods:{
    clickTest:function(e){
         console.log('click')
     },
     longtap:function(e){
         console.log('longtap')
      }
}

function(e){}:回调函数给的参数进行点击事件的识别
事件传参（动态参数演示）

    

methods:{
    clickTest:function(e){
          console.log(e.currentTarget.id)
          console.log(e.target.id)
     },
     longtap:function(e){
         console.log('longtap')
      }
}

点击绿色部分，控制台打印结果

点击蓝色部分，控制台打印结果

绿色部分使用的currentTarget，两个值一样的，被点击的元素和被绑定的事件统一都在一个元素上
currentTarget代表事件触发的元素的id
蓝色部分使用的target，target元素的id，没有阻止冒泡法
最好使用currentTarget去获取当前对象的某一个属性，利用属性实现传参的目的