vue指令大全~~~
Posted 周小姐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue指令大全~~~相关的知识，希望对你有一定的参考价值。
是的,这里有很全的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
var vm=new Vue({
el:\'#app\',
//这是mvvm里面的m
data:{
val:\'你好\'
}
})
</script>
</body
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="app" v-html="val">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script >
//这是mvvm里面的vm
var vm=new Vue({
el:\'#app\',
//这是mvvm里面的m
data:{
val:\'<p style="color:red">你好</p>\'
}
})
</script>
</body>
视图:
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指令大全~~~的主要内容，如果未能解决你的问题，请参考以下文章