正文内容

Vue使用（一） vue绑定数据和基本指令

栏目：Web前端系列：Vue的简单使用系列发布时间：2019-11-30 12:09 浏览量：2745

本系列文章目录

展开/收起

Vue的基本介绍

vue是一种前端框架，说白了也是用来做网站的，而且能够将数据动态化绑定到页面节点上，数据的改变会直接同步渲染到页面上，效果非常的好。举个例子，当你在做“加载更多文章”这个功能的时候，使用Ajax加载数据并显示到页面你需要在js中定义一大段html代码，并将ajax请求到的数据插入到html代码中，然后将这段html代码插入到页面上，很麻烦而且代码会写的很长。

但是如果使用vue的话，你只需要将vue定义的变量绑定到DOM节点上，ajax请求到数据后将数据赋值或追加到vue的变量，那么DOM节点会自动渲染出新加载的ajax数据，无需过多的用js操作DOM节点。

当然，vue的好处远远不止如此。

但是vue也有其局限性，因为数据是动态加载到页面中的，所以页面的源代码是没有数据的，可是像百度，谷歌这样的搜索引擎在爬取页面的时候，是通过爬取页面源代码的内容来进行页面分析和收录的，这导致使用vue其SEO的效果很差。当然如果使用ssr服务端渲染的话，这个问题也可以解决。这个是后话，暂且不提。

在学习Vue.js之前，必须掌握JavaScript这门语言，如果没有这方面基础的朋友可以下载本站的JavaScript教程视频进行学习

JavaScript基础教程

vue安装

首先进入Vue的官网

vue官网

下载vue.js文件

只需在html页面中引入这个vue.js文件就可以使用vue。

<script src='vue.js'></script>

=================================================

接下来正式开始介绍vue的使用，以下都使用代码实例做演示，请大家按照代码运行一下看看效果

1.绑定数据

首先使用vue，要引入vue.js ，然后需要实例化vue对象即：new Vue({......配置选项})

在配置选项中，el属性绑定元素，这样的话，vue旨在绑定的元素范围内生效

使用data属性定义数据，使用methods定义方法

在模板中，使用 {{变量名}} 来输出数据

如下：

<html>
	<head>
		<script src='vue.js'></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'#app',
					data:{
						msg:"hello world"
					}
				})
			}
		</script>
	</head>
	<body>
		<div id='app'>
			{{msg}}
		</div>
	</body>
</html>

此时就会有hello world显示

但是如果绑定的数据是个数组，它输出的时候会变成一个字符串
如果数据是个bool，输出时会变成一个字符串的true或者false
但如果是个json，输出时会变成一个[object object]

2.指令
VUE的指令就是html标签的扩展属性，放在标签中作为属性用的，下面分别介绍一些常见的属性：

v-model指令

一般用于表单元素上（input），用于赋值，这也是一种双向绑定

<html>
	<head>
		<script src='vue.js'></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'#app',	//这里写选择器，表示绑定的元素
					data:{
						msg:"hello world"
					}
				})
			}
		</script>
	</head>
	<body>
		<div id='app'>
			<input type="text" v-model='msg'>
			<br/>
			{{msg}}
		</div>
	</body>
</html>

然后发现，改动文本框中的内容，下面的绑定的数据也会改变。或者说其实改变文本框的内容
会改变data中的msg属性

v-for指令：用于循环


<html>
	<head>
		<script src='vue.js'></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'ul',
					data:{
						food:['apple','banana','candy']
					}
				})
			}
		</script>
	</head>
	<body>		
			<ul>
				<li v-for='(v,i) in food' :key="i">
					{{i}}:{{v}}
				</li>
			</ul>
	</body>
</html>

:key是用来优化循环，提高效率的，一般放每一项的id或者下标

v-on:xxx 事件指令

click事件：

<html>
	<head>
		<script src='vue.js'></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'button',
					data:{
					
					},
					methods:{
						show:function(){
							alert(1);
						}
					}
				})
			}
		</script>
	</head>
	<body>		
			<button type="button" v-on:click="show()">按钮</button>
	</body>
</html>

注意这里的如果写 v-on:click="alert(1)"是不行的
事件等号后面不能写实际的代码，只能调用函数方法，而调用的方法要注册在实例的methods属性中

其中
add:function(){
this.food.push("tomato");
}

里面的this就是实例本身

v-on:click="..." 可以简写为 @click="..."

v-show 显示隐藏
v-show='true'显示
v-show='false'隐藏


<html>
	<head>
		<script src='vue.js'></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						isShow:false
					},
					
				})
			}
		</script>
	</head>
	<body>		
		<div id='box'>
			<button type="button" v-on:click="isShow=true">按钮</button>
			<div style='width:100px;height:100px;background:red' v-show="isShow"></div>
		</div>
	</body>
</html>

为什么v-show="isShow"能识别出isShow是个变量而不是字符串呢，因为v-show是vue的指令，在指令中时能够识别出数据变量，如果希望在指令中放字符串而不是变量的话可以加引号如：

:指令名="'字符串'"

用以上综合的知识做出一个实例

<html>
	<head>
		<link href='./bootstrap.min.css' style='text/css' rel="stylesheet">
		<script src='./jquery-3.3.1.min.js'></script>
		<script src='./bootstrap.min.js'></script>
		<script src='./vue.js'></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						myData:[],
						name:'',
						age:'',
						nowIndex:-1,
						delete_btn:''
					},
					methods:{
						add:function(){
							if(this.name == '' || this.age==''){
								return false;
							}
							var data={
								name:this.name,
								age:this.age,
							};
							this.myData.push(data);
							
							this.name='';
							this.age='';
						},
						del:function(){
							if(this.nowIndex==-2){
								this.myData=[];
							}else{
								this.myData.splice(this.nowIndex,1);
							}
							
						}
					}
				})
			}
		</script>
	</head>
	<body>		
		<div class='container' id="box">
			<form role="form">
			  <div class="form-group">
				<label for="name">名称</label>
				<input type="text" class="form-control" id="name" placeholder="请输入名字" v-model='name'>
			  </div>
			  <div class="form-group">
				<label for="age">年龄</label>
				<input type="text" class="form-control" id="age" placeholder="请输入年龄" v-model='age'>
			  </div>
			  <button type="button" class="btn btn-primary" v-on:click='add()'>添加</button>
			  <button type="reset" class="btn btn-danger">重置</button>
			</form>
			
			<hr/>
			
			<table class="table table-striped table-bordered">
				<tr class='text-center'>
					<th class='text-center'>序号</th>
					<th class='text-center'>名称</th>
					<th class='text-center'>年龄</th>
					<th class='text-center'>操作</th>
				</tr>
				<tr class='text-center' v-for='(v,i) in myData'>
					<td>{{i+1}}</td>
					<td>{{v.name}}</td>
					<td>{{v.age}}</td>
					<td>
						<button type="button" class="btn btn-danger btn-sm" data-toggle='modal' data-target='#layer' v-on:click="nowIndex=i;delete_btn='删除'">删除</button>
					</td>
				</tr>
				
				<tr class='text-center' v-show="myData.length > 0">
					<td  colspan='4' ><button type="button" class="btn btn-danger btn-sm" data-toggle='modal' data-target='#layer' v-on:click="nowIndex=-2;delete_btn='删除全部'">删除全部</button></td>
				</tr>
				
				<tr  class='text-center' v-show="myData.length==0">
					<td  colspan='4' ><p>暂无数据</p></td>
				</tr>
			</table>
			
			<!-- 模态框 -->
			<div class="modal fade" role="dialog" id='layer' :data-index="nowIndex">
			  <div class="modal-dialog" role="document">
				<div class="modal-content">
				  
				  <div class="modal-body">
					<p>确认{{delete_btn}}？</p>
				  </div>
				  <div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click='del()'>确认</button>
				  </div>
				</div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
		</div>	
	</body>
</html>

请运行一下代码试试看有什么效果，运行改代码需要引入bootstrap.css，bootstrap.js和jquery.js

注意

如果在html的自定义属性中赋值vue的数据变量比如 :data-index="nowIndex"，以前是允许data-index="{{nowIndex}}"这种写法的，但是现在不允许直接在html属性中用{{}}来调用vue变量，要在属性前加 : 来标明这个属性要放vue变量，所以:data-index="nowIndex"这种写法才是对的

事件深入

现在说说怎么获得事件对象:

@click="show($event)"

methods:function(ev){
alert(ev.clientX)
}

阻止事件冒泡：

<html>
	<head>
		<script src='vue.js'></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						
					},
					methods:{
						show:function(ev){
							alert(ev.clientX);
						},
						show2:function(){
							alert(1);
						}
					}
				})
			}
		</script>
	</head>
	<body>		
		<div id='box' @click="show2()">
			<button type="button" @click.stop="show($event)">按钮</button>
		</div>
	</body>
</html>

@click.stop=...即可

阻止默认行为：
@click.prevent=...即可

键盘类事件：

<html>
	<head>
		<script src='vue.js'></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						
					},
					methods:{
						show:function(ev){
							alert(ev.keyCode);
						},
					}
				})
			}
		</script>
	</head>
	<body>		
		<div id='box'>
			<input type="text" @keydown="show($event)">
		</div>
	</body>
</html>

还有很方便的方式，
@keydown.13="show()"
或者
@keydown.enter="show()"
此时按回车才会触发事件

除了enter之外还有，up/down/left/right

4.绑定属性

v-bind:属性名="绑定的变量" 或者 :属性名="变量名" 其实就是我之前说的在变量名前加 : 的方式，只不过这是简写的方式

但是在属性中有两个特殊的，class和style
:class="绑定的变量"是不行的

:class="[绑定的变量]"才可以
:class="[变量1,变量2,....]"这个是添加多个类名
:class="{类名1:true,类名2:false,....}"这个是放的json，但是里面放的是类名而不是变量，但是里面的true或者false可以用变量代替
:class="变量" 但是这个变量是一个json，json里放的东西是上一种用法的东西

style的用法：
:style="{样式1:xxx,样式2:xxx,.....}" 但是样式如果是复合样式的话要用驼峰命名，不能用-
:style="变量" 变量名放的是json

5.关于使用 {{}}
{{xxx}} 双括号的作用是：数据更新，{{}}中的东西也更新，反之亦然

{{*xxx}} 表示只绑定一次数据，如果数据更新{{}}中的东西就不会更新

{{{xxx}}} 这是个html转义的作用，能将html标签变成真正的作用

{{"xxx"}} 此时输出的就是xxx，而不是个变量

6.过滤器：就是函数
比如
{{"welcome"|uppercase}}
可以使用多个函数
{{xxx|函数1|函数2}}

7.交互：ajax
要先引入：vue-resource.js
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>

在new Vue({...})中：
this.$http.get("a.txt").then(function(res){
   //res中包括数据和状态码，res.data才是数据
   alert(res.data);
},function(res){
   alert("失败了");
   alert(res.data)
});

如果想发送数据，只要在this.$http.get()的第2参传一个json即可
参数的格式是：
{
   params:{
       a:1,
       b:2
   }
}


<html>
	<head>
		<script src='vue.js'></script>
		<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
		<script>
			window.onload=function(){
				new Vue({
					el:'#box',
					data:{
						
					},
					methods:{
						show:function(){
							this.$http.get("./1.php",{
								params:{
									a:1,
									b:2
								}
							}).then(function(res){
								alert(res.data);
							},function(res){
								alert(res.status);
							});
						},
					}
				})
			}
		</script>
	</head>
	<body>		
		<div id='box'>
			<button type="button" @click="show()">请求</button>
		</div>
	</body>
</html>

post方式：
this.$http.post("1.php",{
   params:{
       a:1,
       b:2
   }
},{
   emulateJSON:true
}).then(function(res){
   alert(res.data);
})

post方式必须在post()方法中设置第三参{
emulateJSON:true
}

PS:关于对data属性的改变需要注意：

<ul>
      <li v-for="(v,i) in a" :key="i">
        姓名：{{v.name}} 年龄:{{v.age}} 性别：{{v.sex || 不详}}
      </li>
    </ul>
    <button @click="addSex">添加性别</button>
    <button @click="addSex2">添加性别2</button>
    <button @click="changeAge">变年轻</button>

更多内容请关注微信公众号

如果您需要转载,可以点击下方按钮可以进行复制粘贴;本站博客文章为原创,请转载时注明以下信息

张柏沛IT技术博客 > Vue使用（一） vue绑定数据和基本指令