移动端 | 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'
})

转载于:https://www.cnblogs.com/wuhaoquan/p/9365867.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/538171.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机组装电源线排,主机箱背部走线技巧 组装电脑走背线与理线教程

近年来&#xff0c;装机行业流行一个术语&#xff0c;即“走背线”&#xff0c;那么走背线是什么&#xff1f;装机之家小编简单介绍下&#xff0c;通俗的说&#xff1a;走背线就是针对电脑机箱&#xff0c;装机的时候&#xff0c;将机箱内部和电源的线材做到最干净整洁&#xf…

查看oracle数据库允许的最大连接数和当前连接数

原文链接&#xff1a;http://blog.csdn.net/zmx729618/article/details/54018629 ----------------------------------------------------------------------------- 在查看数据的连接情况很有用&#xff0c;写完程序一边测试代码一边查看数据库连接的释放情况有助于分析优化…

干煸线椒的做法_美食:农家蒸土鸡,剁椒梅鲚鱼干,干煸茶树菇,芹菜炒牛肉的做法...

阅读本文前&#xff0c;请您先点击上面“蓝色字体”&#xff0c;再点击“关注”&#xff0c;这样您就可以免费收到我们的最新内容了&#xff0c;每天都会有更新&#xff0c;完全是免费订阅&#xff0c;请放心关注。图文来源网络&#xff0c;侵权联系删除&#xff01; …

计算机出现假桌面怎么解决办法,win10系统apphangxprocb1引起桌面假死怎么解决【图文】...

电脑死机怎么办&#xff1f;有win10系统用户反应win10系统apphangxprocb1引起桌面假死怎么解决&#xff1f;出现这种情况该怎么解决&#xff1f;下面就将方法分享给大家。描述:出现了一个问题,该问题导致了此程序停止与 Windows 进行交互。错误的应用程序路径: C:Windowsexplor…

Tomcat log文件

catalina.out 是Tomcat启动和运行时访问日志。包括访问报错日志。不包括启动报错日志。包括了 catalina.2017-12-02.log 的日志。 localhost.2017-12-02.log 报错日志&#xff0c;包括启动时报错&#xff0c;如框架初始化失败日志&#xff0c;如spring的容器初始化日志…

如何将对象拼接成get传值的形式

传递的参数为params对象export default {data () {return {phone: 18688754577,password: 123456}},computed: {params () {let params {}params.phone this.phoneparams.password this.passwordreturn params}},methods: {concatParams (params) {let paramsStr for (var …

= 改为 in

for (String tableName : tableNames) {//检查是否全为空for (long p_hour start; p_hour < end; p_hour) {String sql"select * from HIVE_READ_INSERT_HISTORY where "imsiORmsisdnSql(imsi, msisdn, tableName)" and p_hour"p_hour" " &q…

noj数据结构稀疏矩阵的加法十字链表_数据结构之:图

导读1. 什么是图&#xff1f;图的存储方式&#xff1f;2. 图的遍历&#xff08;深度优先搜索&#xff0c;广度优先搜索&#xff09;3. 最短路径1. 什么是图&#xff1f;图的存储方式&#xff1f;前面总结了“树”这种数据结构&#xff0c;而这篇博客总结的是更为复杂的一种数据…

vue中用数组语法绑定class

简单的绑定class就不说了&#xff0c;它可以和对象语法一样&#xff0c;使用data、computed、methods三种方法。说一下我在工作里体会到这种作法的好处。那么直接上代码。。。咔咔咔 说下需求&#xff0c;我是做一个显示框&#xff0c;当status为1时&#xff0c;代表成功状态&a…

解释型语言与编译型语言的区别

编译型语言在程序执行之前&#xff0c;有一个单独的编译过程&#xff0c;将程序翻译成机器语言&#xff0c;以后执行这个程序的时候&#xff0c;就不用再进行翻译了。 解释型语言&#xff0c;是在运行的时候将程序翻译成机器语言&#xff0c;所以运行速度相对于编译型语言要慢。…

三星台式机计算机编号怎么看,三星笔记本如何查看型号

现如今&#xff0c;电脑的用途广泛&#xff0c;而且方便快捷&#xff0c;深受人们的欢迎&#xff0c;人们不仅可以通过电脑来了解知识&#xff0c;开阔眼界&#xff0c;而且电脑是一种消遣、娱乐的方式&#xff0c;可以放松身心。那电脑的话&#xff0c;有分两种&#xff0c;一…

自旋锁和互斥锁实例_多线程编程之自旋锁

一、什么是自旋锁一直以为自旋锁也是用于多线程互斥的一种锁&#xff0c;原来不是&#xff01;自旋锁是专为防止多处理器并发(实现保护共享资源)而引入的一种锁机制。自旋锁与互斥锁比较类似&#xff0c;它们都是为了解决对某项资源的互斥使用。无论是互斥锁&#xff0c;还是自…

如何卸载symantec

前段时间,业务的虚机上安装了symantec Endpoint Protection(正版)&#xff0c; 发现虚机运行一段时间就会失去响应死机&#xff0c;并且有些安装symantec的虚机3389端口无法使用&#xff0c;怎么折腾都不行。最后决定卸载它。一、是否可以用停止服务和终止进程再卸载的方式卸载…

CSS文件引入顺序

<link rel"stylesheet" href"bootstrap.min.css"> <link rel"stylesheet" href"app.css"> 自定义的css要最后引入。因为有时候会修改bootstrap的css。只有后引入的才会覆盖。 如果提前引入了&#xff0c;自定义的会被bo…

浏览器的简单兼容

2019独角兽企业重金招聘Python工程师标准>>> function getXHER() { var xhr null; if(XMLHttpRequest){ xhr new XMLHttpRequest(); }else{ xhr new ActiveXObject(Microsoft.XMLHTTP); } return xhr; }转载于:https://my.oschina.net/u/2511906/blog/1865622

用计算机算出陈赫手机号码,陈赫手机号码遭《快本》曝光,并被网友打到关机!还有人搜到了他的支付宝账户......

原标题&#xff1a;陈赫手机号码遭《快本》曝光&#xff0c;并被网友打到关机&#xff01;还有人搜到了他的支付宝账户...昨天的陈赫可能是被不断的电话铃声叫醒的&#xff0c;因为快本在节目中把陈赫的电话号码给曝光了……当时导演让每个明星向自己的一位圈内好友发出求助短信…

伯努利分布方差_统计分布--深入浅出统计学总结

伯努利分布&#xff1a;一个实验只有两个结果概率发生在{0,1}&#xff0c;发生一个事件成功的概率为 x&#xff0c;不成功的概率为y&#xff0c; 1.若符合伯努基分布条件&#xff1a;p 成功概率 &#xff0c; q 失败概率伯努利分布数学期待&#xff1a;伯努利分布方差&#x…

解决The project description file (.project) for 'xxx' is missing

若没有修改过.project文件&#xff0c;只需重新导入工程即可&#xff0c;别纠结其他的了

macbook禁用键盘_一行命令禁用 MacBook 内置键盘

去年底阿麦换了新的 MacBook Pro&#xff0c;于是她自学生时代就一直在用的老款 MacBook Pro 就归我当玩具了。一度考虑过将其出售&#xff0c;但是想到自己还闲置了一块 SSD&#xff0c;就想着干脆换上让它继续服役。于是买了光驱硬盘支架&#xff0c;想着有时间就给换上。然而…

Java分享笔记:自定义枚举类 使用enum关键字定义枚举类

在JDK1.5之前没有enum关键字&#xff0c;如果想使用枚举类&#xff0c;程序员需要根据Java语言的规则自行设计。从JDK1.5开始&#xff0c;Java语言添加了enum关键字&#xff0c;可以通过该关键字方便地定义枚举类。这种枚举类有自己的程序编写规则&#xff0c;并且具有一些特殊…