vue

最新推荐文章于 2024-09-24 09:42:38 发布

clisk

最新推荐文章于 2024-09-24 09:42:38 发布

阅读量235

点赞数

分类专栏： java

本文链接：https://blog.youkuaiyun.com/clisks/article/details/100016111

版权

java 专栏收录该内容

25 篇文章

订阅专栏

vue

一.概述

官网:https://cn.vuejs.org

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue的俩个核心点

1.相应的数据绑定
2.组合的视图组件

MVVM模式

1.M:Model 数据模型
2.V:view 视图模型
3.vm:view-Model 视图模型

二.入门案例

步骤：

1.将库文件下载并粘贴

2.创建vue对象

3.传id，找标签

案例演示：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
	<script type="text/javascript">
		window.onload=function(){
		//创建vue对象
		new Vue({
			el:'#box',
			data:{
			msg:'Hello Vue',
			wz:'http://www.baidu.com'
				}
		});
			}	
	</script>
<body>
<div id="box">
  {{msg}}
  <a v-bind:href="wz">进入百度</a>
 
</div>
</body>

v-bind可以简写为 :

三.模板语法

1.概述

可以在页面取data 对象中数据
模板语法会支持一些 JS 简单的运算符和函数

{{键名}}
v-text=“键名” //取数据
v-html=“键名” //可以转义html标签(加粗标签等)

2.属性

HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

3.表达式

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
  }
})
</script>

输出：
10
YES
BOONUR

4.指令

指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

<div id="app">
    <p v-if="seen">你好</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

5.参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app">
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.runoob.com'
  }
})
</script>

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

6.修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

7.用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

8.缩写

Vue.js 为两个最为常用的指令提供了特别的缩写

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

四.事件

1.事件对象

(1)如何传递事件对象

例：show($event)

(2)阻止默认行为prevent

例：@click.prevent=“show()”

(3)阻止冒泡stop

例：@click.stop=“show()”

(4)事件只执行一次once

例：@click.once=“show()”

(5)监听键盘按键

例：@keypress.enter=“show()”

2.事件案例演示

案例演示

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script type="text/javascript">
   window.onload=function(){
		new Vue({
			el:'#box',
			data:{
				msg:'Hello Vue'
				},
           //事件的处理函数
			methods:{  
					show:function(){
					alert(this.msg);
					},
					show2:function(){
					alert("haha");
			        },
			//ES6语法
					show3(){
					alert("show3333");
					        },
				    show4(event){
						//阻止默认行为
						event.preventDefault() 
						
						//阻止冒泡
						event.stopPropagation()	
						},
						test(){
						alert("hehe");
						}
					}
				})
			}
			</script>
	</head>
	<body>
		<div id="box">
			<!-- 采用 指令 v-on:事件名 -->
			<button v-on:click="show()">一个按钮1</button>
			<!-- 事件只执行一次 @click.once -->
			<button v-on:click.once="show2()">一个按钮2</button>
			<!-- 绑定事件的简写方式 采用 @事件名-->
			<button @click="show3()">一个按钮3</button>
			<!-- 如何传递事件对象 $event -->
			<button v-on:click="show4($event)">一个按钮4</button>
			<!-- vue阻止默认行为 @click.prevent -->
			<a href="http://www.baidu.com" @click.prevent="test()">进入百度</a>
			<!--vue 阻止冒泡行为 @click.stop类似 -->
			
		</div>
	</body>

五.表单数据绑定

针对表单的数据绑定：v-model=“键名”

<script type="text/javascript">
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						msg: 'Hello Vue',
					}
				});
			}
		</script>
	<body>
		<div id="box">
			<!--  v-model 表单的数据绑定-->
			<input type="text" id="" value="" v-model="msg" />
			<h1>{{msg}}</h1>
			<input type="text" id="" value="" v-model="msg" />
		</div>
	</body>

六.隐藏和显示

v-show=“true” //控制元素的显示与隐藏

案例演示

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#nei {
				width: 200px;
				height: 200px;
				background: red;
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function() {
				new Vue({
					el: '#box',
					data: {
						msg: 'Hello Vue',
						flag:true
					},
					methods:{
						isShow(){
							//this 代表vue对象
						 this.flag=!this.flag	
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="box">
			<!--  v-show="true" true 元素显示 false 元素隐藏-->
			<div id="nei" v-show="flag">
				
			</div>
			<button type="button" @click="isShow()">显示/隐藏</button>
			
				<button type="button" @click="flag=!flag">显示/隐藏2</button>
		</div>
	</body>
</html>

七.计算属性

利用计算属性反转字符串实例演示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

八.监听属性

计数器案例演示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "app">
 <p style = "font-size:25px;">计数器: {{ counter }}</p>
 <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
 var vm = new Vue({
    el: '#app',
    data: {
       counter: 1
    }
 });
 vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
 });
</script>
</body>
</html>

九.属性的绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

在绑定过程中css样式名如果有-则去掉，需要把-后第一个字母变大写

1.class属性的绑定

方式一：

可以绑定一个或多个选择器

绑定方式

一个class选择器的名称:class=" ‘aclass’ "

<h1 :class="['bClass','aClass']">222222222222</h1>

注意选择器的名称用单引号引起来

方式二：

当绑定值是一个变量时：

<script>
//假设在data中有m1、m2这一个变量，其他省略
data:{
m1:aClass
m2:bClass
}
</script>
绑定多个变量用[]括起来
<h1 :class="[m1,m2]">2222222222</h1>

选择器生效功能

true 生效，false 不生效

<h1 :class="{'aClass':true,'bClass':false}">5555555555555555555</h1>

2.style属性的绑定

绑定方式一：

注意：值要使用单引号引起来


<h1 :style="{color:'red',fontSize:'100px'}">1111111111</h1>

值可以设置为变量，当值作为变量时

<h1 :style="{color:a,fontSize:b}">2222222</h1>

绑定方式二：

直接绑定变量

<h1 :style="[myjson,myjson2]">2222222</h1>

十.一些指令

1.if条件指令

flag为true则会执行正确，否则执行错误

<h1 v-if="flag">正确</h1>
<h1 v-else>错误</h1>

多重条件选择

定义一个变量v设置其为输入值

<h1 v-if="v=1">1你好</h1>
<h1 v-else-if="v==2">2你好</h1>
<h1 v-else-if="v==3">3你好</h1>
<h1 v-else-if="v==4">4你好</h1>
<h1 v-else>好好输</h1>

2.循环指令

<script type="text/javascript">
	window.onload = function() {
		new Vue({
			el: '#box',
			data: {
			myArr: [10, 20, 30, 40, 50, 60, 70, 80, 80],
			myJson: {
				sername: 'zhangsan',
				age: 100,
				phone: '13962052305'
					},
			jsonArry: [{
					username: 'lisi',
					age: 200,
					phone: '13962052305'
					}, {
					username: 'wangwu',
					age: 300,
					phone: '13962052305'
					}, {
					username: '赵六',
					age: 400,
					phone: '13962052305'
						}]
					}
				});

			}
</script>
<body>
  <div id="box">
	<ul>
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，
从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性
		<li v-for="(ele,index) in myArr" :key="index">
		{{ele}}----{{index}}
		</li>
	</ul>
	 遍历JSON对象
	<ul>
		<li v-for="(value,key,index)  in myJson" :key="key">
		{{value}}-----{{key}}----{{index}}
		</li>
	</ul>
	遍历 JSON数组
	<ul>
		<li v-for="(obj,index) in jsonArry" :key="index">
		{{obj.username}}----{{obj.age}}----{{obj.phone}}----{{index}}
		</li>
	</ul>
  </div>
</body>

可以根据索引对数组中的数据进行删除与修改

<script type="text/javascript">
	methods: {
			deleteObj(index) {
            //根据索引删除
			//splice() 删除元素，并向数组添加新元素。 
			this.myArr.splice(index, 1);
			},
						
			//更新,向数据中添加50
			updateObj:function(index,obj){
			this.myArr.splice(index,1,50);
             }
				}
</script>

十一.表单的数据收集

可以使用v-model绑定，在函数内部收集数据用Ajax提交到后台

用Ajax的方式把数据提交到后台，就得阻止掉表单默认的提交行为
具体实现如下：

<form action="123.html" method="get"  @submit.prevent="tijao()">
用户名：<input type="text" name="username" v-model="myJson.username"/><br>
密码：<input type="password" name="password" v-model="myJson.password"/><br>
<input type="submit" value="提交"/>
</form>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
function(){
new Vue({
		el:'#box',
		data:{
		myJson:{
		username:'',
		password:''
				}	
			},
methods:{
		tijao(){
		alert(this.myJson.username);
		alert(this.myJson.password);
		//收集表单中的数据
			console.log(this.username);
			console.log(this.password);
			//Ajax 请求 把表单中的数据提交到后台			
				}
						
}
</script>

十二.Ajax请求

Ajax是在无需重新加下整个网页的情况下，能够更新部分网页的技术

1.原生的Ajax请求

1.创建异步请求的对象

2.向服务器发送请求

3.准备好接收服务器的响应

<script type="text/javascript">
	//创建异步请求对象
	var xmlhttp;
	if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp = new XMLHttpRequest();
	}

// 向服务器发送请求
// 如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
//打开连接 GET
xmlhttp.open("GET", "https://api.github.com/search/users?q=a", true);
//发送请求
xmlhttp.send();

//准备好介绍,服务器的相应
xmlhttp.onreadystatechange = function() {
	if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
	//接收服务器响应的文本数据
	var text=xmlhttp.responseText;
	document.getElementById("myDiv").innerHTML =text;
	}
	}
</script>

2.vue的Ajax请求

<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
window.onload = function() {
	new Vue({
		el: '#box',
		data: {
			myarr: []
			},
		methods: {
			get: function() {
			//发送get请求
			this.$http.get('https://api.github.com/search/users', {
		    params: {
			   q: 'aa'
				    }
			            }).then(function(res) {
		//res 响应对象 里面的 data 属性,取出响应体,这个响应体就是 json对象
			     this.myarr = res.body.items;
			     }, function() {
				     console.log('请求失败处理');
				    });
				 }
			}
		});
}
		</script>