玩转VUE的双向绑定

　　

最近用VUE做了个项目,觉得VUE确实很有趣,其中双向绑定是最吸引人的特性了。

　　

绑定文本框

　　

用反应写一个文本框:

　　
 <代码>类文本框扩展组件{
　　构造函数(道具){
　　超级(道具);
　　这一点。状态={txtValue:“hello world”};
　　这一点。setTxtValue=https://www.yisu.com/zixun/this.setTxtValue.bind(这);
　　}
　　setTxtValue (e) {
　　这一点。setValue ({txtValue: e.target.value})
　　}
　　呈现(){
　　回报(
　　

　　
　　& lt;/template>
　　& lt; script>
　　出口默认{
　　数据(){
　　返回{
　　txtValue:“hello world”
　　}
　　}
　　}
　　& lt;/script>
　　

一眼就看到底了,爽得不要不要的。

　　

绑定复选框和单选

　　

入了门就看个更有趣的例子,做个问卷调查:
玩转VUE的双向绑定

　　

既然是数据驱动,就先设计一下数据模型:

　　
 <代码>会话:[//每个问题及选项称为一个会话
　　{
　　问题:3。你用的哪个langurage ?',//问题文本
　　类型:“复选框”,//问题类型,单选,多选
　　答:[],//多选题答案
　　值:",//单选题答案
　　errMsg:“,//错误信息
　　选择:[//答案的选项
　　{
　　标签:“Java”,
　　值:' 1 ',
　　}，
　　…//更多的选项
　　]
　　}，
　　…//更多的会话
　　)
　　

设计一个组件,显示会话

　　
 <代码> & lt; template>
　　& lt; div类="问题"比;
　　& lt; div> & lt; label>{{会话。问题}},{{session.answer}} & lt;/label> & lt;/div>
　　& lt; div v="会话。类型===案囱】颉北?
　　& lt; div v="(选项,好,oidx)会话。选项”:关键=" oidx”比;
　　& lt; label>
　　& lt;输入:type="会话。“v模型="会话类型。回答:价值=" https://www.yisu.com/zixun/option.value "/比;
　　{{option.label}}
　　& lt;/label>
　　& lt;/div>
　　& lt;/div>
　　& lt; div v="会话。类型===电台”在
　　& lt; div v="(选项,好,oidx)会话。选项”:关键=" oidx”比;
　　& lt; label>
　　& lt;输入:type="会话。“v模型="会话类型。价值”:价值=" https://www.yisu.com/zixun/option.value " @change=" handleRadio(会话)”/比;
　　{{option.label}}
　　& lt;/label>
　　& lt;/div>
　　& lt;/div>
　　& lt; div类=" err-msg "在{{session.errMsg}} & lt;/div>
　　& lt;/div>
　　& lt;/template>
　　
　　& lt; script>
　　出口默认{
　　道具:“会话”,
　　方法:{
　　handleRadio(会话){
　　会话。回答=[会话。值)
　　}，
　　}
　　}
　　& lt;/script>
　　

接收并显示一个会话,会根据会话的类型做不同的绑定:

　　
    　　<李>类型是多选时,输入的值绑定到会话。答案,结果是一个数组,例如[' 1 ',' 2 '] 　　<李>类型是单选时,输入的值绑定到session.value,结果是一个值,如“1”,为了统一效果,加了一个处理将单选的结果也放入会话。答案,例如[1]

    我们引入vuex作为全局的状态管理:李 　　
　　
 <代码> Vue.use (Vuex);
　　var={状态
　　会话:[
　　{
　　问题:3。你用的langurage ?”
　　类型:“复选框”,
　　答:[],
　　价值:”,
　　errMsg:”,
　　选择:[
　　{
　　标签:“Java”,
　　值:' 1 ',
　　}，
　　{
　　标签:“python”,
　　值:' 2 ',
　　}，
　　{
　　标签:“C”,
　　值:' 3 ',
　　}，
　　{
　　标签:“迅速”,
　　价值:“4”,
　　}，
　　]
　　}，
　　…
　　]
　　}={var行动
　　submitAnswer({提交,状态}){
　　…
　　}
　　}
　　常量存储=new Vuex.Store ({
　　状态,行动
　　}）
　　出口默认存储;
　　
　　

用过回来的的同学看出端倪了吗?不用调度,不用减速器,商店里面的数据直接绑定在组件上,一旦变化,马上触发UI更新,省去了很多无聊的代码。还有,即使是商店里面深层的数据发生变化,vue可以很自然地监察,然后更新页面。不像反应,要析构赋值或者combineReducer。

接下来只要再来一段,引入组件,循环使用

　　
 <代码> & lt; template>
　　& lt; div v="(会话、关键idx) store.state美元。会话”:关键=" idx "比;=& lt;会议:会议“会话”祝辞& lt;/Session>
　　& lt;/div>
　　& lt;/template>
　　& lt; script>
　　从“. ./会话”导入会话;
　　出口默认{
　　组件:{
　　会话
　　}，
　　}
　　& lt;/script> 
玩转VUE的双向绑定