玩转VUE的双向绑定
最近用VUE做了个项目,觉得VUE确实很有趣,其中双向绑定是最吸引人的特性了。
专注于为中小企业提供做网站、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业隆德免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
绑定文本框
用React写一个文本框:
class TextBox extends Component {
constructor(props) {
super(props);
this.state = { txtValue: 'hello world' };
this.setTxtValue = this.setTxtValue.bind(this);
}
setTxtValue(e) {
this.setValue({txtValue: e.target.value})
}
render() {
return (
)
}
}
为了取数据要专门写个事件处理,还要bind,很啰嗦,要是来十个文本框,手指受不了,眼睛也受不了。
让我们看看VUE的伟大吧
一眼就看到底了,爽得不要不要的。
绑定checkbox 和 radio
入了门就看个更有趣的例子,做个问卷调查:
既然是数据驱动,就先设计一下数据模型:
sessions:[ // 每个问题及选项称为一个session
{
question: '3. Which langurage are you using?', //问题文本
type: 'checkbox', // 问题类型,单选、多选
answer: [], // 多选题答案
value: '', // 单选题答案
errMsg: '', // 错误信息
options: [ // 答案的选项
{
label: 'Java',
value: '1',
},
... // 更多的选项
]
},
... // 更多的session
]
设计一个组件,显示session
{{session.errMsg}}
接收并显示一个session,会根据session的类型做不同的绑定:
- 类型是多选时,input的值绑定到session.answer,结果是一个数组,例如 ['1','2']
- 类型是单选时,input的值绑定到session.value,结果是一个值,如'1'。为了统一效果,加了一个处理将单选的结果也放入session.answer,例如 ['1']
我们引入vuex作为全局的状态管理:
Vue.use(Vuex);
var state = {
sessions: [
{
question: '3. Which langurage are you using?',
type: 'checkbox',
answer: [],
value: '',
errMsg: '',
options: [
{
label: 'Java',
value: '1',
},
{
label: 'python',
value: '2',
},
{
label: 'C',
value: '3',
},
{
label: 'swift',
value: '4',
},
]
},
...
]
}
var actions = {
submitAnswer({ commit, state }) {
...
}
}
const store = new Vuex.Store({
state, actions
})
export default store;
用过Redux的同学看出端倪了吗?不用dispatch,不用reducer,store里面的数据直接绑定在组件上,一旦变化,马上触发UI更新,省去了很多无聊的代码。还有,即使是store里面深层的数据发生变化,vue可以很自然地监察,然后更新页面。不像React,要析构赋值或者combineReducer。
接下来只要再来一段,引入组件,循环使用
就可以做出以下的效果了
在VUE中,dispatch用于触发异步action,例如提交数据等,这里只讨论数据绑定。
相对于React,VUE的数据绑定减少了冗余的代码,让开发者可以更专注于业务。
当前标题:玩转VUE的双向绑定
浏览地址:http://pwwzsj.com/article/jhjgjd.html