Vue初体验(八)属性和方法
来源:互联网 发布:查看端口有没有被占用 编辑:程序博客网 时间:2024/05/20 08:26
1、Vue会代理data对象里面所有的属性!!
这句话的意思就是,只有在data对象里面明确的写着的属性,Vue才会真的监听到属性的变化,当我们变化这个属性的值的时候,才会引发界面的渲染,否则,Vue无法监听到这种渲染,就不会引发界面渲染。
示例demo:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>vue学习</title> <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script></head><body><div id="app"> <span>{{message}}</span> <span>{{message2}}</span></div><script> var vm = new Vue({ el:"#app", data:{ message:"hello" } }); vm.message = 'world'; vm.message2 = 'world';</script></body></html>
运行结果就是界面上只展示一个world。因为我们的data中只有message,而没有message2.
2、Vue的实例属性
什么是实例属性?顾名思义,实例属性就是实例化了的属性,相当于一个构造函数中this.name = name;this.age = age; 的意思。
实例的概念是针对JavaScript中的原型的概念来区别的。原型就是我没必要实例化这个对象,本身就存在的原型的方法或者原型的属性。
如果你学过java,实例的意思类似于java中的成员变量,而原型相当于java中的静态变量。
在Vue中,为了区分,把所有的实例属性或者方法,前面都加上了”$”符号。
var vm = new Vue({ el:"#app", data:{ message:"hello" }});console.log(vm.$el);//获取了id为app的节点。console.log(vm.$data);//获取了属性为message的对象。
3、Vue的实例方法
// $watch 是一个实例方法vm.$watch('message', function (newVal, oldVal) { // 这个回调将在 `vm.message` 改变后调用})
阅读全文
0 0
- Vue初体验(八)属性和方法
- Vue初体验(九)计算属性
- Vue.js学习系列(十二)---属性和方法
- vue计算属性的使用和vue实例的方法
- Vue初体验(一),最简单的Vue示例
- vue-属性与方法
- Vue属性与方法
- Vue初体验(六)组件component
- Vue.js初体验
- Vue.js初体验
- vue.js初体验
- Vue.js初体验
- vue.js 初体验
- Vue.js初体验
- vue 计算属性computed和观察watch 和方法methods
- (八)JavaScript Date对象属性方法
- Vue基础(计算属性和观察者)
- vue样式(style)和属性(class)绑定的几种基本方法
- NYOJ 71 独木舟上的旅行
- 多线程编程之基础概念
- 汇编语言: 用减奇数次数的方法,求一个数的近似平方根,这个平方根是一个整数。
- POJ 1934 Trip 笔记
- 机房收费系统之四(基本数据设定窗体和充值窗体)
- Vue初体验(八)属性和方法
- ZOJ--1005:Jugs(dfs)
- 傅里叶-梅林变换实现图像配准
- map和set
- JAVA Swing日期选择控件datepicker的使用
- Springboot MyBatis多数据源切换
- python strip()函数 介绍
- 移动端开发的简单适配方案
- jilu