MVVM框架
我們可以在頁面布局好后，只對資料進行操作，當資料改變，頁面上的內容會自動隨之改變，而無需開發者開發專門的代碼去改變，簡而言之，MVVM框架實作了頁面和資料的分離，代碼結構更加清晰，責任更加明確，同時實作自動化，無需寫代碼，非常棒的一個改進，這是javascript，jquery，bootstrap等無法做到的，也是前端Vue推崇的原因，也標示著jquery的終結，
- 方法必須寫在methods代碼段中
- 方法體中訪問資料代碼段中聲 明的變數，前面加this
- 方法和屬性宣告方式的差異在于 function(){}
- 方法和屬性呼叫的差異是 {{msg}} {{sayHello()}}，名稱后加小括號
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">
<p>加法{{2+3}}</p>
<p>加法{{2*3}}</p>
<p>字串操作{{str.length}}</p>
<p>三元運算子{{age>10?true:false}}</p>
<p>{{p.name+p.age}}</p>
<button οnclick="alert(100)">普通按鈕</button>
<button v-on:click="show()">無參方法</button>
<button v-on:click="syso(10)">有參方法</button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
str:"hellovue!",
age:12,
p:{//vue定義物件
name:"lisi",
age:20
}
},
//無參函式
//含參函式
methods:{
show:function(){
alert("show方法")
},
syso:function(dd){
alert(dd)
}
}
/*data第二張寫法 定義函式,回傳物件 */
/* data:function(){
return{
str:"hellovue!",
age:12,
p:{//vue定義物件
name:"lisi",
age:20
}
}
}, */
// 第三種形式:定義函式,es6的簡寫法
/* data(){
return{
str:"hellovue!",
age:12,
p:{//vue定義物件
name:"lisi",
age:20
}
}
} */
})
</script>
</body>
</html>
高級用法：v-指令
指令用于在運算式的值改變時，以表示它們是Vue提供的特殊特征
可以直接用于在運算式的值改變時，將某些行為應用到DOM上，
雙向系結 v-model
通過指令v-model，實作雙向系結，修改一方的同時修改相同的另一方，達到資料同時更新，
MVVM是將"資料模型雙向系結"的思想作為核心，在View和Model之間沒有聯系，通過ViewModel進行互動，而且Model和ViewModel之間的互動是雙向的，因此View視圖的資料的變化會同時修改Model資料源，而Model資料源資料的變化也會立即反應到View視圖上，
閃現 v-cloak
F12打開Chrome的除錯視窗，選中NetWork，在選擇Slow3G，觀察問題，
遇到插值運算式加載時閃爍對用戶不好的現象，那怎么解決呢？
- 在標簽中增加指令：v-cloak
- 增加style標簽，[v-cloak]屬性選擇器，設定先不展示display:none;
判斷 v-if
v-if指令將根據運算式 seen 的值( true 或 false )來決定是否插入 p 元素
Tip: 什么時候用 v-if ，什么時候用v-show?
v-show靠頁面的樣式進行控制，未顯示但內容已在頁面上，而v-if內容是不在的
v-if判斷是否加載，可以減輕服務器的壓力，但在需要時加載有更高的切換開銷；v-show調整DOM元素的CSS的dispaly屬性，可以使客戶端操作更加流暢，但有更高的初始渲染開銷，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好，
回圈 v-for
v-for 指令可以系結陣列的資料來渲染一個專案串列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript">
</script>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<h1>{{msg}}</h1>
<div id="app" v-cloak>
<input type="text" v-model="msg"/>
<h2>{{msg}}</h2>
<h3>{{msg}}</h3>
<h4>{{msg}}</h4>
<h5>{{msg}}</h5>
<h6>{{msg}}</h6>
<input type="text" v-model="age"/>
<p v-if="age>=60">老人</p>
<p v-else-if="age>=30">成年人</p>
<p v-else-if="age>=18">青少年</p>
<p v-else>小學生</p>
<h1>{{age}}</h1>
<p v-for="arr in arr">{{arr}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
msg:'生在紅旗下,長在春風里！',
age:"",
arr:["唱","跳","rap"],
}
})
</script>
</body>
</html>
事件 v-on
@click為v-on:click的縮寫
系結 v-bind
當屬性的值是變數而不是字串時，通過v-bind進行標識，vue會自動處理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript">
</script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="show()">show方法</button>
<button type="button"><a v-bind:href="url">百度</a></button>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
show:function(){
alert("show方法")
},
url:"https://www.baidu.com"
}
})
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292360.html
標籤：其他
下一篇：javascript:事件，物件