vue 常见指令 双向绑定原理

最新推荐文章于 2024-04-21 19:25:34 发布
最新推荐文章于 2024-04-21 19:25:34 发布
阅读量132 收藏
点赞数
文章标签： vue.js 前端 npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YPX_YGWW/article/details/121086374
版权

1.淘宝镜像

npm 的下载是需要访问国外服务器才可以下载 但是国内访问很慢 所以淘宝集团 自行搭建了一个服务器 这个服务器每隔10分钟就会把npm国外服务器的内容拉去一次 就叫淘宝镜像

要使用需要配置：npm i -g cnpm --registry=https://registry.npm.taobao.org

然后在当下目录cmd，执行命令

获取vue的依赖库 cnpm install --save vue

什么是html标签的属性

扩展标签的功能

属性的语法 必须写在开标签中 属性="属性值"

vue

Vue是什么

vue.js是当今最为主流的MVVM框架

作者:尤雨溪 前Google员工

MVVM

MVVM是一种编程的思想 在这个思想下 更加专注于业务的开发(功能),让我们的开发变得更加简单

M ------ model 模型=数据

V ------ view 视图=界面(写出来用户可以看到的内容)

VM -------viewmodel 视图模型 用来传递模型和关联视图的

Vue优势

vue的开发目的

vue初体验

获取vue的依赖库 npm install --save vue

(在淘宝镜像上获取: cnpm install --save vue)

编写如下内容:

<!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>
      <!-- 步骤
    1.下载包
    2.引包 -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
        
</head>
<body>
  
    
 <!-- M   model 模型=数据
 V   view 视图=界面
 VM   viewmodel 视图模型 用来传递模型和关联视图的 -->
​
 <!--  3.新建v层 -->
 <div id="demodiv">
        {{text}}
        <!-- 双括号里是表达式 -->
 </div>
​
 <script>
    //  4.新建VM层 就是Vue实例
​
    new Vue({
        el:"#demodiv",
        // 5.编写m层
        data:{
            text:"你好呀"
        }
    })
 </script>
</body>
</html>

{{}}是什么?

{{表达式--通过计算返回结果的公式}}

{{}} 大括号赋值法/双大括号/模板语法

<!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>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>双大括号赋值法</h1>
        <h1>{{text}}</h1>
        <h1>{{num+2}}</h1>
        <h1>{{bool?"你好呀":"怎么呢"}}</h1>
        <h1>{{arr}}</h1>
        
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                text:"字符串",
                num:18,
                bool:false,
                arr:[1111,2222,3333,4444],
                obj:{
                    name:"xixi",
                    age:18
                }
            }
        })
    </script>
    
</body>
</html>

vue渲染数据

vue.js的核心就是数据驱动   vue的数据驱动就是视图的内容是根据模型data数据的改变而改变的

数据驱动的分类

1.声明式渲染 我们只需要告诉程序 想干什么 那么程序就会自动来完成

2.命令式渲染 我们需要一步一步的指挥着程序 程序才会按照我们的指令去执行

指令

在vue中 使用v-开头html特殊属性

指令的作用:在Vue中扩展标签的功能

指令的语法:写在html开标签中且  v-指令="指令值"

v-model

作用:用于 表单元素上 完成数据的双向绑定

语法:v-model="值"

双向绑定

用户可以看见的界面中也就是v层视图层 改变了数据  那么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>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-model</h1>
        <!-- 双向绑定
        用户可以看见的界面中也就是v层(视图层) 改变了数据的  那么data中的内容也就会改变  视图变模型变
        模型改变了  反之也会让视图发生改变  模型变视图变 -->
        <input type="text" v-model="inputval">
        <h1>{{inputval}}</h1>
        <h1>{{inputval}}</h1>
        <h1>{{inputval}}</h1>
        <h1>{{inputval}}</h1>
        <h1>{{inputval}}</h1>
        <h1>{{inputval}}</h1>
        <h1>{{inputval}}</h1>
​
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                inputval:""
            }
        })
    </script>    
</body>
</html>

双向绑定的原理

双向绑定是通过 数据劫持 与 发布者订阅者模式来实现的

数据劫持：数据（变量）劫持（拦截）就是当数据改变的时候 我要拦截到这次改变 通知模型或者视图发生改变

通过一个Object.defineProperty（）来监听数据,当数据改变的时候他就会被触发 从而通知另外一方（有一个get的方法和set的方法 分别是读取与修改）

发布者订阅者模式:就是一个一对多的关系 ，当发布者改变了 其所有的订阅者也会随之发生改变

v-show

作用:控制dom元素的显示和隐藏

语法:v-show="返回值为布尔值的表达式"  true 显示  false隐藏

<!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>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-show</h1>
        <!-- 如果给复选框绑定一个变量,那么这个变量就会随着勾选和取消在true和false中切换 -->
        <input type="checkbox" v-model="bool">{{bool?"显示了":"隐藏了"}}
        <h1 v-show="bool">我是测试显示和隐藏的元素</h1>
​
    </div>
    
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                bool:true
            }
        })
    </script>
</body>
</html>

v-on

作用:就是给dom元素绑定事件的

语法:v-on:去掉on的事件="函数" 简写就是 @

<!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>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <h1>v-on</h1>
    <!-- 绑定事件用v-on -->
    <div id="demodiv">
        <button v-on:click="fun()">点我绑定事件</button>
        <!-- v-on简写:把v-on:替换成@ -->
        <button @click="fun()">简写写法</button>
    </div>   
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                
            },
            // methods来创建函数
            methods:{
                // 函数名(){
​
                // }
                fun(){
                    console.error("你好啊");
                }
            }
        })
    </script>
    
</body>
</html>

v-for

作用:遍历展示数据

v-for="(v,i) in arr"

语法:v-for"(参数1-----遍历出来的值,参数2-------遍历出来的下标) in 你要遍历的数据

<!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>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-for</h1>
        <ul>
            <li v-for="(v,i) in arr">{{v}}</li>
        </ul>
        <hr>
        <table border="1">
            <tr v-for="(v,i) in obj">
                <td>{i}</td>
                <td> {{v.name}} </td>
                <td> {{v.age}} </td>
​
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                arr:["ddd","dee","ttt","rvv"],
                obj:[
                    {name:"ccc1",age:10},
                    {name:"ccc2",age:11},
                    {name:"ccc3",age:12},
                    {name:"ccc4",age:13}
                ]
            }
        })
    </script>
</body>
</html>

v-bind(使用中最容易忽略的指令)

作用:就是给html的属性插入变量

语法:v-bind:html标签的属性="变量" 简写 :

<!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>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id="demodiv">
        <h1>v-bind</h1>
        <!-- HTML的属性插变量使用v-bind -->
        <a v-bind:href="ahref"> {{atext}} </a>
​
        <!-- 简写 v-bind:替换成 :  -->
        <a :href="ahref"> {{atext}} </a>
    </div>
    <script>
        new Vue({
            el:"#demodiv",
            data:{
                ahref:"http://www.baidu.com",
                atext:"点我去百度"
            }
        })
    </script>
    
</body>
</html>

YPX_早起的鸟儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue实现双向数据绑定的4个方法
祈澈菇凉
10-20 1107
可以通过自定义事件在组件之间实现双向数据绑定。父组件通过 props 传递数据给子组件，子组件在修改数据时，通过自定义事件将修改后的数据传递给父组件。<template><template>在子组件中，通过$emit方法触发input事件，并将修改后的数据传递给父组件。
mvvm双向绑定原理和实现
03-20
vue，mvvm双向绑定原理和实现 1.实现compile,进行模板的编译。指令和watcher更新函数； 2.实现Observe,监听所有的数据，并对变化数据发布通知； 3.实现watcher,作为一个中枢，接收到observe发来的通知，并执行...
v-model实现双向绑定、v-show、v-if、v-else-if、v-for的使用
qq_57423665的博客
04-18 1295
当数据源里的username的值改变，v-model 和 v-bind 绑定的元素的值都会发生改变，但是如果改变 v-bind 绑定的元素里的值，数据源里的username的值不会发生改变，而v-model 会。vue提供了v-model双向数据绑定指令,用来辅助开发者在不操作DOM的前提下，快速获取表单的数据。注意: v-else-if 指令必须配合v-if指令一起使用， 否则它将不会被识别!注意: v-else 指令必须配合v-if指令一起使用，否则它将不会被识别! v-for、v-show
Vue常用指令3(双向绑定指令/列表渲染指令)(v-modle/v-for)
最新发布
cyqwersj的博客
04-21 213
双向绑定：1. 数据改变后，呈现的页面结果会更新2. 页面结果更新后，数据也会随之而变作用：给表单元素(input、radio、select）使用，双向绑定数据，可以快速 获取或设置表单元素内容语法：v-model="变量"需求：使用双向绑定实现以下需求1. 点击登录按钮获取表单中的内容2. 点击重置按钮清空表单中的内容我们先把v-model段代码删掉，可以看到无论提交什么代码都不会在console显示出来现在我们像上面代码运行，然后输入账号密码已经成功显示出来了。
14、双向数据绑定指令（v-model（只能用于表单元素））
分享java学习路上的一些笔记，不足之处多多见谅。
06-02 354
这里我们还需要注意一个小点，就是我们这里的默认情况，以及我们这里的v-model应该在select上面绑定。注意：只有些表单元素才能使用我们v-model（select下拉选择框）页面的数据和我们的数据源的数据那边改变了都会被vue监听的到，然后同步。作用：快速获取表单数据！
Vue----双向绑定指令
emmmm.....
04-29 1507
文章目录3.7 双向绑定指令3.7.1 v-model 指令的修饰符 3.7 双向绑定指令 vue提供了 v-model双向绑定指令 ，用来辅助开发者在 不操作DOM 的前提下，快速 获取表单数 据。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi
vue基础-(数据双向绑定、常用指令、循环v-for和其他内置指令)
yzbyf的博客
11-26 413
双向绑定、常用指令（v-if和v-show）、循环v-for、其他内置指令
详解vue的双向绑定原理及实现
11-28
使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，所以这次特意花了几晚时间查阅资料和阅读相关源码，自己也实现一个简单版vue的双向绑定版本，先上个成果图来吸引各位：...
详解Vue双向数据绑定原理解析
12-07
要实现mvvm的双向绑定，需要实现如下几点： 1.实现一个数据监听器Observer，能够对对象的所有属性进行监听，发生变化时拿到最新值通知订阅者 2.实现一个解析器Compile，对每个子元素节点的指令进行扫描和解析，根据...
Vue原理剖析 实现双向绑定MVVM
01-19
1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环...
Vue实现双向绑定的方法
11-26
1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 为了便于说明原理与实现，本文相关代码主要摘自vue源码, 并进行了简化改造，相对较简陋，并未考虑到数组的处理、数据的循环...
vue.js -- 双向绑定指令
Sun_blog
07-08 764
目录v-model双向绑定指令表单中的双向绑定输入框（input）多行文本输入框（textarea）单选框（input-radio）多选框（input-checkbox）多选框双向绑定多选框数据填充多选框自定义属性选择列表（select）单选列表多选列表表单修饰符.lazy.number.trim v-model双向绑定指令 v-model 它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理。 v-model会忽略所有表单元素的value、checked、selected特性的初始值
vue模板解析（双大括号的解析）以及双向绑定原理
书中自有妍如玉的博客
08-19 2798
1.首先根据正则获取组件中所有的{{}}，将{{}}里的值取出在data中取出对应的值，以文本节点的方式放上去。4.然后根据 render function 方法最终返回string。5.最后通过vue的_update方法转化成对应的DOM。3.AST会根据generate得到render函数。2.vue有内置的编译器，会将组件转译成AST。...
vue添加博客功能、展示博客详情，主要用到表单、双向绑定、v-show、v-for、过滤器filter等
编程界明世隐的博客
12-22 821
做了一个表单添加的实例，非常适合入门 没有花时间去做样式，所以不太好看，效果是这样的: 1.用v-model来绑定表单中的各个内容，修改内容后会实时的反映到下面的博客总览中，比如： 博客标题：<input type="text" v-model="blog.title" class='input'> 作者： <select v-model="blog.author"> <...
vue双向绑定指令
weixin_42541725的博客
03-02 1009
vue双向绑定指令
v-model指令 - 双向数据绑定
王佳斌
07-27 3751
前言 什么是双向数据绑定 vue是一个mvvm框架，即数据双向绑定，它允许当数据发生变化的时候，视图也发生变化，当视图发生变化的时候，数据也会跟着同步变化。我们所说的数据双向绑定，一定是对于UI控件来说的，非UI控件不会涉及到数据双向绑定。 简述双向绑定 所谓双向绑定，当M层数据更改时自动更新V层数据，反之V层更改时自动更新M层数据。 与单项绑定区别 当M层数据更改时自动更新V层数据，而当V层更改...
Vue之v-model指令实现数据双向绑定
北海之灵的博客
08-08 2576
v-bind指令只能实现数据的单向绑定，从M绑定到V，无法实现双向绑定。 使用v-model指令，可以实现表单元素和Model中数据的双向绑定，并且v-model指令只能运用在表单元素中。 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" ...
vue基础--表单中双向绑定指令--v-model的使用
小白小白从不日别的博客
08-07 625
公共部分： <div id="root"></div> <script src="https://unpkg.com/vue@next"></script> 1.input框的数据双向绑定--v-model： <script> const app = Vue.createApp({ data() { return { .
vue3 数据双向绑定原理
07-27
总结起来，Vue3的数据双向绑定原理是通过Proxy来监听对象的变化，并通过订阅者Watcher来更新视图。这种方式相比于ES5中的Object.defineProperty具有更多的优点和灵活性。\[1\]\[2\]\[3\] #### 引用[.reference_title...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值