zoukankan      html  css  js  c++  java
  • 移动端 | Vue.js对比微信小程序基础语法

    (1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性

    (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</div>, 绑定属性的话应v-bind:id="abb" 不需要{{}};
    而小程序可以<image src="{{url}}" /><div wx:for="{{arr}}" wx:for-item="item" wx:for-index="index wx:key="index"></div>
    (3)计算属性 computed:{} VS 方法 methods:{}
    计算属性是基于他们的依赖(响应式依赖)进行缓存的,只有以来发生改变才会重新求值,如果以来不变,多次访问会立即返回之前的计算结果,而不执行函数;而方法:每次重新访问/渲染时,方法总会在此执行;
    (4)vue的 watch:{}, 侦听 data 中的状态发生变化时,执行的操作;
    使用场景: 当需要在数据变化时,执行异步或者开销较大的操作时,使用watch
    eg:
    data:{abb: ''}
    watch: {
    abb: function (newvalue, oldvalue) {

    }
    }
    (5)class 与 style的绑定
    1、 vue 为 v-bind:class="" 做了增强
    对象语法:
    data: {
    classObject: {
    booleanb: true,
    booleanc: false
    }
    }
    v-bind:class="{classa: booleanb, 'classb': booleanc}" -> class="classa"
    v-bind:class="classObject" -> class="classa"
    数组语法:
    data: {
    isActive: false,
    activeClass: 'active',
    errorClass: 'text-danger'
    }
    v-bind:class="[activeClass, errorClass]" -> <div class="active text-danger"></div>
    v-bind:class="[isActive ? activeClass : ''], errorClass" -> class="text-danger"
    v-bind:class="[{classa: booleada}, classb]"
    2、v-bind:style=""
    data: {
    activeColor: 'red',
    fontSize: 30
    }
    v-bind:style="{color: activeColor, fontSize: fontSize + 'px'}"
    v-bind:style="[baseStyles, overridingStyles]" // 将多个样式对象绑定到同一个元素上
    (6)v-if="abb" // v-if 时惰性的,如果开始为false,则不会渲染;每次切换内部都销毁重建;v-for优先级比v-if高
    v-if="abb === 'uiui"
    <template v-if="abb"></template>
    v-show="" // 始终都会渲染到DOM! 只是切换 display 属性;不支持《template》 不支持v-else
    (7)v-for=""
    小程序 wx:for="{{arr}}" wx:for-item="item" wx:for-index="index" wx:key="index"
    微信 v-for="(item, index) in items" :key="item" item in items 的特殊语法; items - 源数据数组。 item - 数组元素迭代的别名
    微信 <li v-for=“(value, key, index) in object” ></li> v-for 通过对象的属性来迭代

    (8) 数组更新检测
    「变异方法:会改拜年原始数组」
    var abb = [1,2,3,4,5]
    unshift()前边添加 push() 后边添加
    --------------------------------------------
    shift()前边删减 pop() 后边删减

    sort() 排序
    reverse() 颠倒
    splice(index, howmany, item1, item, ..... itemX)
    从数组中删除、添加项目, 且改变原来的数组;返回被删除的项;
    index 开刀位置;
    howmany 往后切几个;
    item。。 往里添加几个
    「非变异方法: 不会改变原始数组,但是总会返回一个新的数组;」
    filter()
    concat()
    slice()
    「注意:」
    由于JS的限制,vue 不能检测到以下数组的变动:
    1、当使用索引,直接设置一个项时; vm.items[indexOFitem] = newValue
    2、修改数组的长度时, vm.items.lenght= newLength
    举个例子:
    var vm = new Vue({
    data: {
    items: ['a', 'b', 'c']
    }
    })
    vm.items[1] = 'x' // 不是响应性的
    vm.items.length = 2 // 不是响应性的
    为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:
    Vue.set(vm.items, indexOfitem, newValue)
    vm.items.splice(indexOfItem, 1, newValue)
    你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:
    wm.$set(vm.items, indexOfitem, newValue)
    为了解决第二个问题:
    vm.items.splice(newLength)
    (9)对象更改检测 注意事项
    * 由于JS 的限制,vue不能检测到对象属性 的添加或者删除;
    举例:data: {a:1} vm.b = 2 // 不是响应式的
    解决:
    Vue.set(object, key, value)
    vm.$set(object, key, value)
    * 如果想为已有对象赋予多个新属性,比如使用Object.assign() 或者 _.exetnd() 在这种情况下,你应该用两个对象的属性,创建一个新对象,所以想添加新的响应式属性,不要像这样
    举例:
    data: {
    userProfile: {
    name: 'Anika'
    }
    }
    Object.assign(vm.userProfile, {
    age: 27,
    favoriteColor: 'Vue Green'
    })
    而要这样:
    vm.userProfile = Object.assign({}, vm.userProfile, {
    age: 27,
    favoriteColor: 'Vue Green'
    })

  • 相关阅读:
    Laya中使用Protobuf
    Laya中第三方库的使用
    Laya的骨骼换装
    Laya的粒子效果
    Laya的预设Prefab (预制件)
    Egret EUI Tab + ViewStack
    Egret 划线手势动画 (切水果)
    Egret3.2.6老项目转成5.2.22微信小游戏,遇到exml加载不了问题
    AndroidUI设计 之 图片浏览器
    Android应用的自动更新模块
  • 原文地址:https://www.cnblogs.com/wuhaoquan/p/9365867.html
Copyright © 2011-2022 走看看