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

    文章目录

    属性绑定v-bind指令

    <body>
    <div id="box">
        
        
        <a v-bind:href="url">进入网易a>

        
        <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    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>
			
			
			<h1 v-bind:class="'aClass'">单个class属性的值用 '' 引起来h1>

			
			<h1 v-bind:class="['aClass','bClass']">多个class的值写到数组中h1>
			
			
			<h1 v-bind:class="[a,b]">变量写法h1>
			
			
			<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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    切换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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    style属性的绑定

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

        
        <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    切换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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    input表单v-model指令

    <body>
    <div id="box">
        
        <input type="text" v-bind:value="msg">

        
        <input type="text" v-model="msg">
        {{msg}}
        

    div>
body>

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    收集表单中的数据

    <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>
                
                性别: <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>
                
                爱好： <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73

    收集表单中的数据到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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    计算属性

    <body>
    <div id="box">
        姓: <input type="text" v-model="xing"><br>
        名: <input type="text" v-model="ming"><br>
        
        全名: <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    侦听器

    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    事件的绑定v-on指令

    <body>
    <div id="box">
        
        <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    事件对象

    <body>
    <div id="box">
        
        <button @click="show($event)">一个按钮button>
    div>
body>
<script>
    new Vue({
        el: '#box',
        methods: {
            show(e) {
                e.currentTarget.style.background="green";
            }
        }
    })
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    事件对象阻止冒泡

    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

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

    <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.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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68

    键盘 鼠标事件修饰符

    <body>
    <div id="box">
        <input type="text" @keypress="show($event)">
        
        <input type="text" @keypress.enter="show2()">
        
        
        <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
  • 相关阅读:
    VFP常用命令、函数、属性、事件和方法
    基于Javaweb的商铺租赁管理系统/租赁管理系统
    网站检测-网站检测软件-免费网站安全检测工具
    附下载|《2022年中国中小微企业数字化转型路径研究报告》上新啦~
    vue2项目架构
    仿游戏热血江湖游戏类22（得到强化）
    C++提高编程
    深入剖析机器学习领域的璀璨明珠——支持向量机算法
    React-RouterV6+AntdV4实现Menu菜单路由跳转
    UserWarning 屏蔽
  • 原文地址：https://blog.csdn.net/m0_51318597/article/details/126487851