app.$el
访问被绑定的元素- data可以绑定js对象实现双向绑定
- Vue实例的生命周期
- v-pre 不渲染
- {{表达式}}
- filters 过滤器
- 计算属性的getter和setter方法
- 用key属性鉴别独立性
- 总结
app.$el
访问被绑定的元素
使用Vue实例的变量名称+ $el
可以直接访问实例中被el属性绑定的HTML元素,方便快速定位Vue的元素。
data除了自己设置属性,也可以直接绑定一个对象,这时候依然是双向绑定
var myData = {a: 10}; var app = new Vue({ el: "#app", data: myData }); console.log("myData.a is " + myData.a); console.log("Vue实例的a属性是:" + app.a); console.log("改变Vue实例的a属性:"); app.a = 99; console.log("myData.a 现在是 " + myData.a);
可以看到直接把对象的属性弄到了Vue实例中,改变Vue实例的属性,原来的属性跟着一起变化。
Vue实例的生命周期
Vue实例的生命周期就像jQuery在DOM加载完成的时候自动加载一样。
-
Vue实例常用的生命周期钩子有:
created
:实例创建完成后调用,此时完成了数据观测,但是$el还不可用,数据还未挂载到实例中。常用于数据初始化。mounted
:el挂载到实例上的时候调用,一般业务逻辑就从此开始beforeDestroy
:实例销毁之前调用,主要解绑一些使用addEventListener添加的事件。
钩子直接使用名称,作为Vue实例的属性进行操作:
var myData = {a: 10, date: new Date()}; var app = new Vue({ el: "#app", data: myData, created: function () { console.log(this.a); }, mounted: function () { var _this = this; this.timer = setInterval(function () { _this.date = new Date(); }, 1000); } });
v-pre 不编译
加在元素上之后不进行该元素和其所有子元素的渲染,原样输出
{{ 表达式的限制 }}
在双花括号之间的表达式,只能是单个表达式,变量只能使用Vue实例的变量,不能使用语句和表达式。
一些全局变量,只能使用Vue白名单之内的全局变量,先理解为JS自带的Math和Date等变量。
filters 过滤器
很像Django模板渲染的过滤器,用一个管道符号加上过滤器的标识符即可。实际上是将管道符前边的内容交给后边的过滤器进行处理,渲染成处理后的内容。
过滤器是Vue实例中的filters属性,键值对为过滤器名称:匿名方法。
var myData = { a: 10, date: new Date() }; var app = new Vue({ el: "#app", data: myData, created: function () { console.log(this.a); this.a = 30; }, mounted: function () { var _this = this; this.timer = setInterval(function () { _this.date = new Date(); }, 1000); }, filters: { filterDate: function (value) { return value + " 过滤后的内容"; } } } );
过滤器实际上是以被过滤对象为参数的函数,过滤器还可以串联。还可以传入额外的参数。第一个参数默认是被过滤的对象。
<div id="app"> {{date|filterDate|filter2("gugugug","saner")}} </div> <script src="vue.js"></script> <script> var myData = { a: 10, date: new Date() }; var app = new Vue({ el: "#app", data: myData, created: function () { console.log(this.a); this.a = 30; }, mounted: function () { var _this = this; this.timer = setInterval(function () { _this.date = new Date(); }, 1000); }, filters: { filterDate: function (value) { return value + " 过滤后的内容"; }, filter2: function (value,a,b) { return value + a + b; } } } ); </script>
过滤器常用于处理简单的文本变换,如果要处理更加复杂的逻辑,一般使用计算属性。
计算属性的getter和setter方法
计算属性除了直接设置为一个匿名函数之外,还可以设置为get和set对应的对象,读取计算属性就是调用get方法,直接设置计算属性就会调用set方法。
var app = new Vue({ el: "#app", data: { a:10 }, computed: { realA:{get:function () { var b = parseInt(Math.random() * 10) + this.a; return b;}, set:function (value) { console.log("Set被触发了"); } }, now:function () { return Date.now(); } } } );
如果直接显示a的值,发现每次都是随机的。如果直接设置a的值,就会在控制台打印出语句。get函数的return就是实际计算出的值,而set函数中的value参数就是要设置的值。
计算属性牛逼的是可以依赖其他计算变量,以及依赖其他Vue实例的变量,这样在组件化的时候非常方便。
计算属性和函数的区别是计算属性有缓存,依赖的内容没有变化,就不会重新计算,所以如果一个计算变量没有依赖,那么也不会更新,而函数只要调用就会更新。上边的now计算属性只要生成了,就一直不会自动变化。