Vue学习-day2

最新推荐文章于 2024-08-07 20:14:48 发布

嗷chu~

最新推荐文章于 2024-08-07 20:14:48 发布

阅读量96

点赞数

分类专栏：计算机

本文链接：https://blog.csdn.net/weixin_43520374/article/details/104959282

版权

计算机专栏收录该内容

3 篇文章 0 订阅

订阅专栏

事件函数的调用方式

var vm=new Vue({
    el:'#app',
    data:{
        num:0,
    },
    methods:{
        handle:function(){
            //this 是num的实例对象
            this.num++;
        }
    }
});
<button  v-on:click="handle()"> 点击</button>
<button  @click="handle"> 点击</button>

事件函数参数传递

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event.

methods:{
  handle:function(p1,p2,event){
      console.log(p1,p2);
      console.log(event.target.innerHTML);
      this.num++;
  }
}
<button @click="handle(123,456,$event)">点击</button>

事件修饰符阻止冒泡

methods:{
    handle1:function(){
        this.num++;
    },
    handle2:function(event){
        event.stopPropagation();
    }
}
<div @click="handle1">
    <button @click="handle2">2</button>
    <!--                会冒泡到上面，handle1-->
</div>2.@click.stop  <div @click="handle1">
                <button @click.stop="handle2">2</button>
<!--                会冒泡到上面，handle1-->
            </div>阻止默认行为1.handle3:function (event) {
    //阻止默认行为
    event.preventDefault();
}
<a href="http://www.baidu.com" @click="handle3">baidu</a>

2.@click.prevent

<a href="http://www.baidu.com" @click.prevent="handle3">baidu</a> 按键修饰符v-on:keyup.enter=” “,按enter键时，触发函数.<form action="">
    <div>
        username:
        <input type="text" v-model="uname">
    </div>
    <div>
        password:
        <input type="password" v-on:keyup.enter="handleSubmit" v-model="pwd">
    </div>
    <div>
        <input type="button" v-on:click="handleSubmit" value="submit">
    </div>
</form>

自定义按键修饰符

F1：变量名，112对应的键Vue.config.keyCodes.f1=112

案例：简单计算器

①　通过v-model指令实现数值a和数值b的绑定
②　给计算按钮绑定事件，首先计算逻辑
③　将计算结果绑定到对应位置

<body>
    <div id="cul">
        <h1>简单计算器</h1>
        <form>
            <div>
                A:
                <input type="text" v-model="a">
            </div>
            <div>
                B:
                <input type="text" v-model="b">
            </div>
            <div>
                <input type="button" value="计算" @click="handle">
            </div>
        </form>
        <div>
            计算结果：
            <div>{{result}}</div>
        </div>

    </div>

<script>
    var vm=new Vue({
        el:'#cul',
        data:{
            a:'',
            b:'',
            result:''
        },
        methods:{
            handle:function(){
                this.result=parseInt(this.a)+parseInt(this.b);
            }
        }

    });
</script>
</body>

属性绑定动态处理属性

v-bind

<a v-bind:href="url">baidu</a>
<a :href='url'>baidu</a> <div id="app">
<div>
    <a v-bind:href="url">baidu</a>
    <button @click="handle">change</button>
</div>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            url:'http://www.baidu.com'
        },
        methods:{
            handle:function(){
                this.url='https://cn.bing.com/';
            }
        }
    });
</script>

V-model底层实现原理属性绑定，事件绑定v-bind绑定值，v-on：input处理值的变换

<input type="text" v-bind:value="msg" v-on:input="handle">
<input type="text" v-bind:value="msg" v-on:input="msg=$event">
<input type="text" v-model="msg">
## 样式绑定
**1.class样式处理默认的class会保留v-bind:class=’{active:isActive}’控制样式是否加入div中**
**对象语法**
```
<style type="text/css">
        .active{
            border:1px solid red;
            width:100px;
            height:100px;
        }
        .error{
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="{active:isActive,error:isError}">hello</div>
        <button v-on:click="handle">切换</button>

    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                isActive:true,
                isError:true
            },
            methods:{
                handle:function () {
                    this.isActive=!this.isActive;
                    this.isError=!this.isError;
                }
            }
        });
    </script>
    ```
    ** 数组语法 给类名赋值**
    ```
    <div v-bind:class="[activeClass,errorClass]"> test</div>
<button v-on:click="handle2">change</button>handle2:function(){
    this.activeClass='';
    this.errorClass='';
}
```
**2.style样式处理**

嗷chu~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习-day2

事件函数的调用方式var vm=new Vue({ el:'#app', data:{ num:0, }, methods:{ handle:function(){ //this 是num的实例对象 this.num++; } }});<button ...
复制链接

扫一扫