VUE
構(gòu)建數(shù)據(jù)驅(qū)動的web界面的庫煮嫌，技術(shù)上重點(diǎn)在于MVVM的ViewModel層
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>{{msg}}</div>
<script src="vue.js"></script>
<script>
var data = {
msg: 'hello'
}
new Vue({
el:'div',
data:data
})
</script>
</body>
</html>
如果要改變顯示內(nèi)容
data.msg = 'world'
data.msg = '瑞源先生'
插值
語法： {{key}}
將數(shù)據(jù)中的數(shù)據(jù)同步到頁面中的過程；
var data = {
msg:'歐走不力大后天呢 色'
}
var demo = new Vue({
el:'.my-app',
data:data
})
不僅僅可以還可以插在Dom節(jié)點(diǎn)內(nèi)容中抱虐，還可以插入到屬性中：
<div id="app" class="my-app"><span data-id="{{id}}" style={{styles}}>關(guān)注</span>{{msg}}</div>
<script src="vue.js"></script>
<script>
var data = {
msg:'瑞源先生早上好',
styles:"color:orange",
id:20
}
var demo = new Vue({
el:'.my-app',
data:data
})
如果我想更改其中一個昌阿，可以在后面接著寫：
data.styles= 'color:green'
關(guān)注的顏色就從橘黃色變成了綠色；
單次插值
- 數(shù)據(jù)插入頁面中恳邀，不能再次修改懦冰；
###如果我們不想讓初始值（只想插值一次）發(fā)生變化，我們可以在key前面加上一個 * ,{{ *key}}
<div id="app" class="my-app"><span data-id="{{id}}" style={{*styles}}>關(guān)注</span>{{msg}}</div>
這樣就一直是橘黃色了谣沸；
同樣的案例
- 修改文案內(nèi)容：
data.msg = '瑞源學(xué)堂歡迎您儿奶！'
- 如果不想修改初始文案的內(nèi)容（只想插值一次）我們同樣可以在key前面加上一個*,{{*key}}，
<div id="app" class="my-app"><span data-id="{{id}}" style={{styles}}>關(guān)注</span>{{*msg}}</div>
這樣文案內(nèi)容就不會發(fā)生變化鳄抒；
標(biāo)簽過濾
語法{{{key}}}闯捎，將數(shù)據(jù)中的html標(biāo)簽渲染到頁面中椰弊；
- 我們想在文案中插入一個標(biāo)簽，把“瑞源先生早上好瓤鼻！”改成“【深圳】瑞源先生在上好秉版！”，【深圳】單獨(dú)用一個標(biāo)簽包裹茬祷，加粗清焕；
var data = {
msg:'<strong>【深圳】</strong> 瑞源先生早上好！',
styles:"color:orange",
id:20
}
這樣頁面會把<strong></strong>標(biāo)簽顯示出來祭犯；
我們需要這樣操作：
<div id="app" class="my-app"><span data-id="{{id}}" style={{styles}}>關(guān)注</span>{{{*msg}}}</div>
這樣就可以了秸妥；
插值表達(dá)式
插值的過程中，我們可以對插入的數(shù)據(jù)做運(yùn)算處理沃粗，或調(diào)用某些js方法粥惧；
- 如果我們想在id數(shù)值面前渲染一個人民幣的符號￥
<div id="app" class="my-app">{{'￥' + id}}</div>
var data = {
id:20
}
var demo = new Vue({
el:'.my-app',
data:data
})
￥20就渲染出來了
- 我們還可以在{{里面進(jìn)行運(yùn)算處理}}，我們可以進(jìn)行加減乘除最盅，字符串拼接突雪，對數(shù)據(jù)進(jìn)行js方法的調(diào)用;
- 在里面執(zhí)行的運(yùn)算也是要遵循運(yùn)算符的優(yōu)先級；
<div id="app" class="my-app">{{'￥' + id * 2 }}</div>
結(jié)果為￥40
<div id="app" class="my-app">{{'￥' + id * 2 }}<span>{{styles}}</span></div>
var data = {
styles:'color:orange',
id:20
}
頁面渲染為： ￥40color:green
- 如果我們想要color:green為大寫
<div id="app" class="my-app">{{'￥' + id * 2 }}<span>{{styles.toUpperCase()}}</span></div>
輸出為：￥40COLOR:GREEN
插值過濾器
語法{{ key | filter }}
VUE.JS的9289行為我們提供一些內(nèi)置的過濾器涡贱，我們可以直接對插值調(diào)用咏删，
比如我們要對數(shù)據(jù)id:40的值渲染變成美元$40
<div id="app" class="my-app">{{id | currency}}</div>
var data = {
styles:'color:orange',
id:40
}
var demo = new Vue({
el:'.my-app',
data:data
})
頁面渲染為：$40.00
{{id * 3 | currency}}
頁面渲染為： $120.00
{{id | currency '￥'}} 可以使$符號轉(zhuǎn)換為人民幣￥符號
-
過濾器提供了哪些方法？
- json
- capitalize
- uppercase
- lowercase
- currency
- pluralize
- debounce
大寫轉(zhuǎn)換：uppercase
<div id="app" class="my-app">{{id * 3 | currency}}
<p>{{styles | uppercase}}</p>
</div>
COLOR:GREEN
- 小寫轉(zhuǎn)換：lowercase
<p>{{tips | lowercase}}</p>
var data = {
styles:'color:orange',
tips:'HEllo,WORLd!',
id:40
}
hello,world!
- 首字母大寫 capitalize
- 渲染json格式 json
下面兩個可以先跳過问词，待學(xué)了更多知識（v-for,methods等）再回頭來學(xué)習(xí)
- pluralize
功能: 如果只有一個參數(shù)督函，復(fù)數(shù)形式只是簡單地在末尾添加一個 “s”。如果有多個參數(shù)激挪，參數(shù)被當(dāng)作一個字符串?dāng)?shù)組侨核，對應(yīng)一個、兩個灌灾、三個…復(fù)數(shù)詞。如果值的個數(shù)多于參數(shù)的個數(shù)悲柱，多出的使用最后一個參數(shù)锋喜。
參數(shù)：{String} single, [double, triple, ...
<div class="test">
{{message}} {{message | pluralize 'item'}} <!--輸出: 1 item-->
<ul v-for="item in lili">
<li>
{{item}} {{item | pluralize 'item'}} <!--輸出: 1 item 2 items 3 items-->
</li>
</ul>
<ul v-for="item in lili">
<li>
{{item}} {{item | pluralize 'st' 'rd'}} <!--輸出: 1 st 2 rd 3 rd-->
</li>
</ul>
<ul v-for="item in man">
<li>
{{item}} {{item | pluralize 'item'}} <!--輸出: 1 item 2 items 3 items-->
</li>
</ul>
<ul v-for="item in man">
<li>
{{item}} {{item | pluralize 'st' 'rd'}} <!--輸出: 1 st 2 rd 3 rd-->
</li>
</ul>
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
message: 1,
lili: [1,2,3],
man: {
name1: 1,
name2: 2,
name3: 3
}
}
})
</script>
- debounce
(1)限制： 需在@里面使用
(2)參數(shù):{Number} [wait] - 默認(rèn)值： 300
(3)功能：包裝處理器，讓它延遲執(zhí)行 x ms豌鸡， 默認(rèn)延遲 300ms嘿般。包裝后的處理器在調(diào)用之后至少將延遲 x ms， 如果在延遲結(jié)束前再次調(diào)用涯冠，延遲時長重置為 x ms炉奴。
<div class="test">
<button id="btn" @click="disappear | debounce 10000">點(diǎn)擊我,我將10秒后消失</button>
</div>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
methods: {
disappear: function () {
document.getElementById("btn").style.display= "none";
}
}
})
</script>
動態(tài)插值
- 在插入的過程中，動態(tài)的對值進(jìn)行修改蛇更；
語法：
computed:{
key:function(){
return newKey
}
}
示例：
<div id="app" class="my-app">
<p>{{result}}</p>
<p>{{result | currency}}</p>
</div>
var demo = new Vue({
el:'.my-app',
computed:{
result:function(){
return 40
}
}
})
頁面渲染為
40
$40.00
- 我們來看看result這個函數(shù)內(nèi)的作用域是什么瞻赶，console.log(this)
var demo = new Vue({
el:'.my-app',
computed:{
result:function(){
console.log(this)
return 40
}
}
})
- this就是Vue實(shí)例化對象赛糟，在里面能找到result，值為40砸逊，function就是在實(shí)例化對象上執(zhí)行璧南，可以訪問Vue對象上的屬性；
- 可以應(yīng)用表達(dá)式過濾器师逸；
來實(shí)現(xiàn)一個輸入框的值顯示的小例子：(非V-方法）
<div id="app">
<input type="text" id="inp">
<span>{{result}}</span>
</div>
<script src="vue.js"></script>
<script>
var demo = new Vue({
el:"#app",
data:{
value:0
},
computed:{
result:function(){
return this.value * 2
}
}
})
// 當(dāng)input輸入完之后獲取它的值司倚，更新demo的value屬性
document.getElementById('inp').onkeyup = function(e){
//獲取輸入框里面輸入的值
var val = e.target.value;
//賦值給demo下的value
demo.value = val;
}
</script>
此時在輸入框輸入數(shù)字就會在后面實(shí)時顯示結(jié)果
數(shù)據(jù)的雙向綁定
- vue提供了v-model="",屬性值是與vue中綁定數(shù)據(jù)中的數(shù)據(jù)；
- 當(dāng)視圖中一些操作篓像，會修改到vue中的數(shù)據(jù)动知，同樣，vue的數(shù)據(jù)被修改時會映射到視圖中
<div id="app">
<input type="text" id="inp" v-model="value">
<span>{{result | currency}}</span>
</div>
<script src="vue.js"></script>
<script>
var demo = new Vue({
el:"#app",
data:{
value:0
},
computed:{
result:function(){
return this.value
}
}
})
</script>
這樣我們也實(shí)現(xiàn)了上面一個例子中的雙向綁定员辩；
- 以后我們會用到更多的v- 開頭的屬性盒粮；
