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

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

个人主页:尘觉主页

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

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

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

文章目录

  • vue数据渲染
    • 数据单向渲染
      • 基本说明
      • 应用实例
      • 注意事项和使用细节
    • 数据双向绑定
      • 应用实例
      • 代码实现
      • 代码综合-单项渲染和双向渲染
    • 总结

vue数据渲染

vue数据单双渲染以及代码讲解_第1张图片

数据单向渲染

基本说明

v-bind 指令可以完成基本数据渲染/绑定

v-bind 简写形式就是一个冒号(:)

应用实例

需求: 演示 v-bind 的使用, 可以绑定元素的属性

  1. 使用插值表达式引用 data数据池数据是在标签体内
  2. 如果是在标签/元素 的属性上去引用data数据池数据时,不能使用插值表达式
  3. 需要使用v-bind, 因为v-bind是vue来解析, 默认报红,但是不影响解析
  4. 如果不希望看到报红, 直接 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}}这种叫插值表达式
    
    
    <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>

注意事项和使用细节

  1. 插值表达式是用在标签体的

  2. 如果给标签属性绑定值,则使用 v-bind指令

  3. {{message}}这种叫插值表达式 只能在标签内使用

数据双向绑定

v-model 可以完成双向数据绑定

应用实例

需求在输入框中输入信息,会更新到相应绑定的位置
vue数据单双渲染以及代码讲解_第2张图片

代码实现

  1. v-bind是数据单向渲染: data数据池绑定的数据变化,会影响view
  2. 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>
    
    <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>Titletitle>
head>



<body>
<div id="app">
<h1>请输入图片名称1.jpg-2.jpg-3.jpgh1>
    

    <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连支持一下,创造不易您们的支持是我的动力

你可能感兴趣的:(前端技术栈,vue.js,javascript,前端)