vue数据单双渲染以及代码讲解

😀前言
本片文章是vue系列第2篇整理了vue的单双数据绑定以及代码讲解

🏠个人主页：尘觉主页
在这里插入图片描述

🧑个人简介：大家好，我是尘觉，希望我的文章可以帮助到大家，您的满意是我的动力😉😉

在csdn获奖荣誉: 🏆csdn城市之星1名
⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　💓Java全栈群星计划top前5
⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　🤗 端午大礼包获得者

💕欢迎大家：这里是CSDN，我总结知识的地方，欢迎来到我的博客，感谢大家的观看🥰
如果文章有什么需要改进的地方还请大佬不吝赐教先在次感谢啦😊

文章目录

😉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-model 可以完成双向数据绑定

😯应用实例

需求在输入框中输入信息，会更新到相应绑定的位置
在这里插入图片描述

代码实现

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>