Vue 第一节点学习-基础指令

108 阅读4分钟

VUE指令

为开发者提供的模板语法,辅助开发者渲染页面结构

一、按照不同用途分为6大类

①内容渲染指令:渲染DOM文本的内容 常用指令

v-text 用于操作纯文本

  <p v-text="message">123</p> 会覆盖原本标签中的默认值 //123
   

{{ }} 插值表达式:只能用在元素的内容节点中,不能动态的为元素绑定值

     <p>{{message}}</p>  
     

v-html 将包含HTML标签的字符串渲染为页面HTML元素

<body>
<div id="app">

    <p v-text="desc"></p>  //打印 <i style="color:red">abc</i>
    
    <p>{{desc}}</p> //打印<i style="color:red">abc</i>
    
    <p v-html="desc"></p>  //打印 abc
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            desc: '<i style="color:red">abc</i>'
        }
    })
</script>
</body>

②属性绑定指令:为元素的属性动态绑定属性值 v-bind 简写形式 使用 符号来代替 v-bind

   //V-bind 
  <input type="text" v-bind:placeholder="inputValue">
   // 冒号符 :  
   <input type="text" :placeholder="inputValue">

●javaScript表达式运算的渲染支持 :

<body>
<div id="app">
    <p> {{ number+1 }}</p>
    <p>{{ok ? 'True':'False'}}</p>
    <p>{{message.split('').reverse().join('')}}</p>
    <p :id="'list'+id">xxx</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello!',
            number: 1,
            ok: true,
            id: 3
        }
    })
</script>

③事件绑定指令: v-on用来监听DOM元素绑定事件 简写形式 @ 符号代替v-on

原生onclick oninput onkeyup原生事件,替换为vue的事件绑定形式后为:v-on:click v-on:input v-on:keyup 通过v-on绑定的事件处理函数,需要在methods节点中声明使用

<body>
<div id="app">
    <p>message的值是:{{ message }}</p>
    <button v-on:click="message+=2">+2</button>
    <button @click="addCount">+1</button>
    <button @click="addCountEvent(num,$event)">+num</button>  
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 0,
            num: 2
        },
        methods: {
            addCount(e) {
                const evt = e.target.style.backgroundColor
                e.target.style.backgroundColor = evt === 'green' ? '' : 'Green',
                    this.message += 1
            },
            addCountEvent(num, e) { //传参后接收不到原生event事件对象,需要在传参时$event
                this.message += num
                const evt = e.target.style.backgroundColor
                e.target.style.backgroundColor = evt === 'red' ? '' : 'red'
            }
        },
    })
</script>
</body>

事件对象event 在原生的DOM事件绑定中,可以在事件处理函数的形参处,接收事件对象event。同理,在v-on指令(简写为@)所绑定的事件处理函数中,同样可以接收到事件对象event,如果进行了传参,需要在参数中添加$event才可以拿到事件对象,否则拿不到。

事件修饰符 :在事件处理函数中调用preventDefault()或 stopPropagation()是非常常见的需求。因此,vue提供了事件修饰符的概念, 来辅助程序员更方便的对事件的触发进行控制。常用的5个事件修饰符如下:

1).prevent 阻止默认行为(例如:阻止a连接的跳转 表单提交)

2).stop 阻止事件冒泡

3).capture 以捕获模式触发当前的事件处理函数

4).once 绑定事件只触发1次

5).self 只在event.target是当前元素自身时触发事件函数

//阻止链接进行跳转
<a href="https://www.baidu.com" @click.prevent="onLinkClick">去百度下</a>

//阻止事件冒泡
  <div class="outer" @click="onQuterClick">
        外层的box
     <div class="inner" @click.stop="oninnerClick">内部的box</div>
  </div>
  

④双向绑定指令:v-model 快速获取表单的值 只能配合表单元素使用

    <P>{{userName}}</P>
    <input type="text" v-model="userName">
    

v-model提供3个修饰符

2.png

⑤ 条件渲染指令:按需控制元素的显示与隐藏 v-ifv-show 实现效果一样

 <p v-if="flag">我被v-if控制</p> //flag=ture 显示 false隐藏
 <p v-show="flag">我被v-if控制</p> //flag=ture 显示 false隐藏

实现原理不同:v-if 指令会动态地创建或移除DOM元素,从而控制元素在页面上的显示与隐藏;

v-show 指令会动态为元素添加或移除style="display: none;"样式,从而控制元素的显示与隐藏;

性能消耗不同:v-if有更高的切换开销,而v-show有更高的初始渲染开销。

●如果需要非常频繁地切换,则使用v-show较好

●如果在运行时条件很少改变,则使用v-if 较好

v-if 与 v-else v-else-if 充当 v-if的else-if块,可以连续使用

<div class="box" v-if="true"></div> //条件为真 展示box盒子
<div class="box2" v-else></div> //v-if为false时 显示box2盒子

⑥列表渲染指令:v-for 基于一个数组来循坏渲染相似的UI结构

v-for 需要使用 item in items

item带循环的数组

item是当前循环项

v-for 指令支持可选的第二个参数 使用 (item,index) in items index当前循坏项的索引

<div v-for="(item,index) in arr" :key="index">
        <h1>{{ item} }</h1>
        <h2>{{ index }}</h2>
 </div>

使用key维护列表的状态 当列表的数据变化时,默认情况下,vue会尽可能的复用已存在的DOM元素,从而提升渲染的性能。但这种默认的性能优化策略,会导致有状态的列表无法被正确更新。为了给vue一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能。此时,需要为每项提供一个唯一的key属性

key的注意事项 key 的值只能是字符串或数字类型 key 的值必须具有唯一性(即: key的值不能重复) 建议把数据项id属性的值作为key 的值(因为id属性的值具有唯一性) 使用index的值当作key的值没有任何意义(因为index的值不具有唯一性) 建议使用v-for指令时一定要指定key 的值(既提升性能、又防止列表状态紊乱)

二、vue filters节点中使用过滤器

全局过滤器Vue.filter('过滤器名称', function)

私有过滤器filters节点

(vue 3.x 版本剔除过滤器) 进而使用计算属性方法