Vue.js 學習筆記
阿新 • • 發佈：2018-12-10
{{}}顯示js介面傳過來的資料v-bind繫結提示資訊v-if條件語句v-for繫結陣列資料v-on新增一個事件監聽器，通過它可以呼叫Vue例項中定義的方法v-model表單輸入和應用狀態之間的雙向繫結Vue.component()定義元件v-html用於輸出真正的htmlv-pre用於顯示{{}}而不進行替換，可以跳過這個元素和它的子元素的編譯過程
雙向資料繫結
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< var app = new Vue({
el:'#app',
data:{
name: ''
}
})
可以通過
app.$el訪問該元素，Vue提供了很多的屬性和方法都可以通過$開頭
一個計時器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue learn</title> var padDate = function (value) {
return value < 10 ? '0' + value : value;
};
var app = new Vue({
el: '#app',
data: {
date:new Date()
},
filters:{
formateDate:function (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 minuates = padDate(date.getMinutes());
var seconds = padDate(date.getSeconds());
return year + '年' + month + '月' + day + '日' + " " + hours + ":" + minuates + ":" + seconds;
}
},
mounted:function () {
var _this = this;
this.timer = setInterval(function () {
_this.date = new Date();
},1000);
},
beforeDestroy: function () {
if(this.timer){
clearInterval(this.timer);
}
}
})
- 在
{{}}中不但可以繫結屬性值，還可以使用JavaScript表示式進行簡單的運算、三元運算等
<div id="app">
{{number/10}}</br>
{{is ? 'yes':'no'}}</br>
{{text.split('').reverse().join('')}}</br>
</div>
var app = new Vue({
el:'#app',
data:{
number: 100,
is: false,
text: 'Martin'
}
})
v-if 用法
當其表示式的值改變時，相應地將某些行為應用到DOM上
<div id="app" align="center">
<p v-if="show">show this message</p>
</div>
var app = new Vue({
el:'#app',
data:{
show:true
}
})
v-bind 用法
動態更新html元素的屬性
<div id="app" align="center">
<a v-bind:href="url">link</a>
<img v-bind:src="imgUrl">
</div>
var app = new Vue({
el:'#app',
data:{
url:'https://www.baidu.com/',
imgUrl:'https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png'
}
})
v-on
用來繫結事件監聽器