zoukankan      html  css  js  c++  java
  • 对比下小程序语法和Vue语法异同

    对比之前了解过的Vue,方便加深 了解微信小程序语法。

    下面从几个方面介绍Vue和小程序

    一,钩子函数

    Vue只要跳转新页面就会触发钩子函数,小程序对于不同的页面跳转方式,触发的钩子是不同的。

    下面简单说几个小程序钩子函数

    onLoad  页面加载时候用,一个页面调用一次。

    onShow 页面显示,打开页面时候用,

    onReady 页面初次渲染好 时候用,

    表示页面已经准备好,可以与视图层进行交付。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

    onHide 页面隐藏时候用

    onUnload 

    当redirectTo 或navigateBack(两个切换页面函数) 时调用。

    在页面加载请求数据时,小程序和Vue类似。Vue是在created 或mounted中请求数据。

    小程序是在onload或者onshow时候请求。

    二,数据绑定

    在Vue快速入门,必备基础知识(一)提过:

    v-bind指令可以在名称后面带一个参数,中间用一个冒号隔开。这个参数通常是HTML的一个属性。例如:v-bind:class

    格式:v-bind:argument="expression"  下面用这个示范一个分页中的高亮当前页。 有这句话。

    推:

    vue动态绑定一个变量值作为元素的属性时,会在变量前加 :

    举例:

    <img  :src ="imgSrc" />
    

    小程序   绑定某个变量值作为元素属性时,用{{ }}    不加括号会被认为是字符串。

    例如:

    <image src="{{imgSrc}}"></image>

    三,列表渲染

    Vue代码

    <!DOCTYPE html>
    <html>
    <head>
        <title>钩子函数</title>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    <body>
    <ul id="example-1">
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </ul>  
    <script type="text/javascript">
    var example1 = new Vue({
          el: '#example-1',
          data: {
            items: [
              { message: 'Foo' },
              { message: 'Bar' }
            ]
          }
        })
    </script>
    </body>
    </html>

    小程序:

    Page({
      data: {
        items: [
          { message: 'Foo' },
          { message: 'Bar' }
        ]
      }
    })
    
    <text wx:for="{{items}}">{{item}}</text>

    前一篇提过:wx:for="{{items}} items是要循环的List

    四:事件处理

    vue用 v-on:event=“” 绑定事件,或者 @event=“”绑定事件

    举例:

    <button v-on:click="counter += 1">Add 1</button>
    <button v-on:click.stop="counter+=1">Add1</button>  //阻止事件冒泡

    小程序bindtap(bind+event),或者catchtap(catch+event)绑定事件:

    <button bindtap="noWork">明天不上班</button>
    <button catchtap="noWork">明天不上班</button>  //阻止事件冒泡 

     五:数据双向绑定

    vue有个双向绑定,表单元素上加上v-model,再绑定上data的一个值。当表单元素内容发生变化时,data也会发生变化。

    举例

    <div id="app">。
    <input v-model="reason" placeholder="填写理由" class='reason'/> </div> new Vue({ el: '#app', data: { reason:'' } })

    小程序没这个功能,怎么办?

    当表单元素发生变化时,会触发绑在表单上的方法,在方法上,会通过 this.setData({key:value})   会将表单值赋值给data对应的值实现双向绑定。

    <input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" />
    
    Page({
    data:{
        reason:''
    },
    bindReason(e) {
        this.setData({
          reason: e.detail.value
        })
      }
    })
    

    对于 取值:

    vue通过 this.data取值

    小程序通过this.data.reason取值。

    六:绑定事件传参  

     vue绑定事件传参比较简单,只要通过在触发事件的方法中,把需要传递的数据作为形参数传进去就好了,

    <button @click="say('明天不上班')"></button>
    
    new Vue({
      el: '#app',
      methods:{
        say(arg){
        consloe.log(arg)
        }
      }
    })

    然而在小程序不能在绑定事件里直接传参。需要将参数作为属性值,绑定到元素上的data-属性上,然后在方法中,通过e.currentTarget.dataset.*的方式获取(e.currentTarget.dataset.  会将连字符转成驼峰elementType),从而完成参数的传递。

    <view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
    Page({
    data:{
        reason:''
    },
    toApprove(e) {
        let id = e.currentTarget.dataset.id;
      }
    })
  • 相关阅读:
    创业公司技术总监,去上市公司面试,结果凉了!
    Java开发最常犯的10个错误,打死都不要犯!
    这 17 个 JVM 参数,高级 Java 必须掌握!
    推荐几个顶级的IT技术公众号,坐稳了!
    Spring Boot 面试,一个问题就干趴下了!(下)
    密码已进入"淘汰"倒计时!
    一条简单的 SQL 执行超过1000ms,纳尼?
    天天用Synchronized,底层原理是个啥?
    为什么很多程序员工作时都戴耳机?
    Java转型大数据开发全套教程,都在这儿!
  • 原文地址:https://www.cnblogs.com/yizhizhangBlog/p/9947084.html
Copyright © 2011-2022 走看看