Vue使用(一) vue绑定数据和基本指令-张柏沛IT博客

正文内容

Vue使用(一) vue绑定数据和基本指令

栏目:Web前端 发布时间:2019-11-30 12:09 浏览量:190

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绑定数据和基本指令

热门推荐
推荐新闻