VUE---4.基础指令v-bind和v-model以及MVVM模型

此白非彼白`

已于 2024-07-02 13:56:41 修改

阅读量413

点赞数

分类专栏： VUE 文章标签：开发语言 vue.js 前端 javascript 前端框架

于 2022-08-23 10:14:37 首次发布

本文链接：https://blog.csdn.net/xi_xi_123456/article/details/126478621

版权

VUE 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

vue给我们提供了一些指令，让我们更方便的开发程序。

文章目录

前言

熟悉运用指令能帮助我们更好更快捷的完成项目

一、v-bind

v-bind:属性名 ="属性值"（简写 :属性名="属性值")

A. 绑定属性设置属性值

B. 可以绑定任意属性,可以多个属性

C. 属性值默认"变量名" 会自动查找data中的数据; 设置字符串不会自动查找

示列:

v-bind:dage='"age1"' 字符串

v-bind:dage='age' 变量

D. 属性名也可以是data中的数据

E. v-bind:属性="属性值" 简写 :属性="属性值"

F. v-bind是一个单向的数据绑定 data数据流向页面,页面不会流向data

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="app" >
        <p :dage='"age1"' >{{name}}</p>
        <!-- <img v-bind:src="url"   alt=""> -->
        <p :class="'red'">123123</p>
        <a :[arrbu]="url1">百度</a>
       
    </div>
    
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                bol:false,
                arrbu:"href",
                url1:"https://www.baidu.com",
                name: "pxr",
                age: 18,
                sex: "<h1>你好</h1>",
                url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0721%252F96b34becj00rfc5k6001mc000hs0134g.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661002442&t=4b585da82705577206ee7bd27eec7d1c"
            },
        })
    </script>
</body>

</html>

二、v-model

v-model:value="属性值" （简写v-model="数据"）

v-model用于表单中，用来双向绑定

1. 任何存在value属性显示页面的元素,都可以使用

A. v-model:value="属性值"

B. data数据流向页面,页面流向data修改

C. 简写 v-model="数据"

2.双向绑定 === v-model

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            height: 100px;
            background: red;
        }
    </style>
</head>

<body>
    <div id="app" >
        <p :dage='"age1"' >{{name}}</p>
        <!-- <img v-bind:src="url"   alt=""> -->
        <p :class="'red'">123123</p>
        <a :[arrbu]="url1">百度</a>
        <input type="text"  :value="val">
        <input type="text"  v-model="mod">
        <input type="checkbox" v-model="bol">

    </div>
    
    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                bol:false,
                mod:"v-model的数据",
                val:"input的数据",
                arrbu:"href",
                url1:"https://www.baidu.com",
                name: "pxr",
                age: 18,
                sex: "<h1>你好</h1>",
                url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2022%252F0721%252F96b34becj00rfc5k6001mc000hs0134g.jpg%26thumbnail%3D660x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661002442&t=4b585da82705577206ee7bd27eec7d1c"
            },
        })
    </script>
</body>

</html>

三、MVVM模型

mvvm模型 => 双向绑定

m => Model模型 => data数据,代码逻辑,

v => View(视图) => html结构

vm => ViewModel(实例) => 负责监听model数据(data),并且改变控制视图的更新

1. vm => vue监听data(m)数据(vue获取data数据)

2. m => 将数据给vm

3. vm => v(视图渲染页面)

4. v => 双向绑定(v-model)给vm发送数据进行修改 m(data数据)

MVVM：

四、补充：

1. {{}} 输出文本的 => 在元素内部(内容区域)使用

示列: <p>{{name}}</p>

2. v-bind 设置属性的 => 在元素属性上使用

示列: <img v-bind:src="url" alt="">

总结

指令 => 设置对应(vue指令)的命令(代码),就只是执行对应(vue封装好)的功能

指令 => 设置在那个元素上,那个元素就会执行对应功能

此白非彼白`

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE---4.基础指令v-bind和v-model以及MVVM模型

熟悉运用指令能帮助我们更好更快捷的完成项目指令 => 设置对应(vue指令)的命令(代码),就只是执行对应(vue封装好)的功能指令 => 设置在那个元素上,那个元素就会执行对应功能。
复制链接

扫一扫