vue指令大全~~~
阿新 • • 發佈：2018-04-29
展示 為什麽 img splay hidden ID index 業務邏輯 pan
是的,這裏有很全的vue指令使用~
1.簡單的vue應用
vue作為一個mvvm框架,想想為什麽叫做mvvm?
Model是負責數據的存儲,
View負責頁面的展示
Model View
負責業務邏輯處理,對數據加工後視圖展示
MVVM的作用是業務邏輯代碼與視圖代碼完全分離,各自的職責更加清晰~
<body>
<!--mvvm裏面的v-->
<div id="app">
{{val}}
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script >
//這是mvvm裏面的vm
2.v-text
<div id="app" v-text="val"> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script > //這是mvvm裏面的vm var vm=new Vue({ el:‘#app‘, //這是mvvm裏面的m data:{ val:‘你好‘ } }) </script>
視圖:
這裏的v-text是偏向於文本的,如果你將 val:‘你好‘改成val:‘<p style="color:red">你好</p>‘
視圖是
所以接下來就是介紹v-html
3.v-html
<body>
<!--mvvm裏面的v-->
<div id="
視圖:
v-text是把所有的都以文本的形式展現,而v-html能夠解析裏面的標簽~
4 v-cloak
平常我們的數據都是用{{}}渲染出來的,那麽這樣的渲染與v-html和v-text有什麽區別呢?
在網絡不行的情況下,我們用{{}}的形式渲染會出現閃現{{}},再出現數據,所以將這個指令放在要渲染的標簽的父元素上就可以,還要記得寫樣式display:none當然你可以放在剛開始vue定義的範圍的標簽上
<style> [v-cloak]{ display: none } </style> </head> <body> <!--mvvm裏面的v--> <div id="app" v-cloak> {{val}} </div> <script src="./node_modules/vue/dist/vue.js"></script> <script > //這是mvvm裏面的vm var vm=new Vue({ el:‘#app‘, //這是mvvm裏面的m data:{ val:‘你好‘ } }) </script> </body>
5.v-for
<div id="app"> <div v-for="(el,index) in dataList"> <p>名字:{{el.name}}</p> <p>年齡:{{el.age}}</p> </div> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> //這是mvvm裏面的vm var vm = new Vue({ el: ‘#app‘, //這是mvvm裏面的m data: { val: ‘你好‘, dataList:[ { name:‘jack‘, age:18 }, { name:‘rose‘, age:17 } ] } }) </script>
這裏要註意的是:
一般都加上:
<div v-for="(el,index) in dataList" :key="index" > <p>名字:{{el.name}}</p> <p>年齡:{{el.age}}</p> </div>
:key="index" 或者如果el裏面有id 的話可以寫:key="el.id" 這樣來區分每一個list,因為在渲染的時候都是整個list渲染的,加上這個就只用替換,或者說是局部的變化
6.v-on
<div id="app"> <button type="button" v-on:click="clickMe()">愛我你就點點我</button> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script > //這是mvvm裏面的vm var vm=new Vue({ el:‘#app‘, //這是mvvm裏面的m data:{ val:‘你好‘ }, methods:{ clickMe(){ alert(this.val) } } }) </script>
v-on:click="clickMe()" 簡寫:click="clickMe()"就可以了
這裏的this代表的就是vm啦,你直接用vm.val也是一樣的
視圖：
7.v-if
<body>
<!--mvvm裏面的v-->
<div id="app">
<p v-if="val==‘你好‘">
Good boy
</p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script >
//這是mvvm裏面的vm
var vm=new Vue({
el:‘#app‘,
//這是mvvm裏面的m
data:{
val:‘你好‘
}
})
</script>
</body>
視圖:
v-if和v-show的區別,v-show只是hidden,v-if是直接元素消失......
vue指令大全~~~