Vue入门之数据绑定(小结)_vue绑定attr资源-CSDN文库

39 浏览量 2020-11-30 02:03:50 上传评论收藏 229KB PDF 举报

资源推荐

资源详情

资源评论

Vue入门之数据绑定入门之数据绑定(小结小结)

1. 什么是双向绑定？什么是双向绑定？

Vue框架很核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签

的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。

这样以来，就彻底变革了之前Dom的开发方式，之前Dom驱动的开发方式尤其是以jQuery为主的开发时代，都是dom变化后，触发js事件，然后在事件中通过js代码取得标签的变

化，再跟后台进行交互，然后根据后台返回的结果再更新HTML标签，异常的繁琐。有了Vue这种双向绑定，让开发人员只需要关心json数据的变化即可，Vue自动映射到HTML上，

而且HTML的变化也会映射回js对象上，开发方式直接变革成了前端由数据驱动的开发时代，远远抛弃了Dom开发主导的时代了。

2. Vue绑定文本绑定文本

数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值，比如模板引擎：handlebars中就是用的{{}}.

创建的Vue对象中的data属性就是用来绑定数据到HTML的。参考如下代码：

<span>Message: {{ msg }}</span>

<script>

var app = new Vue({ // 创建Vue对象。Vue的核心对象。

el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器

data: { // data: 是Vue对象中绑定的数据

msg: 'Hello Vue!' // message 自定义的数据

}

});

</script>

3. 绑定数据中使用绑定数据中使用JavaScript表达式表达式

对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持。

<span>Message: {{ msg + ' - ' + name }}</span>

<script>

var app = new Vue({ // 创建Vue对象。Vue的核心对象。

el: '#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器

data: { // data: 是Vue对象中绑定的数据

msg: 'Hi', // message 自定义的数据

name: 'flydragon' // name自定义的属性，vue可以多个自定义属性，属性类型也可是复杂类型

}

});

</script>

结果：

Hi - flydragon

当然Vue还可以支持表达中的任何计算、函数处理等。参考下面的综合点的案例。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Vue入门之数据绑定-表达式运算</title>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

</head>

<body>

<div id="app">

{{ msg + ' - ' + name }}

<p>

{{ isOk ? '123' : '456' }}

</p>

<p>我的年龄是： {{ age *2 }}</p>

</div>

<script>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余5页未读，立即下载

内容反馈

weixin_38735804

粉丝: 5
资源: 966

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip