😀前言
本片文章是vue系列第2篇整理了vue的单双数据绑定以及代码讲解
🧑个人简介：大家好，我是尘觉，希望我的文章可以帮助到大家，您的满意是我的动力😉😉
😉vue数据渲染
💖数据单向渲染
基本说明
v-bind 指令可以完成基本数据渲染/绑定
v-bind 简写形式就是一个冒号（:）
😯应用实例
需求: 演示 v-bind 的使用, 可以绑定元素的属性
- 使用插值表达式引用 data数据池数据是在标签体内
- 如果是在标签/元素 的属性上去引用data数据池数据时，不能使用插值表达式
- 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析
- 如果不希望看到报红, 直接 alt+enter 引入 xmlns:v-bind
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>单向数据渲染</title> </head> <body> <div id="app"> <h1>{{message}}</h1>//{{message}}这种叫插值表达式 <!--解读 1. 使用插值表达式引用 data数据池数据是在标签体内 2. 如果是在标签/元素 的属性上去引用data数据池数据时，不能使用插值表达式 3. 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析 4. 如果不希望看到报红, 直接 alt+enter 引入 xmlns:v-bind --> <!--<img src="{{img_src}}">--> <img v-bind:src="img_src" v-bind:width="img_width">//也可以简写：src和：width <img :src="img_src" :width="img_width"> </div> <script src="vue.js"></script>//必须要引用否则使用不了vue <script> let vm = new Vue({ el: "#app", //创建的vue实例挂载到 id=app的div data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置) message: "hello", img_src: "大家自定义就好图片好", img_width: "200px" } }) console.log("vm=>", vm); </script> </body> </html>
注意事项和使用细节
- 插值表达式是用在标签体的
- 如果给标签属性绑定值，则使用 v-bind指令
- {{message}}这种叫插值表达式 只能在标签内使用
💗数据双向绑定
😯应用实例
需求在输入框中输入信息，会更新到相应绑定的位置
代码实现
- v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view
- v-model=“hobby.val” 是数据的双向渲染,
(1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】
(2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是DomListeners】
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>双向数据渲染</title> </head> <body> <div id="app"> <h1>{{message}}</h1> <!--解读 1. v-bind是数据单向渲染: data数据池绑定的数据变化，会影响view 2. v-model="hobby.val" 是数据的双向渲染, (1)data数据池绑定的数据变化，会影响view 【底层的机制是 Data Bindings】 (2)view 关联的的元素值变化, 会影响到data数据池的数据【底层机制是Dom Listeners】 --> <input type="text" v-model="hobby.val"><br/><br/> <input type="text" :value="hobby.val"><br/><br/> <p>你输入的爱好是: {{hobby.val}}</p> </div> <script src="vue.js"></script> <script> let vm = new Vue({ el: "#app", //创建的vue实例挂载到 id=app的div data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置) message: "hi, 输入你的爱好", hobby: { val: "购物" } } }) console.log("vm=>", vm); </script> </body> </html>
💬代码综合-单项渲染和双向渲染
1、使用Vue的数据双向绑定 完成如下功能
当用户在输入框输入1.jpg 、2.jpg 、3.jpg时可以切换显示对应的图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!--1、使用Vue的数据双向绑定 完成如下功能--> <!--1) 当用户在输入框输入1.jpg 、2.jpg 、3.jpg时可以切换显示对应的图片--> <!--2) 使用Vue的数据双向绑定完成--> <body> <div id="app"> <h1>请输入图片名称1.jpg-2.jpg-3.jpg</h1> <!--说明: 1. 这里我们使用了数据的双向渲染-data{} 数据池的 img_src --> <input type="text" v-model="img_src"><br/><br/> <img :src="img_src" :height="img_height"><br/> <img src="1.jpg" :height="img_height"> <img src="2.jpg" :height="img_height"> <img src="3.jpg" :height="img_height"> </div> <script src="vue.js"></script> <script> let vm = new Vue({ el: "#app", //创建的vue实例挂载到 id=app的div data: { //data{} 表示数据池(model的有了数据), 有很多数据 ,以k-v形式设置(根据业务需要来设置) img_src: "1.jpg", img_height: "100px" } }) </script> </body> </html>
😄总结
本篇讲解了vue的数据单双绑定并且附带了代码示例以及全部代码总结实现了闭环学习
文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论😁
希望能和诸佬们一起努力，今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞
