博客

vue指令的用法

  • Post author:
  • Post category:vue




前言

vue基础知识整理


  1. 内容渲染指令

  • v-text—— 缺点：覆盖元素中默认的内容

  • {

    { }}——插值只能用在元素的内容节点，无法用在属性节点

  • v-html ——用处：把带有HTML标签的字符串，渲染为真正的DOM元素 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
   
    <div id="app"> 
        <p v-text = 'username'>名字：</p>
        <p v-text = "sex">性别：</p>
        <hr>
        <p>名字：{{username}}</p>
        <p>性别：{{sex}}</p>
        
        <div v-text = 'info'></div>
        <div>{{info}}</div>
        <div v-html = 'info'></div>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                username:'张三',
                sex:'boy',
                info:'<h4 style = "color : red ;font-weight :bold "> 欢迎大家</h4>'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述


  1. 属性绑定指令
  • v-bind 简写为

    ：
  • 为元素的属性动态绑定值
  • 在使用时，如果绑定内容需要进行动态拼接，则字符串外面应该包裹单引号 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:placeholder="tips">
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                tips:'张三',
            }
        })
    </script>
</body>
</html>

在这里插入图片描述


  1. 事件绑定指令
  • v-on

    • 简写为

      @
    • @click=”show”和@click=“show(传参)” 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <p>count的值是：{{count}}</p>
        <!-- <button v-on:click= 'add(2)'>+</button>
        <button v-on:click= 'sub'>-</button> -->
        <button @click= 'add(2)'>+</button>
        <button @click= 'sub'>-</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                count : 0,

            },
            methods:{
                add(n){
                    this.count +=n
                },
                sub(){
                    this.count--
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  • 内置的变量 $event——@click=“show(3 , $event)”

    • 应用场景：如果默认的事件对象e被覆盖了，则可以手动传递一个 $event。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <p>count的值是：{{count}}</p>
        <button @click= 'add(2,$event)'>+n </button>
        <button @click= 'sub'>-</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                count : 0,

            },
            methods:{
                add(n,e){
                    this.count +=n
                    console.log(e)
                    if(this.count %2 === 0){
                    e.target.style.backgroundColor ='red'
                    }else{
                    e.target.style.backgroundColor =''
                    }

                },
                sub(){
                    this.count--
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  • 事件修饰符

    • .prevent——阻止a链接跳转
    • .stop——阻止绑定的事件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <a href="http://www.baidu.com" @click.prevent="show">这是a链接</a>

        <hr>

        <div style="width: 200px; height: 200px; background-color: red; text-align: center; line-height: 150px;" @click="divHandle">
            <button @click.stop = "bntHandle">按钮</button>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                
            },
            methods:{
                show(){
                    console.log('a被点击了')
                },
                divHandle(){
                    console.log('div被点击了')
                },
                bntHandle(){
                    console.log('btn被点击了')
                }
            }
        })
    </script>
</body>
</html>

点击a不会发生跳转，按钮也不会起用

  • 按键修饰符

    • .esc
    • .enter 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" @keyup.esc = "clearInput" @keyup.enter = "commitAjax">
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
               
            },
            methods:{
                clearInput(e){
                    console.log('按下了esc键')
                    e.target.value = ''
                },
                commitAjax(){
                    console.log('出发了enter')
                }
            }

        })
    </script>
</body>
</html>

在这里插入图片描述


  1. 双向数据绑定指令
  • v-model ——只能用在表单元素上 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src = "./lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <p>双向绑定的</p>
        <p>用户输入的名是{{username}}</p>
        <input type="text" v-model = "username">
        <p>动态绑定的</p>
        <input type="text" :value="username">
        <hr>

        <select v-model="city">
            <option >请选择城市</option>
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">天津</option>
            <option value="3">深圳</option>
            <option value="4">南京</option>
        </select>
    </div>

    <script>
        const vm =new Vue({
            el:"#app",
            data:{
                username:'张三',
                city:'3'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

  • 修饰符

    • .number 自动将用户的输入值转换为数值类型
    • .trim 自动过滤用户输入的首位空白字符
    • .lazy 在”change”而非”input”时更新 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <form>
            <input type="text" v-model.number= "num1"> +
            <input type="text" v-model.number= "num2"> =
            <span>{{num1 + num2}}</span>
            <hr>
            <input type="text" v-model.trim = "username">
            <input type="text" :value=" username">
            <input type="button" @click = "show" value="提交信息">
            <hr>
            <input type="text" v-model.lazy = 'username'>
        </form>


    </div>



    <script>
          const vm = new Vue({
            el:'#app',
            data:{
                username:'aa',
                num1:1,
                num2:2,
            },
            methods:{
                show(){
                    console.log(this.username)

                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述


  1. 循环渲染指令
  • v-for=”(item，index) in 数组 ”
  • :key=“item.id”
  • 拿索引当key没有意义（index的值不具有唯一性）

  1. 条件渲染指令
  • v-if

    • 动态创建和移除元素，实现元素的实现和隐藏
    • v-else-if
    • v-else
  • v-show

    * 动态添加和移除 display:none样式,来实现元素的实现和隐藏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue-2.6.12.js"></script>
</head>
<body>
    <div id="app">
        <div v-if = 'flag'>这是被v-if控制的</div>
        <div v-show= 'flag'>这是被v-show控制的</div>
        <hr>
        <div v-if ="type === 'A'">优秀</div>
        <div v-else-if ="type === 'B'">良好</div>
        <div v-else-if ="type === 'C'">及格</div>
        <div v-else>差</div>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                type:'A'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述


  1. 过滤器
  • 全局过滤器

    Vue.filter（‘名字’,function(过滤器前面的值）{return结果})
  • 私有过滤器

    定义到组件的filters节点之下
  • 调用——{

    { message | deteFoemat }}
  • 如果全局过滤器和私有过滤器名字一致，此时按照“

    就近原则

    ”，调用的是”私有过滤器“


版权声明：本文为qq_43723132原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。