Open sospartan opened 8 years ago
这么好用的v-bind和v-on居然全给改了。5555555555555
上一篇:Weex快速上手教程 下一篇:style和class
@transtone 你可以去主项目发起issue让大家来讨论 如果支持的人多 我觉得开发同学会考虑的 😄
我现在用的vue.js 准备切到weex 有什么建议吗
@Luoxinfang ,会vue.js上手快。我花了三天看下vue文档,现在看weex感觉很轻松,会点原生那就跟nice啦😄
小白请教下为什么更新了数据绑定的组件却没有更新呢?是有更改这块吗?
这么好用的v-bind和v-on居然全给改了。5555555555555
这两个语法印象中是 vue 0.13 / 0.14 提出来的,已经接近 1.0 了,我们的语法相对是一个老版本的 vue,其实不是我们要刻意”改“掉,后期我们做了一些调查,大家对 {{...}}
的接受度更高,所以我们暂没有冒然升级到最新版的 vue 语法 @transtone
@lxc7923 可以来我们的中文聊天室具体说一下你遇到的问题 https://gitter.im/weexteam/cn
image标签好像不加宽高就不能显示的是么?
@FF-Zack image 不加宽高不显示,查看 weex-html5 版就会发现最终转换成了 div 的 background-image 的形式来展示一张图片
原来是基于 vue 0.13 / 0.14 , 那 vue2.0 不知如何
@hisland WIP
@sospartan that's cool, https://twitter.com/youyuxi/status/766753137717829633
有没有网格布局呀(grid),如果有如何绑定列表?
试了一下,好像
data: {
size: 48,
title: 'Alibaba Weex Team'
}
和
data: {
title: {
size: 48,
value: 'Alibaba Weex Team'
}
}
两种数据绑定方式不能混用
script标签内改变了data里的数据,template不是时时更新的吗?
查看更多关于style和class的内容 的 链接 https://github.com/weexteam/article/issues/style-n-class.md 都不能点。。。文档能不能用点心
感觉能和vue一致就好了,现在从vue切换过来感觉会混乱
@Jam1zhu 是实时更新的。
多谢。当时做倒计时碰到点麻烦,已经解决了。^_^
发自网易邮箱大师 在2016年11月29日 18:52,Yun Dong 写道:
@Jam1zhu 是实时更新的。
— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.
@Luoxinfang 看看新版文档呗。http://alibaba.github.io/weex/cn/doc/
@lxc7923 看看是否有报错,可以参考下新文档中的各种例子 http://alibaba.github.io/weex/cn/doc/syntax/data-binding.html
@FF-Zack
image 必须明确指定 宽高,否则无法显示
@liuguangli 可以使用 flex 实现网格布局,可参考新文档中的示例 http://alibaba.github.io/weex/cn/doc/references/common-style.html#示例
新版中文网站及文档已经上线,请访问 https://weex-project.io/cn/ , 此处后续不再维护,谢谢理解。
新版中文网站及文档已经上线,请访问 https://weex-project.io/cn/ , 此处后续不再维护,谢谢理解。
数据绑定
0.4
Weex使用_mustache_的语法(
{{...}}
)来对<template>
中的模板和<script>
里的数据进行绑定. 一旦数据额模板绑定了, 数据上的修改会实时的在模板内容中生效.绑定数据path
上面的代码会把
title
和size
的数值绑定到模板内容上.我们也可以通过
.
符号来绑定数据结构中的字段. 看一下下面的代码片段:In-template 表达式
进行数据绑定时, Weex支持一些简单的javascript表达式,例如:
这些表达式会在当前的上下文中进行演算.
NOTE: 每个绑定只能包含单个表达式
Computed Properties
0.5
in-template表达式相比于简单的操作符方便多了. 但如果需要在模板里实现更多的逻辑判断,你可以使用'computed property'.
例如:
我们在这段代码里定义了一个computed property
fullName
. 它所提供的函数能作为gettter函数实现连接字符串firstName
和lastName
.除此以外当由点击出发了
changeName
后, setter函数会被调用,并且this.firstName
和this.lastName
会对应的更新.NOTE:
data
和methods
不能有重复的字段. 因为在执行的上下文中 --this
, 能同时指向这两者.数据绑定中的特殊属性
样式:
style
或class
组件的样式能够通过
style
属性进行绑定:样式也能够通过
class
属性实现绑定,多个classname通过空格分隔:在上面的代码中如果
{{size}}
和{{status}}
是空值, 就只有class="title"
会被渲染.事件处理器:
on...
以
on...
开头的就是用于指定事件处理器的属性, 属性名中'on'之后的部分就是事件的类型, 属性的值就是对应进行事件处理的函数名. 不需要添加mustache语法中的大括号或者函数调用时的圆括号.if
&repeat
if
属性能够通过true/false
值控制组建是否显示.Weex通过
repeat
属性来生成列表.NOTE: 当你修改
data
中的数组时,在写法上会受到一定的限制,具体如下直接通过 index 修改数组的某个项目 (如
vm.items[0] = {};
) 是不会触发视图自动更新的。我们在数组的原型上提供了一个额外的方法:$set(index, item)
.直接通过修改
length
来改变数组长度 (如vm.items.length = 0
) 也是不会触发视图自动更新的。我们推荐您直接赋值一个新的空数组把旧的替换掉。static
static
属性可以取消数据绑定机制,从而数据更新不会再同步到 UI 界面。如上所示,添加 static 关键字,渲染结果会是 Hello, static,相当于渲染一个静态的节点,ready 函数中对数据
word
的改变不会被监听,从而 text 值不会改变。static
属性设计的目的是为了降低长列表、纯静态页面的内存开销。小心的使用它,因为它可能会中断你的页面逻辑。下一篇: style和class.