vue指令-CSDN博客

本文链接：https://blog.csdn.net/qq_59381940/article/details/130070729

内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容

1.v-text

缺点：会覆盖元素内部原有的内容
不会解析标签

 <div id="root">
        <p v-text = 'name'></p>
        <div v-text = 'sex'>性别</div>
 </div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                name:'我是大孩',
                sex:'女'
            }
        })
    </script>

2.v-html

会覆盖元素内部原有内容
会解析标签

<div id="root">
        <p v-html="name"></p>
        <div v-html='sex'>性别</div>
</div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                name:`<strong>我是大孩</strong>`,
                sex:'女'
            }
        })
    </script>

3.插值语法{{}}

{{表达式或者数据}}
不会覆盖元素内部原有内容
不会解析标签

 <div id="root">
        <p>{{name}}</p>
        <div>性别{{sex}}</div>
 </div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                name:'我是大孩',
                sex:'女'
            }
        })
    </script>

属性绑定指令

1.v-bind指令

单向数据绑定
语法：v-bind:需要绑定的属性 = “data配置项中的数据名 / 表达式”
简写： :需要绑定的属性

<div id="root">
        <input type="text" :placeholder="tips"> //简写
        <input type="text" v-bind:placeholder="tips">
</div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                tips:'请输入'
            }
        })
    </script>

事件绑定指令

1.需要定义在methods配置对象中

2. v-on:click 点击事件

v-on:click=“事件处理函数名(实参)”
简写：@click = “事件处理函数名(实参)”
可以进行传参

    <div id="root">
        <p>值为{{count}}</p>
        <button @click="add($event,1)">+1</button>  //传参  实参  事件对象$event
        <button v-on:click="jian">-1</button>
        <input type="text" :placeholder="tips" @keydown="ok">  //@符简写
            <a href="http://www.baidu.com" target="_blank" @click.prevent="tz">百度</a> //  事件修饰符 @click.prevent
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue ({
            el:'#root',
            data:{
                count:0,
                tips:'zzz'
            },
            methods: {
                add(e,n){ //传参 形参
                    this.count += n
    e.target.style.color = this.count % 2 === 0?'red':''  
                },
                jian(){
                    this.count -= 1
                },
                ok(){
                    this.tips = 'hhh'
                    console.log('hhh')
                }
            },
        })
    </script>

3.其他事件

v-on:input 输入框事件
v-on:keydown 键盘事件
v-on:keyup 键盘事件
v-on:focus 键盘事件
等等
同样可以写成简写 @input @keydown等

4.事件对象

实参必须使用 $event

绑定事件时，未加小括号的话会默认有e这个时间对象

5.事件修饰符

语法：$click.事件修饰符 = ‘methods配置对象的方法名’

1.prevent：阻止默认事件，例如网址的跳转
2.stop：阻止事件冒泡
3.once：事件只触发一次

6.按键修饰符

在监听键盘事件时，经常需要判断详细的按键，为案件相关的事件添加案件修饰符
例如：@keyup.enter = ‘methods配置对象的方法名’
@keydown.esc = ‘methods配置对象的方法名’

    <div id="root">
        <input type="text" @keyup.esc="ku">   //按键修饰符
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue ({
            el:'#root',
            data:{
                count:0,
                tips:'zzz'
            },
            methods: {
                ku(e) {   //事件对象
                    e.target.value = ''
                }
            },
        })

双向数据绑定指令

1.v-model指令

双向数据绑定
语法：v-model
只能和表单元素一起使用，例如：input元素，textarea元素，select元素

2.v-model专用修饰符

语法：v-model.修饰符 = ‘data配置项中的数据名 / 表达式’

lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

<div id="root">
        <p>姓名：{{user}}</p>
        //trim去掉前后空格
        <input type="text" v-model.trim="user"> 
            //model中的value值与下面的value进行匹配
        <select v-model="ok"> 
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">深圳</option>
        </select>
          //number只允许输入数字
        <input type="text" v-model.number="sum1">+
        <input type="text" v-model.number="sum2">=
        <span>{{sum1+sum2}}</span>
        <button @click="us">获取用户名</button>
        <br>
        <hr>
            //lazy，在表单失去焦点后再进行数据更新
        <input type="text" v-model.lazy="okk">
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                user:'hhh',
                ok:'1',
                sum1:1,
                sum2:2,
               okk:'傻逼'
            },
            methods: {
                us() {
                    console.log(`"${this.user}"`)
                }
            },
        })
    </script>

3.注意点

在与表单元素进行双向数据绑定时，如果type值为text，则v-model则会自动绑定value值

如果type值为单选框或则是多选框时，则v-model则自动绑定的是checked值

条件渲染指令

条件渲染指令用于控制DOM的显示与隐藏

1.v-if

语法：v-if=‘判断条件’

原理：每次动态创建或移除元素节点，实现元素的显示与隐藏
如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时使用v-if性能更好

2.v-show

语法：v-show=‘判断条件’

原理：动态为元素添加或移除display:none样式，来实现元素的显示与隐藏
如果频繁的切换元素的显示状态，用v-show性能会更好

3.注意

开发中，绝大多数情况，不用考虑性能问题，直接使用v-if就好了

<div id="root">
        <p v-if="flag">{{name}}</p>  //彻底抹除节点
        <p v-show="flag">{{name}}</p>  //只是将节点隐藏了
        <button @click="vi">隐藏元素</button>
        
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                name:'周江号',
                flag:true
            },
            methods:{
                vi() {
                    this.flag = this.flag ? false :true
                }
            }
        })
    </script>

4.v-if配套指令

v-else-if=‘判断条件’
v-else 后面不用接判断条件

 <div id="root">
        成绩：<input type="text" v-model="flags">
        <div v-if="flags==='A'">优秀</div>
        <div v-else-if="flags==='B'">良好</div>
        <div v-else-if="flags==='C'">一般</div>
        <div v-else>差</div>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue ({
            el:'#root',
            data:{
                flags:'A'
            }
        })

列表渲染指令

1.v-for

用来辅助开发者基于一个数组来循环渲染一个列表结构

语法：v-for=‘数组元素 in 数组’
数组元素指的是数组每一项
数组指的是存储在data配置项中的数组

<div id="root">
        <ul v-for="(item,index) in arr" :key="index">
            <li>
                <span>{{item.name}}</span> 
                <span>{{item.subject}}</span> 
                <span>{{item.score}}</span>
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                arr: [
            { name: '古丽扎娜', subject: '语文', score: 20 },
            { name: '佟丽丫丫', subject: '数学', score: 99 },
            { name: '马尔扎哈', subject: '英语', score: 70 },
                ]
            }
        })
    </script>

2.key

1.官方建议，只要用到v-for指令，那么一定要绑定一个 :key 属性
2.key值的类型只能是数字/字符串，其他的值是不能当作key值的
3.key的值必须是唯一值
4.建议把数据项id属性的值作为key值(因为id属性的值具有唯一性)
5.使用index值作为key值是没有任何意义的，因为index具有不确定性

综合案例

<!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" />
    <link rel="stylesheet" href="./07.案例css文件夹/index.css" />  //引入css样式
    <title>Document</title>
    <script src="js/vue.js"></script>  //引入vue
</head>
<body>
    <div id="root">  //指定template
        <div id="app" class="score-case">
            <div class="table">
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>姓名</th>
                            <th>科目</th>
                            <th>成绩</th>
                            <th>操作</th>
                            <th>状态</th>
                        </tr>
                    </thead>
                    <tbody>
                 //读取data配置项中的数据，进行数字遍历，记得设置key值
                        <tr v-for="(item,index) in arr" :key="item.id">  
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td class="red">{{item.subject}}</td>
                            <td><a href="#">{{item.score}}</a></td>
                            //需要通过删除，删除整行列表
                            //为删除添加点击事件，@click，并将方法命名为del
                            //同时为del设置自定义属性给arr数组中的元素中的删除都添加进来一个id，以便区分
                            <td @click="del" data-id="item.id">删除</td> 
                            //通过v-model进行数据的双向绑定
                            //由于绑定的是复选框，v-model默认绑定的是checked值，并通过布尔来确定是否选中
                            <td><input type="checkbox" v-model="item.flag">
                                //通过条件渲染指令v-if，判断item.flag值是否为真来进行是否隐藏与显示
                                <span v-if="item.flag">已选择</span>
                                <span v-else>未选择</span>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="form">
                <div class="form-item">
                    <div class="label">姓名：</div>
                    <div class="input">
                        //由于要进行添加新的数据，必须给他们添加双向绑定，以便让vm更好的拿到数据
                        <input type="text" placeholder="请输入姓名" class="username" v-model="un" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">科目：</div>
                    <div class="input">
                        //双向绑定
                        <input type="text" placeholder="请输入科目" class="subject" v-model="sub" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">分数：</div>
                    <div class="input">
                        //双向绑定
                        <input type="text" placeholder="请输入分数" class="score" v-model="sco" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">选择：</div>
                    <div class="input">
                        //双向绑定
                        <input type="text" placeholder="请输入true/false" class="score" v-model="fla" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label"></div>
                    <div class="input">
                        //添加点击事件，配置add方法
                        <button class="submit" @click="add">添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data: {
                //配置添加数据初始化的值
                un: '',
                sub: '',
                sco: null,
                fla:null,
                //通过数组展示并驱动页面的更新
                arr: [
                    { id: 1, name: '古丽扎娜', subject: '语文', score: 20, flag: true },
                    { id: 2, name: '佟丽丫丫', subject: '数学', score: 99, flag: false },
                    { id: 3, name: '马尔扎哈', subject: '英语', score: 70, flag: true },
                ]
            },
            methods: {
                //配置add方法，将新添加的数据变成数组，从而添加到data配置项中，从而驱动页面的更新
                add() {
                    console.log('事件触发了')
                    this.arr.push({ id: this.arr.length+1, name: this.un, subject: this.sub, score: this.sco, flag: JSON.parse(this.fla) })//由于输入框输入的结果是字符串，需要通过JSON.parse转换为布尔值
                    //每次新添加一次数据，自动将输入框清空
                    this.un = '',
                    this.sub='',
                    this.sco=null,
                    this.fla=null
                },
                //配置del方法，删除功能，内部主要是给data配置项中的arr数组进行元素删除，从而触发页面更新
                //通过事件对象和自定义事件，找到被点击的节点的id，并删除数组中对应id的元素
                del(e) {
                    console.log('删除被触发')
                    this.arr.splice(e.target.dataset.id,1)
                }
            }
        })
    </script>
</body>

</html>