vue基础语法——02

最新推荐文章于 2023-07-18 18:27:13 发布

无感_K

最新推荐文章于 2023-07-18 18:27:13 发布

阅读量327

点赞数

分类专栏： vue 笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_55966394/article/details/121052112

版权

笔记同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

vue

10 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js的基础特性，包括样式绑定（class和style），事件处理器（事件修饰符、按键修饰符）以及表单处理。同时，通过实例展示了自定义组件的创建和组件间的通信，如自定义事件的使用，实现组件间的数据传递。

摘要由CSDN通过智能技术生成

目标

1.样式绑定

2.事件处理器

3.表单

4.自定义组件

5.组件通信

一、样式绑定

1、 class绑定

使用方式：v-bind:class="expression"
expression的类型：字符串、数组、对象

2 、style绑定

v-bind:style="expression"
expression的类型：字符串、数组、对象

①、将字体变红色变大

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
        <style>
            .f100{
                font-size: 100px;
            }
        </style>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <h3 :class="f100" v-bind:style="colorred">{{msg}}</h3>
        </div>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {msg:'Hello World',
                colorred:'color:#ED4948',
                f100:'f100'
                };
            }
        })
    </script>

二、事件处理器

事件监听可以使用v-on 指令

2.1 、事件修饰符

Vue通过由点(.)表示的指令后缀来调用修饰符

.stop .prevent .capture .self .once

<a v-on:click.stop="doThis"></a>



<form v-on:submit.prevent="onSubmit"></form>



<a v-on:click.stop.prevent="doThat"></a>



<form v-on:submit.prevent></form>



<div v-on:click.capture="doThis">...</div>



<div v-on:click.self="doThat">...</div>



<a v-on:click.once="doThis"></a>

2.2、按键修饰符

Vue允许为v-on在监听键盘事件时添加按键修饰符：



<input v-on:keyup.13="submit">

Vue为最常用的按键提供了别名



<input v-on:keyup.enter="submit">

全部的按键别名：

.enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left

.right .ctrl .alt .shift .meta

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- vue的相关依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<style>
		.red{
			width: 400px;
			height: 400px;
			background-color: red;
		}
		.darkorange{
			width: 300px;
			height: 300px;
			background-color: darkorange;
		}
		.blue{
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		.greenyellow{
			width: 100px;
			height: 100px;
			background-color: greenyellow;
		}
		</style>
		
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>冒泡事件</p>
			<div class="red" @click="red">
				<div class="darkorange" @click="darkorange">
					<div class="blue" @click="blue">
						<!-- 阻止单击事件冒泡  事件修饰符stop-->
						<div class="greenyellow" @click.stop="greenyellow"></div>
					</div>
				</div>
			</div>
			<p>提交答案</p>
			<!-- 只能提交一次     事件修饰符 once -->
			<button @click.once="dosub">提交</button>
			<p>按键修饰符</p>
			<!--
			 什么都不填，鼠标移进去触发事件；@click="dosub"
			 回车触发事件；v-on:keyup.enter="dosub"
			 -->
			<input v-on:keyup.enter="dosub" />
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界   Es6的具体体现
		new Vue({
			el:'#app',
			data() {
				return {
					f200:'f200',
					
					};
			},
			methods:{
				red(){
					alert("red");
				},
				darkorange(){
					alert("darkorange");
				},
				blue(){
					alert("blue");
				},
				greenyellow(){
					alert("greenyellow");
				},
				dosub(){
					alert("提交答案");
				}
			}
		})
	</script>
</html>

页面

绿色区域做了冒泡拦截，所以点击绿色，不会依次触发父节点的事件。

提交按钮做了只能点击一次

输入框做了键位修饰符，所以点击'Enter'键，会触发事件。

三、 Vue表单

1、常用控件

文本框/密码框/文本域/隐藏域

单选复选框/多选复选框

单选按钮

下拉框

注意：确认框勾选才能提交是怎么实现的？

没很难理解的东西。

实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
        <title>表单</title>
    </head>
    <body>
        <div id="app">
            <h1>标题</h1>
            <ul>
                <li>
                    <p>vue表单</p>
                    <label>姓名：</label><input v-model="uname" /><br />
                    <label>密码：</label><input v-model="upwd" type="password" /><br />
                    <!-- 将用户的输入值转为 Number 类型 -->
                    <label>年龄：</label><input v-model.number="age" /><br />
                    <label>性别：</label>
                    <input type="radio" v-model="sex" name="sex" value="1" />男
                    <input type="radio" v-model="sex" name="sex" value="2" />女<br />
                    <label>爱好：</label>
                    <div v-for="h in hobby">
                        <input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
                    </div>
                    <label>类别：</label>
                    <select v-model="type">
                        <option value="-1">===请选择===</option>
                        <option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
                    </select><br />
                    <label>备注：</label>
                    <textarea v-bind:value="mark"></textarea><br />
                    确认<input type="checkbox" v-model="flag" />
                    <input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
                </li>
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    uname: null,
                    upwd: null,
                    age: 18,
                    sex: 2,
                    hobby: [{
                        id: 1,
                        name: '唱歌'
                    }, {
                        id: 2,
                        name: '打篮球'
                    }, {
                        id: 3,
                        name: '弹钢琴'
                    }],
                    hobbies: [],
                    types: [{
                        id: 1,
                        name: 'A'
                    }, {
                        id: 2,
                        name: 'B'
                    }, {
                        id: 3,
                        name: 'C'
                    }],
                    type: null,
                    mark: '学生备注',
                    flag: false
                }
            },
            computed: {
                show: function() {
                    return !this.flag;
                }
            },
            methods: {
                doSubmit: function() {
                    console.log('doSubmit')
                    var obj = {
                        uname: this.uname,
                        upwd: this.upwd,
                        age:this.age+18,
                        sex: this.sex,
                        hobbies:this.hobbies,
                        type: this.type,
                        mark: this.mark,
                    }
                    console.log(obj);
                }
            }

        })
    </script>
</html>

页面效果：

注：页面最后一行是类似于平常我们使用软件时的隐私政策之类的，不勾选就无法提交。

具体实现代码时应用了监听属性。

四、自定义组件

自己根据需求注册组件。

分两种：全局组件，局部组件。和之前过滤器分类相差不大。

全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。

局部组件: new Vue({el:'#d1',components:{...}})

注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
        <!-- 需求是：当引用一个myButton时，要在页面上显示一个独特标记的按钮 -->
            <my-button m="a"></my-button>

            <my-button m="b"></my-button>
        </div>
    </body>
    
    <script type="text/javascript">
        Vue.component('my-button', {
        // props是定义组件中的变量的
            props:['m'],
        // template：模板，定义将要显示的内容
            template:'<button v-on:click="incrn">被{{m}}点击了{{n}}次</button>',
            data:function(){
                return{
                    n:1
                }
            },
            methods:{
                // 增加数量
                incrn(){
                    this.n++;
                }
            }
        });
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return{
                f200:'f200',
                };
            }
        })
    </script>
</html>

点击一次，计数会增加。

不同组件实例之间数据互不影响

五、组件通信(自定义事件)

由于自定义的组件内部都是一个独立的区域，所以没有与外部产生数据交互，而需求时要组件内部于外部产生数据交互，就比如说需要拿到上面定义的标签的点击次数，等类似的数据。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<p>vue组件</p>
					<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
					<my-button m="naruto" v-on:three-click="xxx"></my-button>
				</li>
			</ul>
		</div>
	</body>
	<script>
		// 定义全局组件的方式
		Vue.component('my-button', {
			props: ['m'],
			template: '<button v-on:click="doClickMyButton">我是一个自定义组件，被{{m}}点了{{n}}次</button>',
			data: function() {
				return {
					n: 0
				};
			},
			methods: {
				doClickMyButton: function() {
					console.log('doClickMyButton方法被调用');
					this.n++;
					if (this.n % 3 == 0) {
						this.$emit('three-click', this.n, 'http://www.baidu.com', '666');
					}
				}
			}
		})
		var vm = new Vue({
			el: "#app",
			methods: {
				// 当子组件传值父组件时,只需要在父组件的方法中定义参数即可
				xxx: function(a, b, c) {
					console.log('xxx方法被调用')
					console.log('my-button组件传递过来的参数1：' + a);
					console.log('my-button组件传递过来的参数2：' + b);
					console.log('my-button组件传递过来的参数3：' + c);
				}
			}
		});
	</script>
</html>

这里的“my-button”组件需要调用定义在vm中的函数，在学习组件通信之前是做不到的而组件也只能调用定义在组件内部的方法。而现在通过触发事件‘$emit()’进行调用。

效果：

如果通信成功，那么在点击数到达3的倍数时，会触发外部的xxx方法。