回應式布局
- 也就是單項資料系結，即通過改變資料源來改變頁面，或者通過頁面改變來改變數
雙向資料系結
-
vue實作資料雙向系結主要是：采用資料劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在資料變動時發布訊息給訂閱者，觸發相應監聽回呼，當把一個普通 Javascript 物件傳給 Vue 實體來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter，用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化，
-
簡單來說就是：如果資料源改變 頁面就改變，而且頁面改變(用戶互動) 資料源中的資料也變 就是雙向資料系結
-
對應指令：v-model
//也可以稱之為語法糖寫法
<input type="text" v-model="msg"/>
<script>
new Vue({
el: '#app',
data: {
msg:"1234"
}
})
//實作的效果等同于
<input type="text" :value="msg" @input="input1"/>
<script>
new Vue({
el: '#app',
data: {
msg:"1234"
},
methods:{
input1(e){
this.msg=e.target.value
}
}
})
</script>
//這是不使用vue的方式
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
條件渲染
-
相關指令
- v-if/v-else 或者 v-show
-
兩者的區別
- v-show是把元素通過設定css的display:none來隱藏
- //v-if是把組件給銷毀了來達到隱藏
- //因此v-show具有較高的渲染消耗,v-if具有較高切換消耗
- //所以 經常切換的業務使用v-show 不常切換的業務使用v-if
-
使用示例
<div id="app"> <div v-if="flag">//根據vue的data中flag值來判斷顯示還是隱藏 hello </div> </div> <script> new Vue({ el: '#app', data: { flag: true } }) </script> //與if、else陳述句一樣也可以連用，同樣也可以使用if else if的形式 //if else用法 <div v-if="flag">//假設這里的flag為false 這是隱藏的部分 </div> <div v-if="!flag"> 這是顯示的部分 </div> //if elseif else使用方式 <div v-if="flag"> 這是隱藏的部分 </div> <div v-> 這也是隱藏的部分 </div>
回圈渲染
-
指令：v-for
-
v-for指令會把寫在它上面的元素 包含它的后代元素全部克隆 陣列個數這么多次
-
使用示例
<div id="app"> <div v-for="el in arr">//el為新建的變數，通過回圈arr陣列來給el賦值 <h1>{{el}}</h1> </div> </div> <script> new Vue({ el: '#app', data: { arr:["hello","vue","js","css"], } }) </script> -
同for陳述句，可以在v-for中嵌套v-if陳述句
-
v-for和v-if寫在同一個標簽時，v-for優先級高，會先執行（但是不建議寫在一起，有些版本會報錯）
-
可以用template標簽來寫v-for
<div id='app'> <template v-for="(el,index) in arr"> <h1 v-if="index!=1">{{el}}</h1> </template> </div> <script> new Vue({ el: '#app', data: { arr: ["hello", "vue", "js", "css"], } }) </script> -
-
同理也有v-for中嵌套v-for，v-if中嵌套v-for
補充一個圖片：vue.js 漸進式框架 五層設計
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/310589.html
標籤：其他
上一篇：Vue中key的作用及原理