2022-8-27 vue 第一天

什么是vue?
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。
它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。
无论是简单还是复杂的界面，Vue 都可以胜任。
创建实例，插值表达式

获取数组中的对象

<!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>
        <div id="app">
            <h1>{{user.msg}} --- {{user.name}} --- {{user.password}}</h1>
            <h1>{{lists[0]}}---{{lists[3]}}---{{lists[4]}}</h1>
            <h1>{{users[0].name}} --- {{users[0].age}}</h1>
        </div>

        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
                
                el: "#app",
                data: {
                    user: {
                        msg:"hello Vue",
                        name :"admin",
                        password: "123456",
                    },
                    lists: ["北京","上海","广州","深圳","杭州"],
                    users: [{name:"小强",age:25},{name:"小红",age:18}]
                },
            });

        </script>
    </body>
</html>

mothods: 中定义方法 ， v-on:click @click 两种方法定义单击事件

<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>
		<div id="app">
			<h1>年龄：{{age}}</h1>
			<input type="button" value="通过Vue的事件改变年龄每次+1" v-on:click="addage">
			<input type="button" value="通过Vue的事件改变年龄每次-1" @click="subage">
		</div>

		<script src="js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					msg:"hello Vue",
					age: 23,
				},
				methods: {
					addage: function() {
						// 想办法拿到data中的age属性，让它自增
						// this代表的是整个的vue实例
						this.age ++;
					},
					subage() {
						this.age --;
					}
				}
			});

		</script>
	</body>
</html>

image

image

v-for

<!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>
		<div id="app">
			<!-- v-for -->
			<!-- 
				v-for写在哪一个标签中，就会生成多个对应的标签

				注意：
					在使用v-for的时候，一定要加入:key，用来给vue内部提供重用和排序的唯一的值

			 -->
			<span v-for="(value,key,index) in user">
				{{index}} --- {{key}} --- {{value}}<br>
			</span>
			<ul>
				<li v-for="(value,index) in lists">
					{{index}} --- {{value}}
				</li>
			</ul>
			<ol>
				<li v-for="(u,index) in users" :key="u.id">
					{{index}} --- {{u.name}} --- {{u.age}}
				</li>
			</ol>
			<!-- <ol>
				<li v-for="(value,key,index) in ((user) in users)">
					{{index}} --- {{key}} --- {{value}}
				</li>
			</ol> -->
		</div>

		<script src="js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					user:{name:"小强",age:23},
					lists: ["北京","上海","广州","深圳","杭州"],
					users: [{name:"小强",age:25},{name:"小红",age:18}]
				},
			});

		</script>
	</body>
</html>

v-model ： 实现数据的双向绑定

<!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>
		<!-- 
			双向绑定：
				1、HTML部分发生变化，Vue实例中对应的属性也会变化
				2、Vue中发生变化，HTML中同样变化

		 -->
		<div id="app">
			<!-- 
				总结：
					1、使用v-model指定可以实现数据的双向绑定
					2、所谓的双向绑定，表单中的数据和Vue实例中data的数据变化是同步的
				MVVM架构：双向绑定机制
					Model：数据
					View：页面，页面展示数据
					VM：ViewModel 监听器
			 -->
			<input type="text" v-model="message">
			<br>
			<span>{{message}}</span>
			<br>
			<button @click="changeValue">通过改变JS中message的值改变文本框的值</button>
			<hr>
			<input type="radio" name="gender" value="m"
				v-model="gender">男
			<input type="radio" name="gender" value="w"
				v-model="gender">女
			<hr>
			<input type="checkbox" name="hobby" value="a" v-model="hobby">A
			<input type="checkbox" name="hobby" value="b" v-model="hobby">B
			<input type="checkbox" name="hobby" value="c" v-model="hobby">C
			<!-- <button @click="show">查看</button> -->

			<hr>
			<select v-model="address">
				<option value="x">X</option>
				<option value="y">Y</option>
				<option value="z">Z</option>
			</select>
			<button @click="show">查看</button>

			<input type="file">
		</div>

		<script src="js/vue.js"></script>
		<script>
			const app = new Vue({

				el: "#app",
				data: {
					message:'',
					gender:'w',
					hobby:[],
					address:'z',
				},
				methods: {
					changeValue() {
						this.message = prompt("请输入：");
					},
					show() {
						// console.log(this.hobby);
						console.log(this.address);
					}
				},
			});

		</script>
	</body>
</html>
posted @ 2022-08-27 20:59  阿萨德菩提子  阅读(21)  评论(0)  编辑  收藏  举报