Vue属性绑定和双向数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>属性绑定和双向数据绑定</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!--根据慕课网DellLee老师讲解的vue2.5入门课程笔记，视频地址： https://www.imooc.com/learn/980--> <div title="this is hello world">hello world</div> </div> <div id="app1"> <!--1 属性绑定：v-bind--> <!--1.1 属性绑定： v-bind代表 当前这个属性与谁绑定，是与titleData数据项绑定，一旦使用v-bind则属性值代表的是js表达式v-bind可以缩写为:--> <div v-bind:title="'一旦用v-bind,这里是JS表达式'+titleData">hello world</div> </div> <div id="app2"> <!--1.2 属性绑定 v-bind可以缩写为: --> <div :title="titleData">hello world</div> </div> <div id="app3"> <!--2 双向数据绑定:v-model --> <!--双向数据绑定是指：当页面中的内容发生改变，则Vue实例中的数据也发生改变--> <div :title="titleData">hello world</div> <input v-model="context" /> <div > {{context}} </div> </div> <script> var app = new Vue({ el: "#app", data: { title: "this is hello world" } }); var app1 = new Vue({ el: "#app1", data: { titleData: "this is hello wordss" } }); var app2 = new Vue({ el: "#app2", data: { titleData: "ddssss" } }); var app3 = new Vue({ el: "#app3", data: { titleData: "", context:"this is context" } }); </script> </body> </html>