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

尘觉

已于 2023-07-28 22:01:55 修改

阅读量201

点赞数

分类专栏： # Vue前端框架文章标签： vue.js javascript 前端

于 2023-07-27 12:28:29 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/apple_67445472/article/details/131957262

版权

Vue前端框架专栏收录该内容

8 篇文章 9 订阅

订阅专栏

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

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

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

在csdn获奖荣誉: 🏆csdn城市之星2名
⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　⁣⁣⁣⁣　💓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>

😄总结

本篇讲解了vue的数据单双绑定并且附带了代码示例以及全部代码总结实现了闭环学习

😁vue系列
扩展篇⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣⁣　- Vue2 脚手架下载及配置淘宝镜像–和ieda的配置和打开
扩展篇⁣⁣⁣⁣　- Vue 项目结构和文件分析
第1篇⁣⁣⁣⁣　 - Vue的下载以及MVVM分析
🤔欢迎大家加入我的社区尘觉社区

文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论😁
希望能和诸佬们一起努力，今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞

尘觉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue数据单双渲染以及代码讲解

本篇讲解了vue的数据单双绑定并且附带了代码示例以及全部代码总结实现了闭环学习😁vue系列Vue2 脚手架下载及配置淘宝镜像–和ieda的配置和打开Vue 项目结构和文件分析Vue的下载以及MVVM分析🤔欢迎大家加入我的社区尘觉社区文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论😁如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞。
复制链接

扫一扫