Vue数据绑定
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数据绑定的更多相关文章
- 浅析vue数据绑定
前言:最近团队需要做一个分享,脚进脑子,不知如何分享.最后想着之前一直想研究一下 vue 源码,今天刚好 "借此机会" 研究一下. 网上研究vue数据绑定的文章已经非常多了,但是自 ...
- Vue数据绑定和响应式原理
Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
- 17: VUE数据绑定 与 Object.defineProperty
VUE数据绑定原理:https://segmentfault.com/a/1190000006599500?utm_source=tag-newest Object.defineProperty(): ...
- Vue数据绑定(一)
Contents Vue作为当下炙手可热的前端三大框架之一,一直都想深入研究一下其内部的实现原理,去学习MVVM模式的精髓.如果说MVVM是当下最流行的图形用户界面开发模式,那么数据绑定则是这一模式的 ...
- (三)vue数据绑定及相应的命令
vue数据绑定及相应的命令 {{ Text }} 双括号进行数据渲染 动态绑定数据 例如:{{message}} data: { return{ message: 'Hello Vue!' } } 2 ...
- 「每日一题」有人上次在dy面试,面试官问我:vue数据绑定的实现原理。你说我该如何回答?
关注「松宝写代码」,精选好文,每日一题 时间永远是自己的 每分每秒也都是为自己的将来铺垫和增值 作者:saucxs | songEagle 来源:原创 一.前言 文章首发在「松宝写代码」 2020. ...
- vue数据绑定原理
一.定义 vue的数据双向绑定是基于Object.defineProperty方法,通过定义data属性的get和set函数来监听数据对象的变化,一旦变化,vue利用发布订阅模式,通知订阅者执行回调函 ...
- vue 数据绑定实现的核心 Object.defineProperty()
vue深入响应式原理 现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简 ...
- vue数据绑定数组,改变元素时不更新view问题
关于这个问题,官网上说的很清楚官方文档 写个例子HTML<body> <div class="box"> <div v-for="aa i ...
随机推荐
- SLAM中的EKF,UKF,PF原理简介
这是我在知乎上问题写的答案,修改了一下排版,转到博客里. 原问题: 能否简单并且易懂地介绍一下多个基于滤波方法的SLAM算法原理? 目前SLAM后端都开始用优化的方法来做,题主想要了解一下之前基于 ...
- c++ 模板元编程的一点体会
趁着国庆长假快速翻了一遍传说中的.大名鼎鼎的 modern c++ design,钛合金狗眼顿时不保,已深深被其中各种模板奇技淫巧伤了身...论语言方面的深度,我看过的 c++ 书里大概只有 insi ...
- dSYM atos crash log 定位到代码行的方法(转)
做iOS开发的时候,常常会遇到crash,需要分析call stack的时候.有时候App在别人的设备崩溃,把crash report在自己的机器上打开,Xcode没有自动的进行符号化.这时候就需要自 ...
- 【解决方案】HTTP could not register URL http://+:6001/
Failed to host the DeployerNotificationReceiverSystem.ServiceModel.AddressAccessDeniedException: HTT ...
- DDD:谈谈数据模型、领域模型、视图模型和命令模型
背景 一个类型可以充当多个角色,这个角色可以是显式的(实现了某个接口或基类),也可以是隐式的(承担的具体职责和上下文决定),本文就讨论四个角色:数据模型.领域模型.视图模型和命令模型. 四个角色 数据 ...
- 前端们,gulp该用起来了,简单的demo入门——gulp系列(一)
gulp.grunt前端自动化工具,只有用过才知道多么重要. 它们问世这么久了?你真的用过吗? 写个简单的less.watch任务的demo分享———— 1.准备: 安装全局node.npm,这个教程 ...
- 15款提高工作效率的 Web 项目管理工具
在今天的快节奏的商业世界里,能够通过计划.组织.和管理资源池以及评估开发资源的模式来管理一个项目,是一个很艰巨的任务. 有很多现成的项目管理软件来帮助减轻项目管理的负担,并且他们几乎覆盖了所有类型的业 ...
- [python]decimal常用操作和需要注意的地方
decimal模块 简介 decimal意思为十进制,这个模块提供了十进制浮点运算支持. 常用方法 1.可以传递给Decimal整型或者字符串参数,但不能是浮点数据,因为浮点数据本身就不准确. 2.要 ...
- MySQL安全问题(防范必知)
对于任何一种数据库来说,安全问题都是非常重要的.如果数据库出现安全漏洞,轻则数据被窃取,重则数据被破坏,这些后果对于一些重要的数据库都是非常严重的.下面来从操作系统和数据库两个层对MySQL的安全问题 ...
- Android 学习笔记之ContentProvider实现数据共享....
PS:最近听老师说打算让我参与企业的app制作,让我加快学习的进度...好吧,貌似下周还有考试...貌似实验室这个app也要做...暂时不管了...那就只能加快进度了,感觉略微的有点激动和紧张,总算是 ...