vue常用指令以及列表渲染+条件渲染和事件处理

发布于：2022-04-27 18:34:23  栏目：技术文档

1.vue常用指令

createappp:创建vue实例mount:挂载vue应用![](https://img.php.cn/upload/image/782/576/844/1650945961720616.png

v-text指令:更新textConent

v-html指令:更新元素的innerHTML,可以解析html标签

    注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

2.vue条件渲染

v-show:元素始终会渲染并保留在dom中,v-show只是简单地切换元素display样式

    注意，v-show 不支持 <template> 元素，也不支持 v-else。

v-if:用于条件性地渲染一块内容,这块内容只会在指令的表达式返回true被渲染

<div class="app">
    <div v-show="inshow">我是不显示的</div>
    <div v-if="inif">我是显示的</div> 
    <div v-else>我是次要显示内容</div>
</div>
 <script>
            //createapp:创建vue实例
            // mount:挂载vue应用;
            const app=Vue.createApp({                    
                data(){
                    return{
                        msg:'hello word',
                        isshow:false,
                        inif:false,
                    }
                }
            }).mount('.app');
        </script>

我们可以看到 v-show只是简单的将display切换为none

2.1 v-if与v-show

1. v-if 是“真正”的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建

2. v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做一直到条件第一次变为真时，才会开始渲染条件块

3. 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换

4. 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

3.列表渲染

:基于一个数组或对象来渲染一个列表,指令需要使用(item,index) of items 形式的语法" class="reference-link">v-for:基于一个数组或对象来渲染一个列表,指令需要使用(item,index) of items 形式的语法

参数说明: items是源数据数组,item则是被迭代的数组元素的别名,index是索引,保持唯一性

<div class="app">
     <ul>
         <li v-for="(item,index) of info" :key="index">
             {{item}}
         </li>
      </ul>
</div>

<script>    
    //createapp:创建vue实例
    // mount:挂载vue应用;
    const app=Vue.createApp({                    
        data(){
            return{
                info:["李四","张三","王五","吴多星"],
            }
        }
    }).mount('.app');
</script>

页面效果

4. v-model和style绑定与class

4.1

v-model:实现表单输入和应用状态之间的双向绑定,它负责监听用户的输入事件来更新数据

v-model的修饰符:lazy,number,trim,

1. v-model.lazy:值修改操作完成之后才会发生变化。
2. v-model.number:值修改,保存其值为number类型
3. v-model.trim:自动过滤用户输入的首尾空白字符

<div class="app"> 
   <input type="text" name="" id="" v-model.trim="msg">
         <p>
              {{msg}}
        </p>
    </div>
`

<script>
                //createapp:创建vue实例
                // mount:挂载vue应用;
            const app=Vue.createApp({                    
                    data(){
                        return{
                            msg:'',
                        }
                    }
            }).mount('.app');
    </script>

4.2

v-bind: 用于绑定html属性,由于复用性强,因此可用 : 来简写

 <style>
        .active{
               color: red;
        }
 </style>
<div class="app">
     <!-- 修改样式 -->
     <p v-bind:style="info">今天你努力了吗</p>
    <!-- 可以通过切换class来改变css样式 -->
    <p :class="{active:isactive}">
            class改变样式
    </p> 
</div>

<script>
          //createapp:创建vue实例
          // mount:挂载vue应用;
        const app=Vue.createApp({                    
           data(){
                return{
                    info:{ 
                        background:"blue",
                     },
                    isactive:true
                 }
            }
        }).mount('.app');
</script>

页面效果

4.3事件

 vue中通过v-on(缩写为 @ 符号)来监听dom事件,用法为v-on:事件名="test" 或 @事件名="test"

点击事件修饰符

1. prevent：阻止默认事件（常用）
2. stop：阻止事件冒泡（常用）
3. once：事件只触发一次（常用）
4. capture：使用事件的捕获模式
5. self：只有event.target是当前操作的元素才触发事件
6. passive：事件的默认行为立即执行，无需等待事件回避执行完毕

<div class="app">
       <button v-on:click="show">显示</button>
       <p v-show="isinfo">{{msg}}</p>
</div>

 <script>
        //createapp:创建vue实例
        // mount:挂载vue应用;
          const app=Vue.createApp({               
             data(){
                      return{
                           msg:"hello word",
                           isinfo:false
                       }
                  },
             methods:{
                  show(ev){
                      this.$data.isinfo=true;
                  },
              }
            }).mount('.app');
 </script>

没点击显示按钮之前

点击显示按钮之后

相关推荐