Vue的指令(内容渲染、属性绑定、javaScript表达式、事件绑定、事务对象、双向绑定、逻辑<if-show-for>) - Steam残酷

Vue的指令(内容渲染、属性绑定、javaScript表达式、事件绑定、事务对象、双向绑定、逻辑<if-show-for>)

VUE指令

内容渲染指令 v-text v-html

v-text=“message”

v-text会覆盖默认的值

{{message+"!"}}插值表达式

差值表达式（Mustache）

v-html

包含html标签的字符串

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <p v-text="username"></p>
        <p v-text="age">年龄</p> -->
        <p>姓名：{{username}}</p>
        <p>年龄：{{age}}</p>
        <p>----------</p>
        <p v-text="desc"></p>
        <p v-html="desc"></p>
        <p>{{desc}}</p>
    </div>

    <script src="./lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                username:'郝泾钊',
                age:18,
                desc:'<i>我喜欢你</i>'
            }
        })
    </script> 
</body>
</html>

属性绑定指令 v-bind :

v-bind:

三元表达式：

简写：

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:placeholder="inputvalue">
        <hr>
        <img v-bind:src="src" alt="图片不存在">
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
               inputvalue:"请输入内容",
               src:"./images/2.jpg"
            }
        })
    </script> 
</body>
</html>

使用JavaScript表达式

四则运算
三元运算
字符串的拼接
字符串函数（颠倒）
对象的值

例子;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{number + 1}}</p>
        <p>{{ok ?'True':'False'}}</p>
        <P>{{message.split('').reverse().join('')}}</P>
        <p :id="'list-'+id">sss</p>
        <p>{{user.name}}</p>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
               number:9,
               ok:true,
               message:'ABC',
                id:3,
                user:{
                    name:"郝泾钊"
                }
            }
        })
    </script> 
</body>
</html>

事件绑定指令 v-on@

v-on:事件绑定指令

原生的Dom对象有：onclick、oninput、onkeyup等事件被替换成了：

v-on:click v-on:input v-on:keyup

需要在methods节点声明

事件：

click
monseenter
dbclick

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{count}}</p>
        <button v-on:click="addCount">+1</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
               count:9,
            },
            methods:{
                addCount(){
                    this.count++;
                }
            }
        })
    </script> 
</body>
</html>

简写形式@==v-on：

事件对象 $event

event

e.target.style.backgroundColor

传递参数：

$event
```
addCount(2,$event)
```

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{count}}</p>
        <button @click="addCount(2,$event)">+1</button>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
               count:0,
            },
            methods:{
                addCount(dept,e){
                    const nowBgcolor=e.target.style.backgroundColor
                    // console.log(nowBgcolor)
                    e.target.style.backgroundColor=nowBgcolor=='red'?'':'red'
                    this.count+=dept
                }
            }
        })
    </script> 
</body>
</html>

事务修饰符

事务修饰符	说明
.prevent	阻止默认行为（例如，阻止a连接的跳转、阻止表单的提交等）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件函数（先执行捕获的）
.once	绑定的事件只触发一次
.self	只有在event.target是当前元素自身是触发事件处理函数

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inner{
            line-height: 100px;
            background-color: aliceblue;
            font-size: 13px;
            text-align: center;
        }
        .outer{
            background-color: bisque;
            padding: 50px;
            font-size: 13px;
        }
        .box{
            background-color: coral;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>1.prevent事件修饰符的应用场景</h4>
        <a href="https://www.baidu.com/" @click.prevent="onLinkClick">百度首页</a>
        <hr>

        <h4>2.stop事件修饰符的应用场景</h4>
        <div class="outer" @click="onOuterClick">
            外部的div
            <div class="inner" @click.stop="onInnerClick">内部的</div>
        </div>
        <hr>

        <h4>3.capture事件修饰符的应用场景</h4>
        <div class="outer" @click.capture="onOuterClick">
            外部的div
            <div class="inner" @click="onInnerClick">内部的</div>
            </div>
        <hr>

        <h4>4.once事件修饰符的应用场景</h4>
            <div class="inner" @click.once="onInnerClick">内部的</div>
        <hr>

        <h4>3.capture事件修饰符的应用场景</h4>
        <div class="box" @click="onBoxClick">
        <div class="outer" @click.self="onOuterClick">
            外部的div
            <div class="inner" @click="onInnerClick">内部的</div>
            </div>
            </div>
        <hr>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
               count:0,
            },
            methods:{
                onLinkClick(){
                    console.log("点击了超链接")
                },
                onOuterClick(){
                    console.log("点击了外部的")
                },
                onInnerClick(){
                    console.log("点击了内部的")
                },
                onBoxClick(){
                    console.log("点击了盒子")
                }
            }
        })
    </script> 
</body>
</html>

按键修饰符

@key.enter=“”

@keyup.esc=""

@keydown

只能和键盘相关的事件使用

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
    <input type="text" @keyup.enter="submit" @keyup.esc="clearInput">
   </div>
   <script src="./lib/vue.js"></script>
   <script>
       const vm = new Vue({
           el:"#app",
           data:{
              count:0,
           },
           methods:{
              submit(e){
                  console.log("按下了enter键"+e.target.value)
              },
              clearInput(e){
                e.target.value=""
              }
           }
       })
   </script> 
</body>
</html>

双向绑定 v-model

v-model

指令修饰符：

修饰符	作用	示例
.number	自动将用户的输入值转变为数值型
.trim	自动过滤用户输入的首尾空白的字符
.lazy	在“chang”时而非“input”时更新

会忽略所有的表单元素的value、checked、selected特性的初始值二总是将vue实例的数据作为数据来源。

例子1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>用户名是：{{username}}</p>
        <input type="text" v-model="username">
        <hr>
        <p>选中的省份是：{{province}}</p>
        <select v-model="province">
            <option value="">请选择</option>
            <option value="1">北京</option>
            <option value="2">河北</option>
            <option value="3">黑龙江</option>
        </select>
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
              username:"郝泾钊",
              province:"1"
            
            },
            methods:{
               submit(e){
                   console.log("按下了enter键"+e.target.value)
               },
               clearInput(e){
                 e.target.value=""
               }
            }
        })
    </script> 
</body>
</html>

条件渲染指令 v-if

操作的是Dom树
频繁操作的使用v-show ,反之，v-if
操作Dom树影响性能

<div id="app">
	<img src=".." v-if="isShow"/>
	<img src=".." v-if="age>=12"/>
	<img src=".." v-else="isShow"/>
</div>

..
<script>
    var app =new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:16
	}
    })
</script>

显示隐藏 v-show

根据真假切换元素的显示状态
原理是：修改display，实现隐藏:none
指令后面的内容都会解析为布尔值
值为true显示，值为false隐藏

<div id="app">
	<img src=".." v-show="true"/>
	<img src=".." v-show="isShow"/>
	<img src=".." v-show="age>=18"/>
</div>

..
<script>
    var app =new Vue({
        el:"#app",
        data:{
            isShow:false,
            age:16
	}
    })
</script>

循环v -for

<div id="app">
	<ul>
        <li v-for="item in arr" :title="item">
        {{index}}{{item}}</li>
         <li v-for="(item,index) in arr" :title="item">
        {{index}}{{item}}</li>
	</ul>
</div>

..
<script>
    var app =new Vue({
        el:"#app",
        data:{
            arr:[1,2,3,4,5]
	}
    })
</script>

posted on 2022-06-23 22:31 Steam残酷阅读(127) 评论(0) 收藏举报

刷新页面返回顶部