vue教程:数据与方法

news/2024/7/10 2:00:46 标签: vue

当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性,比如:

vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。比如:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

这里唯一的例外是使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

建议所有会用到的数据都预先在 data 内 声明,这样不至于将数据散落在业务逻辑中,难以维护。


http://www.niftyadmin.cn/n/887079.html

相关文章

git log 只看当前分支_学会这些,99.9%的git问题都可以轻松解决

Git是一款免费并且开源的分布式版本控制系统&#xff0c;旨在快速高效地处理各种大小型项目的内容变更。相比CVS和SubVersion等集中式版本控制软件&#xff0c;Git更安全&#xff0c;也更强大。本文要求你有一定的Git基础(曾经用过、知道Git能干什么)。安装一切都要从安装开始&…

android关闭系统分享,谷歌 Android 12 将禁止第三方分享 App,默认使用原生接口

IT之家 5 月 28 日消息 许多 Android App 都支持分享功能&#xff0c;当用户点击分享按钮&#xff0c;如果没有自行实现分享功能&#xff0c;就会调用 Android 系统的分享功能。此外&#xff0c;市面上也有许多第三方分享 App&#xff0c;在功能上更加易用&#xff0c;可以用来…

vue教程:模板语法

如果想显示{{}}标签&#xff0c;而不进行替换&#xff0c;使用 v-pre即可跳过这个元素和它的子元素的编译过程。 Vue.js只支持单个表达式&#xff0c;不支持语句和流控制。另外&#xff0c;在表达式中&#xff0c;不能使用用户自定义的全局变量&#xff0c;只能使用Vue白名单内…

jsp页面展示小数_Spring Boot (二):模版引擎 Thymeleaf 渲染 Web 页面

1. 什么是 Thymeleaf &#xff1f;虽然我们目前拥有许多十分优秀的前端框架&#xff0c;例如&#xff1a; Vue 、 React 等&#xff0c;非常适用于前后端分离的场景&#xff0c;前端可以独立部署成为服务&#xff0c;前后端从物理上完全进行隔离&#xff0c;降低程序耦合度。但…

跨域请求携带cookie

function ajaxPostRequestCipherMachine(url, param) {var url url;var dict {ret : false,errmsg : 请求失败};var jsonData param;$.ajax({type : "POST",url : url,async : false,data : jsonData,dataType : json,timeout : 10000,crossDomain:true, //设置跨…

状态输出导航栏html,CSS导航条菜单的实现

.blue#slatenavullia:hover,.blue#slatenavullia.current上图代码的注解为&#xff1a;id为menu中的ul的li。也就是导航栏里的每一个元素。鼠标放上去后会出来的效果。在后面又加了ul说明弹出的是一个ul元素整个这里面的css就是规定这个ul元素里的样式。说白了就是鼠标划过导航…

vue之事件处理

事件冒泡&#xff1a; stop修饰符&#xff1a;阻止事件冒泡&#xff0c;用于子元素上。 事件冒泡&#xff1a;当父元素和子元素同时绑定了事件时&#xff0c;子元素先触发事件&#xff0c;父元素再触发事件&#xff0c;这是大多数浏览器的默认行为。 <div id"app-3&…

tv英语域名注册_Sedo榜:域名just.me以33万元领衔

西部数码(west.cn)10月10日&#xff0c;新一期的sedo域名交易榜上共89个域名超2000美元成交。其中&#xff0c;英文域名cene.com以12,500美元成交&#xff0c;约合人民币8.4万元&#xff1b;国别域名just.me则以50,000美元易主&#xff0c;约合人民币33万元。域名cene.com注册于…