开启辅助访问 切换到宽版

精易论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

用微信号发送消息登录论坛

新人指南 邀请好友注册 - 我关注人的新帖 教你赚取精币 - 每日签到


求职/招聘- 论坛接单- 开发者大厅

论坛版规 总版规 - 建议/投诉 - 应聘版主 - 精华帖总集 积分说明 - 禁言标准 - 有奖举报

查看: 993|回复: 0
收起左侧

[交流] Vue(常用指令、事件、属性、模板、修饰符)

[复制链接]
发表于 2021-10-27 20:22:49 | 显示全部楼层 |阅读模式   广东省揭阳市

一、Vue.js简介

1. Vue.js是什么?

  • 是一个构件用户界面的框架
  • 是一个轻量级MVVM(Model-View-ViewModel)框架,和angular、react类似,其实就是所谓的数据双向绑定
  • 数据驱动+组件化的前端开发(核心思想)
  • 通过简单的API实现响应式的数据绑定和组合的视图组件
  • 更容易上手、小巧

2.vue和angular的区别

2.1 angular

  • 上手较难
  • 指令以ng-xxx开头
  • 所有属性和方法都存储在$scope中
  • 由google维护

2.2 vue

  • 简单、易学、更轻量
  • 指令以v-xxx开头
  • HTML代码和JSON数据,再创建一个vue实例
  • 由个人维护:尤雨溪

    共同点:都不兼容低版本IE

二、常用指令

1.什么是指令?

  • 答:用来扩展html标签的功能

    2.vue中常用的指令

  • v-mode 双向数据绑定,一般用于表单元素

    <template>
        <div>
            {{name}}
            <input type="text" v-model="name"/>
        </div>
    </template>
    <script>
        export default{
            data(){
                return{
                    name: "tom"
                }
            }
        }
    </script>
  • v-for 对数组或对象进行循环操作,使用的是v-for

    <template>
        <ul>
            // 指定:key属性绑定唯一key,当更新元素时可重用元素,提高效率
            <li v-for="item,key in arr" :key="key">{{item}}</li>
        </ul>
    </template>
    <script>
        export default{
            data(){
                return{
                    arr:{"one":1,"two":2}
                }
            }
        }
    </script>
  • v-on 用来绑定事件 用法:v-on:事件名="函数"

    <template>
        <div>
            // v-on:onmouseover v-on:dblclick ......
            <button v-on:click="show">点我</button>
        </div>
    </template>
    <script>
        export default{
            methods:{
                show(){
                    console.log(1);
                }
            }
        }
    </script>
  • v-show / v-if 用来显示或隐藏元素,v-show是通过display实现,v-if是每次删除后在重新创建

    <template>
        <div v-show="onOff" @click="show"></div>
    </template>
    <script>
        export default{
            data(){
                return{
                    onOff:true;  
                }
            }
            methods:{
                show(){
                    this.onOff = false;
                }
            }
        }
    </script>
    <style lang="scss" scoped>
        div{
            width:100px;
            height:100px;
            border:1px solid red;
        }
    </style>

三、事件和属性

1.事件

1.1 事件简写

  • v-on:click=""
  • 简写方式 @click=""

1.2 事件对象$event

  • 包含事件相关相关信息,如事件源、事件类型、偏移量

1.3 事件冒泡

  • 阻止事件冒泡
  • @click.stop="clickMe"

1.4 默认行为

  • 阻止默认行为
  • @click.prevent="clickMe"

1.5 键盘事件

  • 键盘事件:@keydown、@keypress、@keyup
  • @keydown.enter="print"
  • 默认没有@keydown.a/b/c/d...z
  • 可以自定义键盘事件,也称为自定义键码或自定义键位别名! 文档

2.属性

2.1 属性绑定和属性的简写

  • v-bind 用于属性绑定,v-bind:属性=""

    属性的简写

  • v-bind:src="" 简写 :src=""   

2.2 class属性

class想同时设置两个类名数组方式(不常用)

        <template>
            <div :class="[one,two]"></div>
        </template>
        <script>
            export default{
                data(){
                    return {
                        one:"class1",
                        two:"class2"
                    }
                }
            }
        </script>

class想同时设置两个类名对象方式(常用)

        <template>
            <div :class="{class1:true,class2:'0' === '0' ? true:false}"></div>
        </template>

四、模板

1.简介

  • Vue.sj使用HTML的模板语法,可以将DOM绑定到Vue实例中的数据模板也就是{{}},用来进行数据绑定,显示在页面中也称为Mustache语法

2.数据绑定的方式

a)双向绑定
    v-model
b)单向绑定

方式1:使用两对大括号{{}},可能会出现闪烁问题,可以使用v-cloak

    /* 必须配置css样式,否则没效果 */
    [v-cloak]{
        display:none;
    }

    <div v-cloak> {{message}} </div>

方式2:使用v-text、v-html

    <template>
        <div v-text="message"></div>
    </template>

    <script>
        export default{
            data(){
                return{
                    message:"你好"
                }
            }
        }
    </script>

3.其它指令

v-once="message" 数据只绑定一次,不会监视数据,后面数据改变也不会更改
v-pre 不编译模板,直接原样显示
您需要登录后才可以回帖 登录 | 注册

本版积分规则 致发广告者

发布主题 收藏帖子 返回列表

sitemap| 易语言源码| 易语言教程| 易语言论坛| 易语言模块| 手机版| 广告投放| 精易论坛
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
论坛帖子内容仅用于技术交流学习和研究的目的,严禁用于非法目的,否则造成一切后果自负!如帖子内容侵害到你的权益,请联系我们!
防范网络诈骗,远离网络犯罪 违法和不良信息举报电话0663-3422125,QQ: 793400750,邮箱:wp@125.la
Powered by Discuz! X3.4 揭阳市揭东区精易科技有限公司 ( 粤ICP备12094385号-1) 粤公网安备 44522102000125 增值电信业务经营许可证 粤B2-20192173

快速回复 返回顶部 返回列表