VUE的使用

最新推荐文章于 2024-06-05 09:37:42 发布
最新推荐文章于 2024-06-05 09:37:42 发布
阅读量2.7k 收藏 13
点赞数 2
分类专栏： JAVA学习笔记 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45665377/article/details/131421926
版权

VUE的使用

一、简介

VUE是一个前端框架。是一个典型的MVVM模式的框架。

MVVM：模型、视图、视图模型。通过修改视图模型对象，就可以达到修改视图的目的，同样的，如果用户操作了视图，视图模型中也就自动的收集了操作结果。

注意：此框架中Ajax操作部分相对功能较复杂，一般会使用独立的第三方的Ajax框架，例如axios。

中文网站：

https://cn.vuejs.org/

二、使用方式

有两种方案：

一、将VUE当作js使用，只需要在页面上引入js即可。比较简单。

二、使用脚手架，需要下载node.js等工具或框架的支持，比较复杂，功能更强大。

三、基础案例

1、导入vue.js

2、在页面上定义vue的使用区间和变量。（通过vue中使用el对应id）一般来说，页面上所有的需要vue来修改的变量必须全部包含在该id对应的元素中。下面的案例中的id即为app的一个div。

3、在js代码中使用vue的格式来定义Vue对象，并设置相应参数和变量的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <p>{{ message }}</p>
    <button>{{ message }}</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>
</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<p>{{msg}}</p>
			<button>{{btn1}}</button>
			<p>{{m1()()}}</p>
		</div>
	</body>
</html>
<script>
	var v = new Vue({
		el:"#app",
		data: {
			msg: "hello, world",
			btn1: "按钮1"
		},
		methods:{
			m1: function(){
                // 在此方法中，this与外面的data对应的对象一致，所以可以用this.msg，而在里面的函数中，this的指向已经发生变化，所以不能在里面使用this来获取msg，此时应该在外面定义that变量来记住this的指向。
				var that = this;
				return function(){
					return "显示消息：" + that.msg;
				}
			}
		}
	});
</script>

data 用于定义属性，实例中有两个属性分别为：msg、btn1。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

四、常用语法
4.1 基础内容

v-html：输出html内容。例如：<div v-html="html1"></div>

v-bind:属性名称：动态修改属性的值。例如：v-bind:href。可以简写为：:href

注意：html标签只带的属性，需要动态修改时，一般在前面加上v-bind:如果是vue自定义的标签才会直接写，例如v-if。

v-if：根据里面的变量的值，确定是否显示该标签。

v-else-if：v-else，条件结构

v-show：根据里面的变量的值，确定是否显示该标签。

template：本身没有任何作用，仅作为一个标签来包含其他标签进行集中控制。

v-on:事件名称：绑定一个事件，例如：v-on:click点击事件，简写为：@click

v-model：一般用来绑定变量的值到一个表单元素上，表单元素和变量的值会相互影响。

v-for：循环

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
4.2 计算属性

计算属性是指当作属性使用，但是是通过函数运算得到的结果，相当于Java中的getter和setter。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{msg1}}</h2>
			<textarea v-model="msg1" cols="100" rows="5"></textarea><br />
			姓名：<input type="text" v-model="name"/><br />
			地址：<input type="text" v-model="address"/><br />
			电话:<input type="text" v-model="tel"/><br />
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			name: "",
			address: "",
			tel: ""
		},
		computed:{
            // 只写getter
            msg2: function(){
                return "hello," + this.name;
            },
            // getter和setter
			msg1: {
				get: function(){
					return this.name + "," + this.address + "," + this.tel;
				},
				set: function(newValue){
					var arr = newValue.split(",");
					this.name = arr[0];
					this.address = arr[1];
					this.tel = arr[2];
				}
			}
		}
	})
</script>
4.3 样式绑定

是对样式属性特定的绑定方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.s1{
				background-color: #ccc;
			}
			.s2{
				background-color: lightseagreen;
			}
			.s3{
				color: white;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table width="500px">
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>
				<tr v-for="(p, index) in list" :class="{'s1':index%2==0, 's2':index%2==1, 's3':c1}">
					<td>{{p.name}}</td>
					<td>{{p.age}}</td>
					<td>{{p.sex}}</td>
				</tr>
			</table>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			c1: true,
			list:[
					{name:"张三",age:20, sex:"男"},
					{name:"李四",age:18, sex:"男"},
					{name:"王五",age:22, sex:"女"},
					{name:"张三",age:20, sex:"男"},
					{name:"李四",age:18, sex:"男"},
					{name:"王五",age:22, sex:"女"}
				]
		}
	});
</script>
5.3 组件

vue中的自定义标签。

基本使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<qf></qf>
			<stu></stu>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
	// 全局组件注册
	Vue.component("qf", {
		template: "<h1>千锋最强Java班---武汉Java2206</h1>"
	});
	

	var v = new Vue({
		el:"#app",
		data:{
			
		},
		// 局部组件注册
		components: {
			"stu": {
				template: "<h2>武汉Java2206最强学生张三</h2>"
			}
		}
	});
</script>

给组件添加属性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<stu :name="stuName"></stu>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js" ></script>
<script>
	var v = new Vue({
		el:"#app",
		data:{
			stuName: "王五"
		},
		// 局部组件注册
		components: {
			"stu": {
				props:['name'],
				template: "<h2>武汉Java2206最强学生----{{name}}</h2>"
			}
		}
	});
</script>
5.4 路由

实现单页面应用(one page application)，使用内部的跳转方式，而不需要多个页面跳转。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>
				<!--路由的链接，实际上会生成a链接-->
				<router-link to="/a1">跳转到A1</router-link>
				<router-link to="/a2">跳转到A2</router-link>
			</p>
			<!--内容切换的位置，相当于iframe，实际上会替换为template中的内容-->
			<router-view></router-view>
		</div>
	</body>
</html>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<script>
	// 1、定义模板内容
	const a1 = { template: '<div>welcome to A1!!!</div>' }
	const a2 = { template: '<div>welcome to A2!!!</div>' }
	
	// 2. 定义路由，路径与组件模板相对应
	const routes = [
	  { path: '/a1', component: a1 },
	  { path: '/a2', component: a2 }
	]
	
	// 3. 创建 router 实例，然后传 `routes` 配置
	const router = new VueRouter({
	  routes // （缩写）相当于 routes: routes
	})
	
	// 4. 创建和挂载根实例。
	const app = new Vue({
	  router
	}).$mount('#app')

</script>
五、axios的基本用法

axios是一个ajax框架，简化了各种ajax操作，有强大的ajax操作功能。

5.1 get请求

语法：

axios.get(‘url’, [params]) // url和参数

. then(function(res){}) // 回调

.catch(function(ex){}); // 异常捕获

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 此处then方法也可以写为：
axios.get('/user?ID=12345')
  .then(res => {
    console.log('数据是:', res);
  })
  .catch(function (error) {
    console.log(error);
  });
 

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
5.2 post请求

语法：

axios.post(‘url’, paramobj) // url和参数

. then(function(res){}) // 回调

.catch(function(ex){}); // 异常捕获

注意：此处请求与jQuery完全不同。

jQuery如果按照此处直接传json对象的参数的话，后台应该使用request.getParameter方式接收，也就是说默认为表单提交类型，即application/x-www-form-urlencoded，如果是对象，后台springmvc中直接使用对象接收即可。

axios如果直接传json对象，默认认为是json格式传参，即application/json，也就是以流的形式提交，后台必须使用@RequestBody方式接收参数。

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

如果想使用普通的post传参，有两种方式：

// 1、使用?号
axios.post("http://localhost:8080/add?id=3&name=mary&sex=n").then(function(resp){
			if(resp.data.code == "10000"){
				alert(JSON.stringify(resp.data.data));
			}else{
				alert(resp.data.desc);
			}
			
		});

// 使用params
// 如果使用普通的post传参，需要使用第三个参数才能用params的方式
		axios.post("http://localhost:8080/add", null, {
			params:{
				id:2,
				name:"张三",
				sex:"男"
			}
		}).then(function(resp){
			if(resp.data.code == "10000"){
				alert(JSON.stringify(resp.data.data));
			}else{
				alert(resp.data.desc);
			}
		});
5.3 并发请求
// 执行多个并发请求
function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
六、前端传递数据的几种方式

1、url直接拼接。接收的时候使用location.search.substr()。

2、使用cookie。需要开启cookie的支持。需要掌握js操作cookie。

3、使用LocaleStorage。H5支持。

4、使用SessionStorage。H5支持。

基本概念

cookie：是网景公司的前雇员在1993年发明。它的主要用于保存登陆信息，比如登陆某个网站市场可以看到’记住密码’，这就是通过在cookie中存入一段辨别用户身份的数据来实现的。

sessionStorage：会话，是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage中的数据就会被清空。

localStorage：是HTML5标准中新加入的技术，当然早在IE6时代就有一个userData的东西用于本地存储，而当时考虑到浏览器的兼容性，更通用的方案是使用flash。如今localStorage被大多数浏览器所支持。

三者区别
1）存储大小

cookie：一般不超过4K（因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识）

sessionStorage：5M或者更大

localStorage：5M或者更大

2）数据有效期

cookie：一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器cookie失效，若设置了时间，cookie就会存放在硬盘里，过期才失效

sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除

localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除，因此用作持久数据

3）作用域

cookie：在所有同源窗口中都是共享的

sessionStorage：在同一个浏览器窗口是共享的（不同浏览器、同一个页面也是不共享的）

localStorage：在所有同源窗口中都是共享的

4）通信

ccokie：十种携带在同源的http请求中，即使不需要，故cookie在浏览器和服务器之间来回传递；如果使用cookie保存过多数据会造成性能问题

sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存

localStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信；不会自动把数据发送给服务器，仅在本地保存

5）易用性

cookie：需要自己进行封装，原生的cookie接口不够友好

sessionStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持

localStorage：原生接口可以接受，可以封装来对Object和Array有更好的支持

应用场景

cookie：判断用户是否登录过网站，以便实现下次自动登录或记住密码；保存事件信息等

sessionStorage：敏感账号一次性登录；单页面用的较多（sessionStorage 可以保证打开页面时 sessionStorage 的数据为空）

localStorage：常用于长期登录（判断用户是否已登录），适合长期保存在本地的数据

七、跨域请求的处理

前后端分离是指：前端页面和后台代码分别在不同的服务器上，称为前后端分离。

同源策略（同域策略）：是指服务器只需要当前服务器中的ajax访问。同源：ip地址和端口号相同。

如果出现了不同域的ajax访问，称为跨域访问。要解决跨域访问问题，一般有两种方案：

1、在服务端设置允许跨域访问。

在response中设置header：‘Access-Control-Allow-Origin’

在springmvc框架中，直接在返回json数据的方法上添加注解@CrossOrigin

特点：操作比较简单，但是不支持老版本的浏览器，例如：ie6

2、jsonp。

借助<srcipt>标签可以引用其他服务器的js的原理，要求服务器端改代码，将原本返回的数据改成返回一个函数，函数中return数据，然后在页面使用<script>标记去引用，然后获取返回值，也就达到了跨域的目的。此方式本来就不属于正常的方式，所以使用起来比较麻烦，适用于所有的浏览器，例如ie6。

当然，springmvc也有对jsonp的封装，前端json框架一般也会封装。

特点：操作比较麻烦，服务器端可能需要改代码，支持ie6.

跨域问题拦截器：

@Component
public class CrossOriginInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, token");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        return true;
    }
}

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    @Resource
    private CrossOriginInterceptor crossOriginInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        //注册自己的拦截器,并设置拦截的请求路径
        //addPathPatterns为拦截此请求路径的请求
        //excludePathPatterns为不拦截此路径的请求
        registry.addInterceptor(crossOriginInterceptor)
                .addPathPatterns("/**");
    }
}
欧若拉z
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的基本使用
weixin_44529746的博客
10-31 3142
社区资料：Vue：Vue.js专业中文社区 vue官方手册：API — Vue.js 一、vue的介绍 vue是一套构建用户界面的渐进式框架，Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 vue是基于MVVM（M:model V:view VM:viewmodel）设计模式，支持数据的双向绑定(v-model) 补充： MVC设计模式： M model 数据层 V view 视图层 C control控制层
VUE 使用 leaflet
11-04
在vue中使用leaflet，底图引入了天地图,高德,Google等，对leafletApi做了简单封装，可以方便的调用相关Api。 封装的常用方法有： 测距、测面、地图切换、画多边形、画矩形、在地图中添加arcgis服务等
VUE基本使用详解
weixin_65837469的博客
04-18 2835
Vue.js 是一个流行的前端 JavaScript 框架，它被设计用于构建单页面应用程序（Single Page Application，SPA）及开发大型复杂 Web 应用。响应式数据：Vue.js 中的数据对象可以双向绑定，当数据发生变化时，视图也会跟着更新。这种响应式的数据绑定，使开发者可以轻松构建动态交互效果。组件化开发：Vue.js 将应用程序拆分成多个小组件，每个组件都可以包含自己的 HTML、CSS 和 JavaScript 代码，并且组件之间可以嵌套和通信。
vue基础使用
我还起舞了的博客
07-03 662
一、定义语法：(1).局部指令：​​directives:{指令名:配置对象} 或 directives{指令名:回调函数}(2).全局指令：​Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)二、配置对象中常用的3个回调：​(1).bind：指令与元素成功绑定时调用。​(2).inserted：指令所在元素被插入页面时调用​(3).update：指令所在模板结构被重新解析时调用。
前端开发环境：Vue、Element Plus、Axios
最新发布
hitmengfanchao的博客
06-05 1667
本文介绍了前端开发环境的搭建，包括：Vue项目创建、在Vue项目中引入Element-Plus和Axios。通过一个简单的登录程序说明如何开发基于Vue的前端项目。
VUE使用详细教程
weixin_37206602的博客
06-24 2562
1 基础知识 1 Vue的组件化思想 2 父子组件访问（对象方式） 3 插槽slot 4 作用域 2 模块化开发 P72 Webpack Loader https://www.webpackjs.com/loaders/ 可在这个官网查看需要使用的loader 将ES6转ES5 安装并使用Vue plugin 90-96 没看 ...
vue框架使用
qq_52444556的博客
09-22 868
便于新手上手vue
vue框架快速入门
Java学不会的博客
05-06 1859
MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。
vue的基本使用
faramita_of_mine的博客
03-09 5526
vue的基本使用一、简介二、vue 的安装三、生命周期钩子四、模板语法五、常用指令六、数据侦听器七、Class、Style 绑定八、条件渲染九、列表渲染十、表单输入绑定十一、组件十二、插槽 一、简介   Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单
vue使用原生swiper代码实例
10-15
主要介绍了vue使用原生swiper代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue使用百度离线地图资源
04-25
vue使用百度地图离线资源 该文件内容须放于项目public文件夹下 使用请参考博主博客：vue使用百度地图----离线地图 https://blog.csdn.net/weixin_45660840/article/details/108977917?spm=1001.2014.3001.5502 H.F...
vue使用实例
08-23
vue实例、vue持续更新中、vueDemo 1、vue的基础概念和构建开发环境、 2、数据渲染、事件监听和表单处理， 后续更新待续
VUE 使用中踩过的坑
08-28
Vue 使用中踩过的坑 在 Vue 开发中，有很多潜在的坑需要注意和解决。这篇文章总结了一些常见的 Vue 使用问题，包括路由变化页面数据不刷新、异步回调函数中使用 this、setInterval 路由跳转继续运行、Vue 滚动行为...
VUE框架的使用
weixin_43848295的博客
08-23 114
VUE框架的使用
Vue新手快速入门指南：从零到构建你的第一个应用
fudaihb的博客
03-18 1271
本篇技术博客旨在帮助初学者快速上手Vue框架，理解其核心概念，并指导读者如何构建一个简单的Vue应用。我们将从Vue的基本介绍开始，逐步深入到安装、组件、指令、状态管理等高级特性，最终带领读者完成一个实际的Vue项目。
Vue CLI 小知识点
前端技术
07-21 225
官网非常详细，仅在此记录！ CLI： Command-Line Interface，命令行界面，俗称脚手架。 介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过@vue/cli实现的交互式的项目脚手架。 通过@vue/cli+@vue/cli-service-global实现的零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的...
VUE框架 详解入门
热门推荐
晴天的博客
03-19 2万+
vue框架快速入门到实操
vue 使用uuid
10-20
Vue使用UUID是为了生成唯一的标识符，以便在应用程序中跟踪和识别不同的对象。UUID是一种通用唯一标识符，它可以在不同的计算机和网络中唯一地标识对象。在Vue中，可以使用vue-uuid或者uuid库来生成UUID。其中，vue-uuid是一个Vue插件，可以通过在main.js中引入并使用来生成UUID。而uuid库则是一个独立的JavaScript库，可以通过npm安装并在代码中使用。无论使用哪种方式，都可以通过调用相应的方法来生成UUID。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值