Vue05-数据绑定

一、数据绑定1-1、v-bind指令v-bind的作用把 Vue 中的数据动态绑定到 HTML 标签的属性上。示例假设 Vue 里有一个变量data() { return { url: https://www.baidu.com } }a v-bind:hrefurl百度/a这里v-bind:hrefurl意思就是把 Vue 中url变量的值绑定到a标签的href属性。最终相当于a hrefhttps://www.baidu.com百度/a因为如果你直接这么写a hrefurl百度/a这里的url会被当成普通字符串。也就是说浏览器看到的是a hrefurl百度/a而不是a hrefhttps://www.baidu.com百度/a所以 Vue 提供了v-bind:hrefurl告诉 Vue这里不是普通字符串我要使用 Vue 中的url变量。v-bind的核心就是建立“Vue数据 → HTML属性”的动态绑定关系。v-bind有一个非常重要的简写这个你以后会经常看到v-bind:hrefurl可以简写成:hrefurl1-2、v-model指令v-bind主要是Vue数据 → HTML属性1、单项数据绑定2、双向数据绑定注意表单元素必须要有属性value1. 最常见原生表单元素Vue 2 中v-model主要用于这些表单元素input v-modelusername textarea v-modelcontent/textarea select v-modelcity option南京/option option苏州/option /select它们的共同特点是用户可以在这个元素里面输入、选择数据然后把数据同步回 Vue。指令作用常见简写v-bind动态绑定属性:v-on绑定事件v-model双向绑定无1-3、小结