PHP程序员小白到大牛集训(12期免息)
Apifox=Postman + Swagger + Mock + JMeter,是接口文档,接口调试,接口 Mock,接口自动化测试一体化协作平台, php中文网推荐使用
广告
作者信息
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >Vue.js > 正文

    Vue指令入门之聊聊六大常用内置指令

    转载2022-06-09 20:21:461204 关注公众号:每天精选资源文章推送
    本篇文章带大家了解一下Vue指令,介绍一下Vue六大常用内置指令,希望对大家有所帮助!

    指令分类

    指令(Directives),是vue为开发者提供的 模板语法 ,用于辅助开发者渲染页面的基本结构。(学习视频分享:vuejs视频教程

    所用到的数据定义在实例的 data 中,事件定义在实例的 methods

    • 内容渲染指令:辅助开发者渲染DOM元素的文本内容
    • 属性绑定指令:辅助开发者为元素的属性动态绑定属性值
    • 事件绑定指令:辅助开发者为元素绑定事件
    • 双向绑定指令:辅助开发者在不操作DOM的前提下,快速获取表单数据(数据源的变化会同步到页面上,页面上的变化也会同步到数据源中)
    • 条件渲染指令:辅助开发者按需控制DOM的显示与隐藏
    • 列表渲染指令:辅助开发者基于一个数组来循环渲染一个列表结构

    一、内容渲染指令

    v-text

    只能渲染纯文本内容,会覆盖 标签内部原本的内容

    <p v-text="gender">性别</p>

    {{ }} 插值表达式

    只能渲染纯文本内容,不会覆盖 标签内部原本的内容

    <p>性别:{{ gender }}</p>

    v-html

    能将带标签的字符串渲染成html内容,会覆盖 标签内部原本的内容

    <p v-html="info">该内容会被覆盖</p> <!-- info可以定义为html语句 -->

    二、属性绑定指令

    v-bind:或:

    为元素的属性 动态 绑定属性值

    <input v-bind:placeholder="tips"> <!--两种写法都可以-->
    <input :placeholder="tips"> <!--两种写法都可以-->

    注意:插值表达式v-bind 还支持javascript表达式的运算

    {{ 1 + 2 }}  //一元运算
    {{ ok ? 'YES' : 'NO'}}  //三元运算
    {{ message.split('').reverse().join('') }}  //字符串的反转
    <div :id="'list-' + id"></div>  <!--字符串和变量的拼接-->

    三、事件绑定指令

    v-on:或@

    为元素绑定事件

    <button v-on:click="add">+1</button> <!--两种写法都可以-->
    <button @click="add">+1</button> <!--两种写法都可以-->
    -----------------------------------------------------------
    <script>
        //创建vue的实例对象
        const vm = new Vue({
            methods:{
                add(){
                    this.count ++; //相当于vm.count ++;
                }
            }
        })
    </script>

    传参

    • 没有传参:则会有默认的形参event,它是一个对象,里面的target属性指向的是当前绑定事件的DOM元素
    • 传一个参:event则会被覆盖,为了能用自己传的参又能保留event,则可以手动再传一个实参$event,形参随意
    <button @click="add(1, $event)">+N</button>
    ------------------------------------------------------------
    <script>
        //创建vue的实例对象
        const vm = new Vue({
            methods:{                    
                add(n,event){
                    //修改
                    this.count +=n;
    
                    //判断
                    if(this.count % 2 === 0)
                        event.target.style.color = 'red';
                    else
                        event.target.style.color = '';
                }                    
            }
        })
    </script>

    事件修饰符

    只要是事件,就能使用的修饰符,以下列举5个常用的

    事件修饰符说明
    .prevent阻止默认行为(例:阻止a链接的跳转、阻止表单的提交)
    .stop阻止事件冒泡
    .capture以捕获模式触发当前的事件处理函数
    .once绑定的事件只触发一次
    .self只有在event.target是当前元素自身时触发事件处理函数
    <!--举个例子-->
    <a href="http://www.baidu.com" @click.prevent="show">跳转到百度</button>

    按键修饰符

    只能在触发键盘事件时,使用的修饰符,以下列举2个常用的

    按键修饰符说明
    .esc按键盘esc键时
    .enter按键盘enter键时
    <!--举个例子-->
    <!--keyup是事件名称     .esc是按键修饰符     clearInput是事件处理函数-->
    <input type="text" @keyup.esc="clearInput">

    四、双向绑定指令

    v-model

    快速获取表单数据(只应用于表单元素,如:input、textarea、select)

    <input type="text" v-model="username">
    <select v-model="city">
        <option value="">请选择城市</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
    </select>

    专属修饰符

    只能给v-model使用的修饰符

    专属修饰符说明
    .number自动将用户输入的值转为数值类型
    .trim自动过滤用户输入的首尾空白字符
    .lazy在失去焦点时才自动更新数据(一般情况下都是实时更新的)
    <!--举个例子-->
    <input type="text" v-model.number="n1"> + <input type="text" v-model.number="n2"> = <span>{{ n1+n2 }}</span>

    五、条件渲染指令

    v-show

    控制DOM的显示与隐藏(值为true显示,值为false隐藏),其原理为 动态添加/移除display:none样式 ,一般用于需频繁切换

    <p v-show="flag">这是被 v-show 控制的元素</p>

    v-if

    控制DOM的显示与隐藏(值为true显示,值为false隐藏),其原理为 动态创建/移除元素 ,一般用于默认不展示且展示较少

    <p v-if="flag">这是被 v-if 控制的元素</p>

    v-else-if

    配合 v-if 指令一起使用,否则将不会被识别

    <div v-if="type === 'A'">优秀</div>
    <div v-else-if="type === 'B'">良好</div>
    <div v-else-if="type === 'C'">一般</div>
    <div v-else>差</div>

    六、列表渲染指令

    v-for

    基于一个数组来循环渲染一个列表结构,它有特定的语法结构 v-for="item in items"

    • item是 被循环的每一项 ,名字随意
    • items是 待循环的数组 ,名字随意
    <table>
        <thead>
            <th>索引</th>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
        </thead>
    
        <tbody>
            <!-- v-for还支持一个可选的第二个参数,即当前项的索引。语法格式为(item,index)in items -->
            <!-- 注意:item和index都是形参,可以根据需要进行重命名,如:(user,i)in userlist -->
            <!-- 注意:item和index除了可以被自己的子元素访问外,自身也可以使用 -->
            <!-- 注意:只有在需要用到索引时,才写这第二个参数 -->
            <tr v-for="(item,index) in list">
                <td>{{ index }}</td>
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.gender }}</td>
           </tr>
        </tbody>
    </table>
    ------------------------------------------------------------
    <script>
        //创建vue的实例对象
        const vm = new Vue({
            data: {
                list: [
                    { id: 1, name:'张三', gender:'男' },
                    { id: 2, name:'李四', gender:'女' },
                    { id: 3, name:'王五', gender:'男' }
                ]
            }
        })
    </script>

    注意:在.vue文件中,只要用到 v-for指令 ,一定要绑定一个 :key 属性

    • key 的属性值尽量为 id,为 index 则无意义(因为index不和内容有一个强制的绑定关系)
    • key 的属性值只能是 字符串/数字 类型,否则报错
    • key 的属性值必须具有唯一性(不重复内容和值有一个强制的绑定关系
    <tr v-for="(item,index) in list" :key="item.id">

    (学习视频分享:web前端开发编程基础视频

    以上就是Vue指令入门之聊聊六大常用内置指令的详细内容,更多请关注php中文网其它相关文章!

    20期PHP线上班

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除

  • 相关标签:Vue vue.js
  • 相关文章

    相关视频


    专题推荐