[JavaScript知识库] Vue 学习第二天事件绑定v-on|计算属性computed|监听器watch|表单绑定v-model

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue 学习第二天事件绑定v-on|计算属性computed|监听器watch|表单绑定v-model -> 正文阅读

[JavaScript知识库]Vue 学习第二天事件绑定v-on|计算属性computed|监听器watch|表单绑定v-model

Vue 学习第二天

- 数据驱动

数据驱动

数据驱动是vue的核心之一，围绕实例里的data数据进行编程而不像js的线性编程

事件绑定 (v-on)

v-on: 可以被简写为@

语法

v-on:事件名称=‘方法名称’ <button v-on:click="changmsg">修改</button>
v-on:事件名称=‘方法(传参)’ <button v-on:click="add(1)">+1</button>
v-on:事件名称=‘赋值表达式’ <button v-on:click="num+=1">+1</button>

事件修饰符

v-on:事件名称.修饰符.修饰符=’ ’

.stop 阻止事件流传播
.prevent 组织浏览器默认行为
.self 事件不会因为事件冒泡触发
.once 某个事件只能触发一次
.capture 当前事件触发捕获型事件流(从外到内)
.passive 不阻止浏览器的默认行为

计算属性computed:{}

如果我们要在模板中使用基于当前属性计算后的结果那么就可以通过计算属性的配置来完成

计算属性可以将计算结果缓存下来多次使用
只有当它基于的属性发生变化时才会进行重新计算
计算属性必须设置返回值

侦听器 watch

单独用来监听某个值的变化一般用于执行一些开销比较大的操作

watch:{

? 要监听的属性名( 新值，旧值 ){

? }

}

obj里的属性发生变化时，监听obj是监听不到的，需要进行深度监听

watch:{
    obj: {
        // handler方法里面有两个参数，第一个参数是新数据，第二个参数是上一次的数据；
        handler(newname) {
            console.log(newname);
        },
            deep: true
        // deep是否深度监听
    }
}

侦听器和计算属性对比

计算属性一定有返回值，侦听器没有返回值
计算属性会产生一个新的属性，而侦听器的内部一般都是对于现有属性进行操作

表单绑定

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

监听用户的输入事件以更新数据

文本框

<input *type*="text" *v-model*="val"> val: 'hello',
文本域

<textarea *v-model*="val2"></textarea> val2: 'world',
单个复选框布尔值

<input *type*="checkbox" *v-model*="val4">是否同意 val4: true,
单选框

男<input type="radio" name="sex" value="1" v-model="val3">
女<input type="radio" name="sex" value="0" v-model="val3">
val3: 1,

多选数组

<input type="checkbox" value="apple" name="fruite" v-model="val5">苹果
<input type="checkbox" value="banner" name="fruite" v-model="val5">香蕉
<input type="checkbox" value="whatm" name="fruite" v-model="val5">西瓜
val5:['apple']

修饰符

trim 再绑定时清楚两端多余空格
lazy 改变事件监听的模式，只在失去焦点的时候才进行值得反向绑定
number 强制将绑定值的数据类型转换为数值

详细代码

<!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>
</head>

<body>
    <form>
        <!-- <input type="text" :value="val" @input="change"> -->
        <input type="text" v-model="val">
        <textarea v-model="val2"></textarea>
        男<input type="radio" name="sex" value="1" v-model="val3">
        女<input type="radio" name="sex" value="0" v-model="val3">

        <input type="checkbox" v-model="val4">是否同意

        <li>
            <input type="checkbox" value="apple" name="fruite" v-model="val5">苹果
            <input type="checkbox" value="banner" name="fruite" v-model="val5">香蕉
            <input type="checkbox" value="whatm" name="fruite" v-model="val5">西瓜
        </li>
        <input type="text" v-model.trim="str" >
        <input type="text" v-model.lazy="str">
        <input type="text" v-model.number="num">
        <p>{{num+1}}</p>
    </form>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: 'form',
            data: {
                val: 'hello',
                val2: 'world',
                val3: 1,
                val4: true,
                val5:['apple'],
                str:'',
                num:1
            },
            methods: {
                change(e) {
                    this.val = e.target.value;
                }
            },
            watch:{
                str(newstr){
                    console.log(newstr);
                }
            }
        })
    </script>
</body>

</html>