内容简介:不知不觉又到了 第三场的学习了,这次的任务很简单。就是了解html里常用事件在Omi中是如何实现。 今天主要讲坑中坑 需要注意的写法我昨晚发现 data 定义时候可以这样写的先看这个例子
不知不觉又到了 第三场的学习了,这次的任务很简单。就是了解html里常用事件在Omi中是如何实现。 今天主要讲坑中坑 需要注意的写法
import { define, WeElement } from 'omi' import style from './_index.css' define('app-intro', class extends WeElement { static observe = true; static get data() { return { name: "点击一下" } } // data = { // name:"点击一下" // } css() { return style; } handleClick = () => { this.data.name = 'Google'; } render(props, data) { console.log(data); return ( <p class="app-intro" onClick={this.handleClick}> {data.name} </p> ) } }) 复制代码
我昨晚发现 data 定义时候可以这样写的
data = { name:"点击一下" } 复制代码
先看这个例子
我们发现 data
的数据 已经变更了 可是为什么 view 里面的数据根本没有修改呢??
结果我发现dntzhang作者的代码里面有 observe
, observe
是vue数据管理的一种常见的东西
我们需要补回去 observe 也是代码就变成以下的状态
import { define, WeElement } from 'omi' import style from './_index.css' define('app-intro', class extends WeElement { static observe = true; static get data() { return { name: "点击一下" } } // data = { // name:"点击一下" // } css() { return style; } handleClick = () => { console.log(this.data) this.data.name = 'Google'; } render(props, data) { console.log(data); return ( <p class="app-intro" onClick={this.handleClick}> {data.name} </p> ) } }) 复制代码
设置后
我们很清楚的看到 我们之前的数据类型 已经被 praxy
管理起来了。
Store 事件中处理 需要 observe 吗?
import { define, WeElement } from 'omi' import style from './_index.css' define('app-intro', class extends WeElement { //static observe = true; static get data() { return { name: "点击一下" } } css() { return style; } handleClick = () => { this.store.rename('*雷') //this.data.name = 'Google'; } render(props, data, store) { console.log('This app-intro ', store) return ( <p class="app-intro" onClick={this.handleClick}> {store.data.name} </p> ) } }) 复制代码
可以看出store 很身就自带observe。
其他话题
在 Omi 中 我们的定义方法是有点性格的,他不像React 那样,需要 this.xxx.bing(this)
当然 React 也提供 babel
的 配置可以省去 bing
的写法 作者发现如果你在omi 用 React 的写法会出现个很好玩的事情,就是Omi 会帮你执行了函数
如果你改成这种写法就会发现 this
不认爹了,在 vue
属性里面写箭头函数也一样出现个问题
最后作者发现只能用 这样的一种方法去定义函数
handleFunction = () => { } 复制代码
如果你想使用传参的方式,请不要直接,原因再上面已经讲过
onClick={this.handleFuntion(xxx)} 复制代码
而是要
onClick={(xx)=>{this.handleFuntion(xxxx)}} 复制代码
结语:
从事件这次使用来说,如果你想你的编码水平有所提高,但又不想了解React各种生命周期的复杂,和各种State 状态处理的时候,Omi 在 Vue 和 React 之间中做选择是非常不过。 还有一点就是要注意 omi 目前在国内市场来说 还适应 手机端开发,比较兼容的版本太高了。除非你不做IE开发。还有就是 ui 组件太少。 不过 React 和 Ng 都有 Antd 这个高质量的组件存在,所以React 在国内还算可以。而 Vue ui 太多,可是质量来说,我是真的觉得不行。除非阿里antd团队出 vue 版本的,感觉不太可能
还有蚂蚁金融 原因在于他们处理的数据量太大了,数据模型过于复杂。应该是没空搞一套vue的antd了
还有一点,前端得学起来,别只停留在Vue。我举个简单的例子 var model = {} ; model.submodule = {model:model} 这样的结构在处理复杂数据的时候常见 可以考虑一下 vue里怎么用它 ,或许以后的 Vue 3.0 上使用Typescript可以很简单的实现。那班 70% 会不会学呢?还是说还会选择一个很容易过渡的框架。 Vue 这一点是做的非常玩美。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 详解JS事件 - 事件模型/事件流/事件代理/事件对象/自定义事件
- React 事件和 Dom 事件
- react事件系统之事件触发
- JS 中的自定义事件和模拟事件
- Flex 事件分发(FlexViewer事件机制)剥离过程
- 事件社交网络:深度用户模型的内容事件推荐
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。