Vue入门_vuepok-CSDN博客

本文链接：https://blog.csdn.net/kobe_okok/article/details/121088603

文章目录

1 MVVM模式的实现者
2 vue的hello world
3 v-bind
4 v-if v-else-if v-else
5 v-for
6 v-on
7 v-model
8 组件
9 Axios异步通信

1 MVVM模式的实现者

Model：模型层，在这里表示JavaScript对象
View:视图层，表示DOM对象
ViewModel：链接视图和数据的中间件，Vue就是MVVM中的ViewModel层的实现者

=双向数据绑定==
数据发生变化，视图随之改变
视图发生变化，数据也随之改变

2 vue的hello world

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./main.js">	</script>
		<script type="text/javascript" src="./vue.js">	</script>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			{{ message }}
		</div>
	</body>
	<script>
		// 创建一个vue对象
		var app = new Vue({
			el:"#app",
			data:{
				message:"Hello Vue!"
			}
		});
	</script>
</html>

在这里插入图片描述

3 v-bind

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./main.js">	</script>
		<script type="text/javascript" src="./vue.js">	</script>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			<span v-bind:title="message">
				提示信息
			</span>
			<a v-bind:href="url">go</a>
		</div>
	</body>
	<script>
		// 创建一个vue对象
		var app = new Vue({
			el:"#app",
			data:{
				message:"Hello Vue!",
				url:"http://www.baidu.com"
			}
		});
	</script>
</html>

在这里插入图片描述

4 v-if v-else-if v-else

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./main.js">	</script>
		<script type="text/javascript" src="./vue.js">	</script>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			<h1 v-if="type==='A'">A</h1>
			<h1 v-else-if="type==='B'">B</h1>
			<h1 v-else="type==='C'">C</h1>
		</div>
	</body>
	<script>
		// 创建一个vue对象
		var app = new Vue({
			el:"#app",
			data:{
				type: 'A'
			}
		});
	</script>
</html>

5 v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./main.js">	</script>
		<script type="text/javascript" src="./vue.js">	</script>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			<ol>
				<li v-for="item in items">
					<h3> {{ item.name }} - {{ item.age }} </h3>
				</li>
			</ol>
		</div>
	</body>
	<script>
		// 创建一个vue对象
		var app = new Vue({
			el:"#app",
			data:{
				items:[
					{
						name:'小红',
						age:15
					},
					{
						name:'小网',
						age:18
					},
					{
						name:'小找',
						age:10
					}
				]
			}
		});
	</script>
</html>

6 v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./main.js">	</script>
		<script type="text/javascript" src="./vue.js">	</script>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			<button v-on:click="sayHi">Click me</button>
		</div>
	</body>
	<script>
		// 创建一个vue对象
		var app = new Vue({
			el:"#app",
			data:{
				message:"Hello vue!"
			},
			methods:{
				sayHi:function(){
					alert(this.message);
				}
			}
		});
	</script>
</html>

7 v-model

双向数据绑定，必须是UI元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./main.js">	</script>
		<script type="text/javascript" src="./vue.js">	</script>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			输入框：
			<input type="text" v-model="message"> {{ message }}
			<br>
			多行文本框:
			<textarea rows="" cols="" v-model="text"></textarea> {{ text }}
			<br>
			单选框:
			<input type="radio" v-model="choice" value="男"> 男
			<input type="radio" v-model="choice" value="女"> 女
			您的选择是:{{ choice }}
			<br>
			下拉列表框
			<select name="" id="" v-model="selected">
				<option value="" disabled="">--请选择--</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			{{ selected }}
			<br>
		</div>
	</body>
	<script>
		// 创建一个vue对象
		var app = new Vue({
			el:"#app",
			data:{
				message:"",
				text:"",
				choice:"",
				selected:""
			},
			methods:{}
		});
	</script>
</html>

8 组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./main.js">	</script>
		<script type="text/javascript" src="./vue.js">	</script>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			<hello v-for="item in items" v-bind:val="item"></hello>
		</div>
	</body>
	<script>
		// 新建一个组件,第一个参数是组件名称，第二个参数是一个对象
		Vue.component("hello",{
			props : ['val'], 
			template: "<li>{{ val }}</li>"
		})
		
		// 创建一个vue对象
		var app = new Vue({
			el:"#app",
			data:{
				items:["赵云","关羽","张飞"]
			}
		});
	</script>
</html>

在这里插入图片描述

9 Axios异步通信

Axios是一个开源的，可以用在浏览器和nodejs端的异步通信框架，主要功能是实现AJAX异步通讯

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./main.js">	</script>
		<script type="text/javascript" src="./vue.js">	</script>
		<script type="text/javascript" src="./axios.js"> </script>
	</head>
	<body>
		<!-- view层 -->
		<div id="app">
			<li v-for="f in info"> 
				{{ f }}
			</li>
		</div>
	</body>
	<script>
		// 创建一个vue对象
		var app = new Vue({
			el:"#app",
			data(){
				return {
					info: null
				}
			},
			mounted(){
				axios
				.get('file.json')
				.then(response=>(this.info = response.data))
			}
		});
	</script>
</html>