vue笔记1 ---事件处理,监视属性, class和style绑定,条件渲染

v-bind: 是单项绑定.

v-model: 只能应用于表单类元素,输入类元素,要有value, 双向数据绑定.

若在一个HTML文件中: 创建实例对象

// 创建Vue实例
        const vm = new Vue({

            // 还可以用vue.$mount('#root')来绑定
            el:'#app',//el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串

            // 还可以用函数式来写,data:function(){return{name:'ly'}}, 组件必须写函数式!!!
            data:{//data中用于存储数据,数据供el所指定的容器去使用
                name:'ly',
                url:'http://baidu.com',
                inp:{
                    name:'ly'
                }
            }
        })

---

事件处理:

点击事件: v-on 可以简写为@

1. 阻止默认行为  a标签点击会跳转页面这是默认行为,要阻止这种默认行为.

<a href="http://baidu.com" @click.prevent="showInfo1">点击跳转</a>

2. 阻止事件冒泡

<div class="demo1" @click="showInfo1">
      <button @click.stop="showInfo1">点击阻止冒泡</button>
</div>     

3. 事件只触发一次

<button @click.once="showInfo1">事件只触发一次</button> 

 4.  使用事件捕获事件, 事件本身就是先捕获再冒泡,但是通过在捕获的时候就输出.

<div class="box1" @click.capture="showMsg(1)">
            div1
            <div class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

5.  只有event.target当前操作的元素时才触发事件: 也可以理解为也阻止了冒泡

<div class="dem1" @click.self="showInfo1">
            <button @click="showInfo1">event.target</button>
        </div>

6. 事件的默认行为立即执行,无需等待事件回调执行完毕 ,

scroll是滚动条滚动, wheel是鼠标滚轮滚动, 当鼠标滚轮滚动时,执行完事件回调函数后,会默认执行滚动条滚动,通过passive立即执行默认行为,即鼠标滚轮滚动的时候,滚动条也会滚动

<ul @wheel.passive="demo11" class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul> 

 7. 键盘事件

 按键别名 enter回车, delete删除, esc退出, space空格, tab换行(配合keydown使用) 

当出现两个名字拼接要将大写改成小写并且,两个单词要用 - 连接 

<input type="text" placeholder="键s盘事件:" @keyup.enter="info1">

---

监视属性: watch,里面的值为配置对象

注意:

监视属性必须存在才能被监视,当被监视属性变化时,回调函数自动调用.

 watch:{
                change:{
                    immediate:true,//初始化时让handler调用一下,默认为false
                    // handler什么时候调用? 当change修改
                    handler(newValue, oldValue){
                    console.log(change被修改了);
                    }
                }
            }

// 监视属性也可以
        // vm.$watch('change',  immediate:true,//初始化时让handler调用一下,默认为false
                    // handler什么时候调用? 当change修改
                    // handler(newValue, oldValue){
                    // console.log(change被修改了);
                    // })

深度监视:

data:{
    change: true,
    numbers:{
        a:1,
    }
} 
watch:{
                change:{
                    immediate:true,
                    handler(newValue, oldValue){
                    console.log(change被修改了);
                    }
                },
               // 简写,只是响应一级结构时,不能配置immediate和handler,函数change相当于handler
                // change(newValue, oldValue){
                //     console.log(change被修改了);
                // }
                // 监视多级结构中某个属性的变化
                'numbers.a':{
                    handler(){
                        console.log('a发生变化了!!!');
                    }
                },
                // 监视多级结构中所有属性的变化,深度检测
                // 
                numbers:{
                    deep:true,//若没有这个,则检测的只是numbers这个整体,而不是里面的内容,里面内容改变,不会影响到numbers改变.
                    handler(){
                        console.log('numbers里面内容发生变化了!!!');
                    }
                }
            }

---

绑定class样式:

1. 字符串写法

2. 数组写法

3. 对象写法

绑定style样式:

1. 对象写法

2. 数组写法

<!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>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        
        .happy{
            border: 4px solid red;;
            background-color: rgba(255, 255, 0, 0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px dashed rgb(2, 197, 2);
            background-color: gray;
        }
        .normal{
            background-color: skyblue;
        }

        .atguigu1{
            background-color: yellowgreen;
        }
        .atguigu2{
            font-size: 30px;
            text-shadow:2px 2px 10px red;
        }
        .atguigu3{
            border-radius: 20px;
        }
    </style>
    <script src="../../vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 绑定class样式--字符串写法,适用于:样式类名不确定,需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}</div>
        <br>
        <!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定,名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div>
        <br>
        <!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定,名字也确定,但要动态决定用不用 -->
        <div class="basic" :class="classObj">{{name}}</div>
        <br>

        <hr>
        <!-- 绑定style样式--对象写法-->
        <div class="basic" :style="styleObj">{{name}}</div>
        <!-- 绑定style样式--数组写法: -->
        <div class="basic" :style="[styleObj,styleObj1]">{{name}}</div>
    </div>
</body>
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                name:'ly',
                mood:'normal',
                classArr:['atguigu1','atguigu2','atguigu3'],
                classObj:{
                    atguigu1:false,
                    atguigu2:false
                },
                styleObj:{
                    // 原生font-size但是用绑定原则要用fontSize
                    fontSize: '40px'
                },
                styleObj1:{
                    color:'red'
                }
            },
            methods:{
                changeMood(){
                    const arr = ['happy','sad','normal'];
                    const index = Math.floor(Math.random()*3);
                    this.mood = arr[index]
                }
            }
        })
    </script>
</html>

---

条件渲染:

1. v-if 适合用于切换频率较低的场景,和else-if配合使用的时候不能被"打断",不展示的DOM元素直接被移除

2. v-show适合切换频率较高的场景, 不展示的DOM元素没有被移除,只是样式隐藏了.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值