vue的一些指令

最新推荐文章于 2022-12-09 01:21:03 发布

别看我也不知道

最新推荐文章于 2022-12-09 01:21:03 发布

阅读量141

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/wmiaopas/article/details/102680881

版权

vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.v-cloak

基本使用方法，解决插值表达式闪烁问题
首先在使用插值表达式的时候

<body>
    <div id="app">
        <p>{{ msg}}</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               msg:'123'
           },
           methods:{}
        });
    </script>
</body>

如果网速太慢首先在页面上显示的不是msg中的数据，而是显示插值表达式 {{ msg }}
这样对网速慢的用户体验就不是很好
这时使用v-cloak就能解决这个问题

<p v-cloak>{{ msg }}</p>   <!--在P标签内加入v-cloak-->
<!--在样式内添加v-cloak属性-->
<style>[v-cloak]{
display:none;
}</style>

当msg中的数据被加载完成的时候才将插值表达式渲染到页面上
———————————————————————————————————————————————

2.v-text

v-text其实和插值表达式差不多，直接在Dom元素内添加v-text就可以了不过v-text默认是没有闪烁问题的

<h4 v-text="msg"></h4>

h4渲染出来的内容就是msg中的数据
但是v-text和插值表达式有一个不同

<p> ==={{ msg }}</p>
<p v-text="msg">===</p>

这样在页面中使用插值表达式的标签就会显示 ===123，使用v-text的标签会显示123
———————————————————————————————————————————————

3.v-html

就是把数据渲染为HTML格式

<body>
    <div id="app">
	<div v-html="msg"></div>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               msg:'<h4>我是一个H4</h4>'
           },
           methods:{}
        });
    </script>
</body>

页面中显示我是一个H4
———————————————————————————————————————————————

4.v-bind

v-bind是vue中，提供用于绑定属性的指令

<body>
    <div id="app">
        <input type="button" v-bind:value="mytitle"  v-bind:title="mytitle">
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               mytitle:'这是一个自定义title'
           },
           methods:{}
        });
    </script>
</body>

button的value和title都绑定为mytitle
简写：可以不写v-bind 直接写：

<input type="button" :value="mytitle"  :title="mytitle">

v-bind中，可以写合法的JS表达式
———————————————————————————————————————————————

5.v-on

由于vue不提倡直接操作DOM 所以提供了v-on:事件绑定机制

<body>
    <div id="app">
        <input type="button" value="" v-on:click="show">
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{},
           methods:{
               show:function(){
                   alert("hello")
               }
           }
        });
    </script>
</body>

methods属性中定义了当前vue实例所有可用的方法
也就是说v-on绑定了方法
简写是@

<input type="button" value="" @click="show">

———————————————————————————————————————————————

6. v-for

循环数组

<body>
    <div id="app">
      <p v-for="item in list">{{item.id}} --{{item.name}}</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
              list:[
                  {id:1,name:'zs1'},
                  {id:2,name:'zs2'},
                  {id:3,name:'zs3'},
                  {id:4,name:'zs4'},
                  {id:5,name:'zs5'},
              ]
           },
           methods:{
               }
        });
    </script>
</body>

循环对象

<body>
    <div id="app">
      <p v-for="(val,key) in user">{{ val }}--{{key}}</p>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
            user:{
                id:'1',
                name:'zs',
                gender:'男'
            }
           },
           methods:{
               }
        });
    </script>
</body>

v-for循环的时候，key属性只能使用number获取String；
key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值；
在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型 :key值

<p v-for="item in list" :key="item.id"></p>

———————————————————————————————————————————————

7. v-if

<body>
    <div id="app">
        <input type="button" value="开关" @click="flag=!flag">
        <h3 v-if="flag">这是用v-if控制的元素</h3>
    </div>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               flag:true
           },
           methods:{}
        });
    </script>
</body>

v-if的特点是每次都会重新删除和创建元素
点击前在这里插入图片描述
点击后

v-show

v-show的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none样式
点击前
在这里插入图片描述
点击后
v-if有较高的性能消耗
v-show有较高的初始渲染消耗
如果元素涉及到频繁的切换，最好不要使用v-if；
如果元素永远不会被显示出来v-show就有较高的初始渲染消耗

别看我也不知道

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue的一些指令

1.v-cloak的基本使用方法，解决插值表达式闪烁问题首先在使用插值表达式的时候<body> <div id="app"> <p>{{ msg}}</p> </div> <script> var vm=new Vue({ el:'#app',...
复制链接

扫一扫

专栏目录