gitHub地址:https://github.com/manlili/vue_learn里面lesson04

一 双括号用来数据绑定

(1)写法一: {{message}},这种可以实时响应

(2)写法二: {{*message}},单次插值,今后的数据变化就不会再引起插值更新了

(3)双括号标签也可以用在属性上

举个栗子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue插值</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <style type="text/css">

            .lili-xiaoman {

                color: red;

            }

        </style>

    </head>

    <body>

        <div class="test">

            <p>{{message}}</p> <!--这个值可以实时响应-->

            <p>{{*message}}</p> <!--单次插值,今后的数据变化就不会再引起插值更新了,例如在控制台写入:myVue.message=123-->

            <p class="lili-{{message}}">双括号标签也可以用在属性上</p>

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    message:"xiaoman"

                }

            })

        </script>

    </body>

</html>

当我在控制台改变message时,{{*message}}不会跟着改变值

二 双括号里面可以为javascript单元表达式

比如(只支持单元表达式)

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

但是不支持

<!-- 这是一个语句，不是一个表达式： -->

{{ var a = 1 }}

<!-- 流程控制也不可以，可改用三元表达式 -->

{{ if (ok) { return message } }}

完整测试代码如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue双括号里面的内容</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <div class="test">

            <p>{{message+1}}</p> <!--JavaScript 表达式,但是只支持单元表达式-->

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    message:12

                }

            });

        </script>

    </body>

</html>

上面的输出是13

三 双括号可以放过滤器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue数据绑定</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <div class="test">

            <p>{{message | sum}}</p>

        </div>

        <script type="text/javascript">

            Vue.filter("sum", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面

                return value + 4;

            });

            var myVue = new Vue({

                el: ".test",

                data: {

                    message: 12

                }

            });

        </script>

    </body>

</html>

上面代码的输出值是16

四 用指令绑定数据( 指令 是特殊的带有前缀 v- 的特性)

举个v-if的例子:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue数据绑定</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <div class="test">

            <p v-if="isShow">isShow控制着我是否显示1</p>

            <p v-if="!isShow">isShow控制着我是否显示2</p>

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    isShow: true,

                }

            });

        </script>

    </body>

</html>

上面只显示第一个div

五 v-bind绑定数据

需要注意事项:

(1) 直接在属性里面写{{}}也是正确的,因为Vue内部渲染的时候会把属性里面的双括号转为v-bind,这样会比直接用v-bind效率效率稍微慢一点

(2) v-bind可简写为 :

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue数据绑定</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <div class="test">

            <a href={{url}}>点击我跳到百度首页</a> <!--这种写法没错,实际上在内部特性插值会转为 v-bind 绑定,这样会稍微降低效率-->

            <a v-bind:href="url">点击我跳到百度首页</a>  <!--简写为:href-->

            <div style="color: {{colorA}}">我是红色</div> <!--这种写法没错,实际上在内部特性插值会转为 v-bind 绑定,这样会稍微降低效率-->

            <div v-bind:style="{color: colorB}">我是绿色</div> <!--简写为:style-->

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                data: {

                    url: "https://www.baidu.com/",

                    colorA: 'red',

                    colorB: 'green'

                }

            });

        </script>

    </body>

</html>

六 v-on绑定数据

(1) v-on是在vue的methods里面实现的

(2) v-on可以简写为 @

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>vue数据绑定</title>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    </head>

    <body>

        <div class="test">

            <button v-on:click="goAction()"> <!--可以简写为@click-->

                点击我跳到百度

            </button>

        </div>

        <script type="text/javascript">

            var myVue = new Vue({

                el: ".test",

                methods: {

                    goAction: function () {

                        location.href = "https://www.baidu.com/";

                    }

                }

            });

        </script>

    </body>

</html>

Vue数据绑定的更多相关文章

  1. 浅析vue数据绑定

    前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...

  2. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  3. 17: VUE数据绑定 与 Object.defineProperty

    VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...

  4. Vue数据绑定(一)

    Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...

  5. (三)vue数据绑定及相应的命令

    vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...

  6. 「每日一题」有人上次在dy面试，面试官问我：vue数据绑定的实现原理。你说我该如何回答？

    关注「松宝写代码」,精选好文,每日一题 ​时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...

  7. vue数据绑定原理

    一.定义 vue的数据双向绑定是基于Object.defineProperty方法,通过定义data属性的get和set函数来监听数据对象的变化,一旦变化,vue利用发布订阅模式,通知订阅者执行回调函 ...

  8. vue 数据绑定实现的核心 Object.defineProperty()

    vue深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...

  9. vue数据绑定数组，改变元素时不更新view问题

    关于这个问题,官网上说的很清楚官方文档  写个例子HTML<body> <div class="box"> <div v-for="aa i ...

随机推荐

  1. eclipse 手动/自动安装插件

    只要你的Eclipse的压缩包,一般为xxx.zip,其内部包含了对应的features和plugins文件夹,(不管是否还有content.jar和artifacts.jar)则都可以: 要么手动解 ...

  2. 爆料喽！！！开源日志库Logger的使用秘籍

    日志对于开发来说是非常重要的,不管是调试数据查看.bug问题追踪定位.数据信息收集统计,日常工作运行维护等等,都大量的使用到.今天介绍著名开源日志库Logger的使用,库的地址:https://git ...

  3. [持续更新]UnsatisfiedLinkError常见问题及解决方案

    想必很多开发者和我们一样,遇到过许多UnsatisfiedLinkError的困难,着实令人头疼,现在总结一下,希望能帮助更多的人. 常见错误 lib库不同目录下的SO文件参差不齐. lib库目录下的 ...

  4. D3D的绘制

    一.D3D中的绘制 顶点缓存和索引缓存:IDirect3DVertexBuffer9 IDirect3DIndexBuffer 使用这两缓存而不是用数组来存储数据的原因是,缓存可以被放置在显存中,进行 ...

  5. 二叉搜索树BinarySearchTree（C实现）

    头文件—————————————————————————————— #ifndef _BINARY_SEARCH_TREE_H_ #define _BINARY_SEARCH_TREE_H_ #inc ...

  6. 100款免费的圣诞节矢量图标素材（PSD & SVG）

    圣诞节的脚步越来越近了.今天,我们给大家收集了100个美丽的圣诞矢量图标素材.这套圣诞矢量图标集包含 PSD 和 SVG 两种格式,基于 Creative Commons 协议,可以在商业和个人项目中 ...

  7. 【团队冲刺总结】一个编码人员的反(tu)思(cao)

    消失了半个多月了啊,算算时间,好像确实有近个把月没有好好的写博客来了.我一直很想写博客的,之前有老师问过写博客的动力是什么.我想了想,我觉得可能是我比较喜欢看书吧,不管是专业书还是小说(好吧,我承认, ...

  8. Week4 结对编程

    1.照片 1.1  结对编程参与者:李文涛.黎柏文 1.2  展示照片 2.结对编程的优点&缺点 2.1 优点 2.1.1.两人分工合作,减少了工作量 2.1.2.结对编程的伙伴往往能提供不同 ...

  9. Struts 2常用的Ajax标签

    Struts 2对Ajax的支持 •Struts 2对Ajax提供了很好的支持 –Struts 2.1提供了基于Dojo的Ajax标签,对Ajax操作进行了进步封装,可以更快捷容易的使用Ajax   ...

  10. 重构第30天 尽快返回 (Return ASAP)

    理解:把条件语句中复杂的判断用尽快返回来简化. 详解:如首先声明的是前面讲的”分解复杂判断“,简单的来说,当你的代码中有很深的嵌套条件时,花括号就会在代码中形成一个长长的箭头.我们经常在不同的代码中看 ...