<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 一。单向双向数据绑定 1.单向数据绑定:页面上输入内容(页面上展示数据)----不出传入到Vue控件里。 2.双向数据绑定:页面上输入内容(页面上展示数据,)----同时传入到Vue控件里。 方法:v-model 备注:双向绑定应用在(input,select,这样输入性标签中), 二。两种vue写法 1.对象式写法 如下: el:'#root', data:{ name:'魏世轩', }, 2.函数式写法 data:function() { console.log('@@@',this) return{ name:'请输入内容', } } 3.MVVM M = model中的数据 V = 页面上数据 VM = vue实例 流程:M中编写数据----传入VM中---在返回到页面上V V页面上编写数据---传入VM中---传入M中 --> <div id="root"> 单向数据绑定:<input type="text" id="input" :value="name"/> 双向数据绑定:<input type="text" id="input" v-model:value="name"/> </div> <script src="../vue/vue.js"></script> </head> <body> <script> Vue.config.productionTip = false; new Vue({ //对象式写法 el:'#root', data:{ name:'魏世轩', }, //函数式写法 data:function() { console.log('@@@',this) return{ name:'请输入内容', } } }); </script> </body> </html>
标签:Vue,name,绑定,---,model,data From: https://www.cnblogs.com/wsx123/p/16716878.html