Vue实例与数据绑定
2018-03-20 - 简书.png
var app = new Vue({
//选项
})
变量app就代表了这个Vue实例
必不可少的选项el
el用于指定一个页面中已存在的DOM元素来挂载Vue实例，它可以是HTMLElement，也可以是CSS选择器
<div id="app"></div>
var app = new Vue({
el: document.getElementByI('app')
})
挂载成功后，通过app.$el来访问该元素。
生命周期
var app = new Vue({
el: '#app',
data: {
a: 2
},
created: function (){
console.log(this.a);
},
mounted: function (){
console.log(this.$el);
}
})
Vue生命周期钩子与JQuery类似
-
created实例创建完成后调用，但尚未挂载，$el不可用 -
mounted el挂载到实例上后调用，一般在这里开始第一个业务逻辑 -
beforeDestroy实例销毁之前调用，主要解绑一些使用addEventListener监听的事件等。
插值与表达式
使用双大括号{{}}是最基本的文本插值方法，它会自动将双向绑定的数据显示出来。
<div id="app">
{{ book }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
book: 'Vue实战'
}
})
</script>
内容实时替换。
<div id="app">
{{ date }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
date: new Date()
},
mounted: function (){
var _this = this; //声明一个变量指向Vue实例this,保证作用域一致
this.timer = setInterval(function(){
_this.date = new Date();
},1000);
},
beforeDestroy: function (){
if (this.timer) {
clearInterval(this.timer);
//在Vue实例销毁前，清除定时器
}
}
})
</script>
这里的{{ date }}输出的是浏览器默认的时间格式。
若想输出HTML，则
<div id="app">
<span v-html="link"></span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
link: '<a href="#">这是一个链接</a>'
}
})
</script>
除了綁定值，还可以进行简单的运算
<div id="app">
{{ number / 10 }}
{{ isOK ? '确定' : '取消' }}
{{ text.split(',').reverse().join(',') }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 100,
isOK: false,
text: '123,456'
}
})
</script>
Vue.js只支持单个表达式，不支持语句和流控制。
过滤器
Vue.js支持在{{}}插值的尾部添加一个管道符|
<div id="app">
{{ date | formatDate }}
</div>
<script>
var padDate = function(value) {
return value < 10 ? '0' + value : value;
};
var app = new Vue ({
el: '#app',
data: {
date: new Date()
},
filters: {
formatDate: function (value) {
//value过滤数据
var date = new Date(value);
var year = date.getFullYear();
var month = padDate(date.getMonth() + 1);
var day = padDate(date.getDate());
var hours = padDate(date.getHours());
var minutes = padDate(date.getMinuters());
//将整理好的数据返回出去
return year+'-'+month+'-'+day+''+hours+':'+minutes+':'+seconds;
}
},
mounted: function () {
var _this = this;
//声明一个变量指向Vue实例this，保证作用域一致
this.timer = setInterval(function() {
_this.date = new Date();
},1000);
},
beforeDestroy: function () {
if (this.timer) {
clearInterval(this.timer);
}
}
})
</script>
