Vue_入门

基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入vue.js文件 -->
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!-- view 部分  view部分 对应的就是html的标签+vue的动态显示的标签 -->
		<div id="app">
			<h1>{{title}}</h1>
			<p>{{content}}</p>
			<p>{{show("小明")}}</p>
			<p>{{show("小宏")}}</p>
		</div>

		<script type="text/javascript">
			// 定义ViewModel对象
			var vue = new Vue({
				el : "#app", // 定义视图的id
				data : {
					title: "今天好热啊",
					content: "杭州一下子进入夏天了"
				}, // 定义model数据
				methods: {
					show : function(name){
						return "我的名字叫"+name+",我是通过调用show方法显示出来的";
					}
				} // 定义方法
			});
			
			// Vue对象属性 vue对象的数据属性和方法属性 可以直接使用对象.属性名或者方法名使用
			console.log(vue.title);
			console.log(vue.show("张三")); // 调用方法
			
			// Vue对象本身属性 使用$开头用于区分的
			console.log(vue.$data.title);
			console.log(vue.$data);		
			console.log(vue.$el == document.getElementById("app"));
		</script>	
	</body>
</html>

v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<!--
			v-html = "" 指令作用是解析文本中的html标签
		-->
		<div id="app">
			<p>{{message}}</p>
			<p v-html="message"></p>
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el: "#app",
				data: {
					message: "<a href='https://www.baidu.com'>百度一下</a>"
				}
			});			
		</script>	
	</body>
</html>

v-bind

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			.red{
				color: red;
			}
			.green{
				color: green;
			}
			.max{
				font-size: 56px;
			}
			.min{
				font-size: 20px;
			}
			
		</style>
	</head>
	<body>
		<!--
			v-bind指令
				v-bind:attr   attr是html的属性 用于绑定html的属性的
				
				简写为
					:attr 
		-->
		<div id="app">
			<p v-bind:title="title">{{message}}</p>
			<input type="text" :value="myname"/>
			<a :href="url">百度一下</a>
			
			<input type="button" value="按钮" :disabled="!btnEnabled" onclick="vue.btnEnabled = false"/>
			
			<!--
				修改data的值，会影响到view中的值的
			-->
			<input type="button" value="修改myname的值" onclick="vue.myname = '李四'"/>
		
			<!--
				动态绑定添加的class样式
			-->
			<p :class="{'red':wrong, 'green':!wrong, 'max': wrong,'min': !wrong}">带样式的段落</p>
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el: "#app",
				data: {
					message: "段落",
					title: "段落标题",
					myname: "张三",
					url: "https://www.baidu.com",
					btnEnabled : true,
					wrong: false
				}
			});			
		</script>	
	</body>
</html>

v-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
	</head>
	<body>
		<!--
			v-if
			v-else-if
			v-else
		-->
		<div id="app">
			<p v-if="days == 1">星期一</p>
			<p v-else-if="days == 2">星期二</p>
			<p v-else>其他</p>
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el: "#app",
				data: {
					days : 2
				}
			});
		</script>
	</body>
</html>

v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
	</head>
	<body>
		<!--
			v-for="item in data"
		-->
		<div id="app">
			<ul>
				<li v-for="item in news"><a :href="'detail?newsid='+item.newsId">{{item.title}}</a></li>
			</ul>
			
			<select>
				<option v-for="item in citys" :value="item.cityCode">{{item.city}}</option>
			</select>
			
			<table border="1">
				<tr>
					<th>序号</th>
					<th>名字</th>
				</tr>
				<tr v-for="(item,index) in names">
					<td>{{index+1}}</td>
					<td>{{item}}</td>
				</tr>
				
			</table>
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el: "#app",
				data: {
					news : [
						{newsId:1,title:'title1',content:'content1'},
						{newsId:2,title:'title2',content:'content2'},
						{newsId:3,title:'title3',content:'content3'}
					],
					citys: [
						{cityCode: "0571", city: "杭州"},
						{cityCode: "0572", city: "宁波"},
						{cityCode: "0573", city: "温州"}
					],
					names : ["张三","张思","张无"]
				}
			});
		</script>
	</body>
</html>

v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<div v-show="isInsert">新增</div>
			<div v-show="isUpate">修改</div>
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el: "#app",
				data: {
					isUpate : true,
					isInsert : false
				}
			});
		</script>
	</body>
</html>

v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
	</head>
	<body>
		<!--
			v-model 双向绑定指令 只适用于表单元素
			封装一个对象User
			{
					username: "",
					sex: "",
					hobby: [],
					address: [
						{"name": "", phone:"", addr: ""},
						{"name": "", phone:"", addr: ""},
						{"name": "", phone:"", addr: ""}
					]
			}	
		
			v-model 属性
				lazy 当元素失去焦点后，data中的数据才会更新
				number 自动将元素中的内容转换成数字
				trim 自动替换掉元素中内容前后的空格
		
		-->
		<div id="app">
			<input type="text" v-model.number="count"/>
			<input type="button" value="点击+1" v-on:click="count=count+1" />
			
			用户名：<input type="text" v-model.lazy.trim="user.username"/>
		
			
			<br/>
			性别:
			<input type="radio" name="sex" v-model="user.sex" value="1"/>女
			<input type="radio" name="sex" v-model="user.sex" value="2"/>男
			
			<br/>
			爱好：
			<input type="checkbox" name="hobby" v-model="user.hobby" value="1"/>打游戏
			<input type="checkbox" name="hobby" v-model="user.hobby" value="2"/>打游戏
			<input type="checkbox" name="hobby" v-model="user.hobby" value="3"/>打游戏
			<input type="checkbox" name="hobby" v-model="user.hobby" value="4"/>打游戏
			
			<br/>
			<input type="button" value="新增收货地址" onclick="addAddress()"/>		
			
			<ul>
				<li v-for="item in user.address">
					联系人：<input type="text" v-model="item.name"/>
					电话号码:<input type="tel" v-model="item.phone"/>
					收货地址:<input type="tel" v-model="item.addr"/>
				</li>
			</ul>
			
			{{user}}
			</div>
		<script type="text/javascript">
			var vue = new Vue({
				el: "#app",
				data: {
					user: {
							username: null,
							sex: 1,
							hobby: [],// 复选框的话 一定要明确是数组类型
							address: []
					},
					count : 0
				}
			});
			
			
			function addAddress(){
				var address = {
					name : null,
					phone : null,
					addr : null
				};
				
				// 将对象保存在vue的data中
				vue.user.address.push(address);
			}
		</script>	
	</body>
</html>

v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
	</head>
	<body>
		<!--
			v-on 绑定事件 事件触发的函数要在vue的methods属性中定义
				v-on:事件名字
				可以简写为 
				@事件名字 
		-->
		<div id="app">
			<input type="button" value="点击+1" onclick="vue.increament()"/>
			<input type="button" value="点击+1" v-on:click="increament()"/>
			<input type="button" value="点击+1" v-on:click="count++"/>
			<input type="button" value="点击+1" @click="count++"/>
			<span>{{count}}</span>
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el: "#app",
				data: {
					count : 1
				},
				methods: {
					increament : function(){
						// 在vue的对象中 定义的方法中使用的this表示的vue对象
						this.count ++;
					}
				}
				
			});
		</script>
	</body>
</html>

computed

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		
	</head>
	<body>
		<!--
			计算属性
		-->
		<div id="app">
			用户名：<input type="text" v-model="name">
			<br/>
			<div v-show="nameInvalid" style="color:red">用户名要求6-18位的字符组成 ，不能以数字开头</div>
		</div>
		<script type="text/javascript">
			var vue = new Vue({
				el: "#app",
				data: {
					name : null
				},
				computed: {
					// 计算属性
					nameInvalid : function(){
						if(this.name == null){
							return false;
						}
						var reg = /^[^\d].{5,17}$/;
						if(reg.test(this.name)){
							return false;
						}else{
							return true;
						}
					}
					
				}
			});
		</script>
	</body>
</html>

ajax-get

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax-get请求</title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-resource.js"></script>
</head>
<body>
	<div id="app">
		<h1>用户列表</h1>
		<table border="1" width="80%" align="center">
			<tr>
				<th>序号</th>
				<th>用户id</th>
				<th>用户名</th>
			</tr>
			<tr v-for="(user,index) in users">
				<td>{{index+1}}</td>
				<td>{{user.userId}}</td>
				<td>{{user.username}}</td>
			</tr>
		</table>
	</div>
	
	<script type="text/javascript">
	
		var vue = new Vue({
			el: "#app",
			data : {
				users : []
			},
			methods : {
				goPage : function(pageNum){
					// 发送ajax的get请求
					// get请求的请求参数封装
					var data = {
							username : "lisi",
							pageNum: pageNum,
							userId: ""
						};
					var params = {
						params : data
					};
					
					/*
					this.$http.get("user/select",params).then(
						function(resp){},// 请求成功的回调
						function(resp){} // 请求失败的回调
					);*/
					
					// 简写
					
					this.$http.get("user/select",params).then(
						(resp) => {
							// resp是一个Response对象 该对象属性 body - 对象
							// bodyText 服务端响应的字符串
							console.log(resp);
							this.users = resp.body;
						},
						(resp) => {
							console.error("请求失败，"+resp);
						}
						
					);
					
				}
				
			},
			// 生命周期函数 该函数是在页面加载完成之后调用
			mounted : function(){
				this.goPage(1);
			}
		});
	</script>
</body>
</html>

ajax-post

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-resource.js"></script>

</head>
<body>
	<!--
			封装一个对象User
			{
					username: "",
					sex: "",
					hobby: [],
					address: [
						{"name": "", phone:"", addr: ""},
						{"name": "", phone:"", addr: ""},
						{"name": "", phone:"", addr: ""}
					]
			}

			v-model 属性
				lazy 当元素失去焦点后，data中的数据才会更新
				number 自动将元素中的内容转换成数字
				trim 自动替换掉元素中内容前后的空格
		
		-->
	<div id="app">

		用户名：<input type="text" v-model.lazy.trim="user.username" /> <br /> 性别:
		<input type="radio" name="sex" v-model="user.sex" value="1" />女 <input
			type="radio" name="sex" v-model="user.sex" value="2" />男 <br /> 爱好： <input
			type="checkbox" name="hobby" v-model="user.hobby" value="1" />打游戏 <input
			type="checkbox" name="hobby" v-model="user.hobby" value="2" />打游戏 <input
			type="checkbox" name="hobby" v-model="user.hobby" value="3" />打游戏 <input
			type="checkbox" name="hobby" v-model="user.hobby" value="4" />打游戏 <br />
		<input type="button" value="新增收货地址" onclick="addAddress()" />

		<ul>
			<li v-for="item in user.address">联系人：<input type="text"
				v-model="item.name" /> 电话号码:<input type="tel" v-model="item.phone" />
				收货地址:<input type="tel" v-model="item.addr" />
			</li>
		</ul>

		<input type="button" value="提交" @click="submitUser()" /> {{user}}
	</div>
	<script type="text/javascript">
			var vue = new Vue({
				el: "#app",
				data: {
					user: {
							username: null,
							sex: 1,
							hobby: [],
							address: []
					},
					count : 0
				},
				methods : {
					submitUser : function(){
						
						//TODO  数据校验
						
						// post请求
						// post请求的请求参数 直接就是一个 json对象
						// post请求的请求头默认类型为  Content-Type: application/json;charset=UTF-8
						// 可以添加参数{emulateJSON: true} 修改为 Content-Type: application/x-www-form-urlencoded
						//或者在controller中用@RequeatBody接收对象
						this.$http.post("user/save",this.user/* , {emulateJSON: true} */).then(
							(resp) => {
								console.log(resp);	
							},
							(resp) => {
								console.error(resp);	
							}
						);
					}
				}
			});
			
			
			function addAddress(){
				var address = {
					name : null,
					phone : null,
					addr : null
				};
				
				// 将对象保存在vue的data中
				vue.user.address.push(address);
			}
		</script>
</body>
</html>

Chill_Lyn_

发布了359 篇原创文章 · 获赞 26 · 访问量 3万+

私信关注

基本使用

v-html

v-bind

v-if

v-for

v-show

v-model

v-on

computed

ajax-get

ajax-post

猜你喜欢