JS-Vue-属性表单事件绑定

Hello World️

已于 2022-08-23 16:35:37 修改

阅读量411

点赞数

分类专栏：前端学习文章标签： vue.js javascript 前端

于 2022-08-23 16:32:06 首次发布

本文链接：https://blog.csdn.net/m0_51318597/article/details/126487851

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

属性绑定v-bind指令

<body>
    <div id="box">
        <!-- 你使用Vue时只关心数据和视图 数据一变化 视图自然会更新 -->
        <!-- v-bind 属性绑定
		可以绑定html标签的自带属性 然后让属性值 称为变量-->
        <a v-bind:href="url">进入网易</a>

        <!-- v-bind 可以简写成 : -->
        <a :href="url">进入网易</a>
		
        <img v-bind:src="imageSrc">

        <!-- 绑定点击事件 -->
        <button  @click="change()">更换照片</button>
    </div>
</body>
<script>
    new Vue({
        el:'#box',
        data:{
            msg:'hello',
            url:'http://www.163.com',
            imageSrc:'img/cat.jpg'
        },
        //vue定义函数的地方
        methods:{
            change(){
                //this 代表vue实例
                //这就是改变数据
                //你会发现 我们使用vue基本上 不用我们去操作DOM 我们只关心数据和视图 数据一变化 视图就会自动更新。
                //视图变化也会引起数据的变化
                this.imageSrc='img/gril.jpg'
            }
        }
    })
</script>

class属性的绑定

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			.aClass {
				color: red;
			}

			.bClass {
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h1 class="aClass bClass">style样式写法</h1>
			
			<!-- vue绑定class属性后 class属性的值用 '' 引起来 -->
			<h1 v-bind:class="'aClass'">单个class属性的值用 '' 引起来</h1>

			<!-- vue绑定class属性后 class属性的值用 '' 引起来
				 多个class的值写到数组中-->
			<h1 v-bind:class="['aClass','bClass']">多个class的值写到数组中</h1>
			
			<!-- 写成变量 -->
			<h1 v-bind:class="[a,b]">变量写法</h1>
			
			<!-- 最常用的写法 JSON对象
				 {'aClass':true,'bClass':true}
				 true表示生效 false表示不生效-->
			<h1 v-bind:class="{'aClass':aflag,'bClass':bflag}">JSON对象写法</h1>
		</div>
	</body>
	<script>
		new Vue({
			el: '#box',
			data: {
				msg: 'hello',
				a: 'aClass',
				b: 'bClass',
				aflag:true,
				bflag:true
			}
		})
	</script>
</html>

切换class

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			.aClass {
				color: red;
				background-color: yellow;
			}
			.bClass {
				color: white;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<h1 @click="change()" v-bind:class="{'aClass':flag,'bClass':!flag}">切换样式</h1>
		</div>
	</body>
	<script>
		new Vue({
			el: '#box',
			data: {
				flag: true
			},
			methods: {
				change() {
					this.flag = !this.flag;
				}
			}
		})
	</script>
</html>

style属性的绑定

<body>
    <div id="box">
        <h1 style="color: red;">style内联样式</h1>

        <!-- vue绑定了style属性 值是一个JSON对象 -->
        <h1 :style="{'color':myColor,'backgroundColor':myBackground}">vue绑定style属性</h1>

        <h1 :style="[jsonObj,jsonObj2]">取出整个JSON对象</h1>
    </div>
</body>

<script>
    new Vue({
        el: '#box',
        data: {
            myColor: 'white',
            myBackground: 'green',
            jsonObj: {
                'color': 'yellow',
                'backgroundColor': 'pink'
            },
            jsonObj2: {
                'font-size': '50px'
            }
        }
    })
</script>

切换style属性

<body>
    <div id="box">
        <h1 @click="change()" :style="{'color':myColor,'backgroundColor':myBackground}">
            vue绑定style属性
        </h1>
    </div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            myColor: 'white',
            myBackground: 'green',

            flag: 'false'
        },
        methods: {
            change() {
                if (this.flag) {
                    this.myColor = 'pink';
                    this.myBackground = 'black';
                } else {
                    this.myColor = 'white';
                    this.myBackground = 'green';
                }
                this.flag = !this.flag;
            }
        }
    })
</script>

input表单v-model指令

<body>
    <div id="box">
        <!-- 
        没有响应式的效果
        直接使用v-bind绑定value属性
        -->
        <input type="text" v-bind:value="msg">

        <!-- 
        有响应式的效果
        针对表单的数据绑定
        采用v-model来进行数据绑定 
        -->
        <input type="text" v-model="msg">
        {{msg}}
        <!--
        响应式效果:
        数据的双向绑定
        body -> input标签是视图 
        script -> Vue -> data是数据
        数据改----视图变
        视图变----数据变
        -->

    </div>
</body>

<script>
    new Vue({
        el: '#box',
        data: {
            msg: 'hello'
        }
    })
</script>

收集表单中的数据

<body>
    <div id="box">
        <center>
            <h3>用户注册</h3>
            <form action="123.html" method="get" @submit.prevent="registerUser()">
                用户名：<input type="text" id="a" v-model="username" 
                           name="username" value="" placeholder="请输入用户名" 
                           required="required" maxlength="10" />
                <br>
                密码：<input type="password" id="b" v-model="password" 
                          name="password" value="" placeholder="请输入密码" 
                          required="required" maxlength="6" />
                <br>
                生日：<input type="date" v-model="birthday" 
                          name="birthday" id="c" value="" />
                <br><br>
                <!-- checked="checked" 默认选中  -->
                性别: <input type="radio" v-model="sex" id="d" name="sex" value="1" />男
                <input type="radio" id="e" v-model="sex" name="sex" value="0" />女
                <br>
                <!-- checked="checked" 默认选中  -->
                爱好： <input type="checkbox" v-model="hobby" name="hobby" id="" value="lq" />篮球
                <input type="checkbox" v-model="hobby" name="hobby" id="" value="zq" />足球
                <input type="checkbox" v-model="hobby" name="hobby" id="" value="pq" />排球
                <input type="checkbox" v-model="hobby" name="hobby" id="pp" value="ppq" /><label for="pp">乒乓球</label>
                <br>
                学历：<select v-model="xueli" name="xueli">
                <option value="">--请选择学历--</option>
                <option value="youer">幼儿园</option>
                <option value="xiaoxue">小学</option>
                <option value="zhongxue">中学</option>
                <option value="daxue">大学</option>
                </select>
                <br><br><br>
                <input type="submit" value="注册" />
            </form>
        </center>
    </div>
</body>
<script>
    const app = new Vue({
        el: '#box', //指定模板标签
        //data 定义数据
        data: {
            username: '',
            password: '',
            birthday: '',
            sex: '1',
            hobby: ['lq', 'zq'], //多选框设计为数组。
            xueli: 'daxue'
        },
        methods: {
            registerUser: function() {
                //把表单中的数据 JSON字符串提交给后台
                //我们之前的提交的格式username=zhangsan&passwrod=123456
                let username = this.username;
                let password = this.password;
                let birthday = this.birthday;
                let hobby = this.hobby;
                let xueli = this.xueli;
                var jsonObject = {
                    username,
                    password,
                    birthday,
                    hobby,
                    xueli
                }
                var jsonStr = JSON.stringify(jsonObject)
                alert("异步提交:" + jsonStr);
            }
        }
    });
</script>

收集表单中的数据到JSON对象中

<body>
    <div id="box">
        <center>
            <h3>用户注册</h3>
            <form action="123.html" method="get" @submit.prevent="registerUser()">
                用户名：<input type="text" id="a" v-model="formData.username" 
                           name="username" value="" placeholder="请输入用户名" 
                           required="required" maxlength="10" />
                
                <br>
                密码：<input type="password" id="b" v-model="formData.password" 
                          name="password" value="" placeholder="请输入密码" 
                          required="required" maxlength="6" />
                
                <br>
                生日：<input type="date" v-model="formData.birthday" 
                          name="birthday" id="c" value="" />
                
                <input type="submit" value="注册" />
            </form>
        </center>
    </div>
</body>
<script>
    const app = new Vue({
        el: '#box', //指定模板标签
        //data 定义数据
        data: {
            formData: {
                username: '',
                password: '',
                birthday: '',
            }
        },
        methods: {
            registerUser: function() {
                //把表单中的数据 JSON字符串提交给后台
                var jsonStr = JSON.stringify(this.formData)
                alert("异步提交:" + jsonStr)
            }
        }
    });
</script>

计算属性

<body>
    <div id="box">
        姓: <input type="text" v-model="xing"><br>
        名: <input type="text" v-model="ming"><br>
        <!-- 
        不推荐在标签上写逻辑
        全名: <input type="text" v-model=xing.concat(ming)>
        -->
        全名: <input type="text" v-model="quanming">
    </div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            xing: '',
            ming: '',

        },
        //计算属性： 绑定的这个属性的值
        //是根据其他属性经过逻辑运算所得来的 那就可以用计算属性
        computed:{
            //quanming这是计算属性 它的值根据其他属性的经过逻辑运算得来的
            quanming: function(){
                //第一次初始化时 就会调用一次
                //这个函数中 所用的其他属性的值一变化也会调用
                return this.xing.concat(this.ming);
            }
        }
    })
</script>

侦听器

<body>
    <div id="box">
        <input type="text" v-model="msg"><br>
        姓: <input type="text" v-model="xing"><br>
        名: <input type="text" v-model="ming"><br>
    </div>
</body>

<script>
    new Vue({
        el: '#box',
        data: {
            msg:'',
            xing: '',
            ming: '',

        },
        //用来侦听属性值的变化
        watch: {
            msg:function(newValue,oldValue){
                //只要侦听的msg这个属性的值一变化 这个函数就调用
                //msg变化之前的值 oldValue
                //msg变化之后的值 newValue
                console.log(newValue)
                this.xing = newValue;
            }
        }
    })
</script>

<body>
    <div id="box">
        <input type="text" v-model="msg"><br>
        姓: <input type="text" v-model="xing"><br>
        名: <input type="text" v-model="ming"><br>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#box',
        data: {
            msg: 'hello',
            xing: '',
            ming: ''
        }
    })

    //vue实例方法 侦听器
    vm.$watch('msg', function(newValue, oldValue) {
        console.log("新值:" + newValue + "  旧值:" + oldValue)
    })

    //vue 实例属性
    var msg = vm.$data.msg;
    alert(msg);

    //获取vue挂载的模板对象
    var divObj = vm.$el;
    alert(divObj);

    //如果Vue实例在实例化时没有收到el选项 则它处于"未挂载"状态 没有关联DOM元素
    //手动挂载模板
    //vm.$mount('#box');
</script>

事件的绑定v-on指令

<body>
    <div id="box">
        <!-- v-on:click=处理函数 -->
        <button v-on:click="show1()">点我试试</button>
        <button v-on:click="show2()">点我试试</button>

        <!-- 事件绑定的简写方式 @事件名="处理函数" -->
        <button @click="show3(100,msg)">点我试试</button>

        <!-- 处理函数的括号 如果不传参 可以省略不写 -->
        <button @click="show4">点我试试</button>

    </div>
</body>

<script>
    new Vue({
        el: '#box',
        data: {
            msg: 'hello'
        },
        // Vue定义事件处理函数的地方
        methods: {
            //传统的语法定义函数
            show1: function() {
                alert("hahaha")
            },
            //ES6的语法
            show2() {
                alert("heihei")
            },
            show3(num,str) {
                alert("你真摆"+num+str)
            },
            show4(){
                alert("哈哈哈");
            }
        }
    })
</script>

事件对象

<body>
    <div id="box">
        <!-- vue传递事件对象
		$event获取事件对象-->
        <button @click="show($event)">一个按钮</button>
    </div>
</body>
<script>
    new Vue({
        el: '#box',
        methods: {
            show(e) {
                e.currentTarget.style.background="green";
            }
        }
    })
</script>

事件对象阻止冒泡

<head>
    <script src="js/vue.js"></script>
    <style>
        #wai {
            height: 200px;
            width: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="wai" @click="wai($event)">
            <button id="nei" @click="nei($event)">按钮</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            msg: 'hello'
        },
        methods: {
            wai(e) {
                //通过事件对象阻止冒泡
                e.stopPropagation();
                alert("wai!");
            },
            nei(e) {
                e.stopPropagation();
                alert("nei!");
            }
        }
    })
</script>

使用Vue提供的事件修饰符处理冒泡

<head>
    <script src="js/vue.js"></script>
    <style>
        #wai {
            height: 200px;
            width: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <!--
    事件修饰符
    在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求
    尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

    为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
    .stop 阻止冒泡
    .prevent 阻止默认行为
    .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
    .self 只当在 event.target 是当前元素自身时触发处理函数
    .once 事件只执行一次
    .passive 告诉浏览器你不想阻止事件的默认行为
    -->
    <div id="box">
        <!-- @click.stop 事件名.事件修饰符 -->
        <div id="wai" @click.stop="wai()">
            <button @click.stop="nei()" type="button">阻止冒泡</button>
        </div>

        <!-- 阻止默认行为 -->
        <a href="http://www.163.com" @click.prevent="show()">阻止默认行为</a>
        <br>

        <!-- 让事件只执行一次-->
        <button @click.once="hehe()">事件只执行一次</button>

        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat">修饰符串联</a>

    </div>
</body>
<script>
    new Vue({
        el: '#box',
        data: {
            msg: 'hello'
        },
        methods: {
            wai: function() {
                alert("wai!");
            },
            nei: function() {
                alert("nei");
            },
            show: function() {
                alert("a标签的默认行为")
            },
            hehe() {
                alert("hehe!")
            },
            doThat() {
                alert("阻止冒泡和默认行为")
            }

        }
    })
</script>

键盘鼠标事件修饰符

<body>
    <div id="box">
        <input type="text" @keypress="show($event)">
        <!--  
        键盘按键修饰符
        为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
        .enter
        .tab
        .delete (捕获“删除”和“退格”键)
        .esc
        .space
        .up
        .down
        .left
        .right
		-------------------
        按下Alt + 释放C触发
        <input @keyup.alt.67="clear">
        按下Alt + 释放任意键触发
        <input @keyup.alt="other">
        按下Ctrl + enter时触发
        <input @keydown.ctrl.13="submit">
		-------------------

        <input v-on:keyup.13="submit">
        <input @keypress.enter="show2()">
        -->
        <input type="text" @keypress.enter="show2()">
        
        <!--           
        鼠标按钮修饰符
        2.2.0 新增
        .left
        .right
        .middle
        -->
        <button @mousedown.left="show3()">一个按钮</button>
    </div>

</body>
<script>
    new Vue({
        el: '#box',
        data: {
            msg: 'hello'
        },
        methods: {
            show(e) {
                if (e.keyCode === 13) {
                    alert("搜索")
                }
            },
            show2() {
                alert("搜索")
            },
            show3() {
                alert("按了鼠标左键")
            }
        }
    });
</script>