VUE学习笔记 -- vue的使用

最新推荐文章于 2021-06-27 18:32:29 发布

DJTUDaker

最新推荐文章于 2021-06-27 18:32:29 发布

阅读量1.7k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/wingzhezhe/article/details/80950751

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、VUE介绍

二、VUE常用的系统指令使用语法

1、插值表达式的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>快速入门</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
	{{message}}
		<div id="app">
			{{message}}<br/>
			{{msg+1}}
			<br/>
			{{flag?"Hello":"vue"}}
			<br/>
			<!--此种写法不写：因为它是声明变量的方式，无法带有返回值，表达式将不能获取数据并显示在浏览器上 {{var test="1"}} 
			一旦被vue接管的区域没有任何内容显示时，则表示vue的语法有错误
			-->
		</div>
		
	
		
	</body>
	<script>
		//view model
		/*
		 * new Vue();创建了一个Vue对象
		 * Vue对象在创建时有一些参数：都是以json格式体现的
		 * Vue的el：它是用于让vue接管某一块区域。
		 * 获取区域时，可以使用和jquery一样的选择方式：id选择器。
		 *
		 *  需求：
		 		在div中显示信息
		 		
		 	在vue的构建中可以定义数据
		 		使用的key是data，它的data是一个对象，需要使用大括号定义数据的内容
		 		大括号中的内容又是json格式数据
		 */
		new Vue({
			el:"#app",
			data:{
				message:"Hello Vue",
				msg:1,
				flag:true
			},
			created: function() {
				 window.location.href="https://www.baidu.com"
			}
		});
		 
		 
		/*  
			原生方式：
			window.οnlοad=function(){
			 window.location.href="https://www.baidu.com"
		 } */
	</script>
</html>

2、vue中的事件函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-on:click</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}  
			<button οnclick="clkbtn('js的button')">js的click</button>
			
			<button v-on:click="vueclick('vue的button')">vue的onclick</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			//接管app区域
			el:"#app",
			data:{
				message:"Hello Vue!"
			},
			methods:{
				vueclick:function(msg){
					this.message = msg;
				}
			}
		});
		
		
		/**
			原生js事件
		*/
		var clkbtn  = function (msg){
			alert(msg);
		}
	</script>
</html>

3、事件的默认行为

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:keydown</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
		
			<!-- $event是vue的，而传统js无须定义任何遍历。传统js中就window以及document对象一样，拿过来直接用 -->
			<input type="text" v-on:keydown="fun($event)">
			
			<!--
				事件的默认行为：
					以form表单为例，只要点击按钮，默认认为是提交事件，
					要想阻止form表单的默认提交行为，需要在onsubmit后面加上 return 函数（函数的返回值为boolean类型）
					当返函数返回值为false时，阻止表单提交，即阻止了form表单的默认行为
				<form action="https://www.baidu.com" οnsubmit="return checkForm()">
					<input type="text" name="username" id="username"/><br/>
					<input type="submit" value="go"/>
				</form> 
			-->
			
			<input type="text" οnkeydοwn="fun1()">
		</div>
	</body>
	<script>
		/*阻止事件的默认行为
		48-57  96-105
		*/
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun:function(event){
					//取出按下的键盘码
					var keyCode = event.keyCode;
					//判断键盘码是不是在48-57之间，或者是96到105之间
					if((keyCode < 48 || keyCode>57) && (keyCode <96 || keyCode>105) ){
						//阻止事件默认行为
						event.preventDefault();
					}
				}
			}
		});
		
		
	
		/* 	
			传统方式阻止输入框输入数字
			function fun1(){
				//1.获取按下的按键的keyCode
				 var keyCode = event.keyCode; //ie浏览器 
				
				 //var keyCode = event.which;  chrom浏览器
				alert(keyCode);
			}
		*/
		
		
		/* 
			function checkForm(){
			//获取username的文本框的值
			var username = document.getElementById("username").value;
			
			if(username == ''){
				alert("请输入用户名！");
				return false;
			}
		}
		*/
	</script>

</html>

4、vue的onmouseOver事件和事件的传播行为

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:mouseover</title>
		<style>
			#div {
				background-color: red;
			}
			
			#div1 {
				background-color: blue;
				width:300px;
				height:300px;
			}
			
			#div2 {
				background-color: yellow;
				width:100px;
				height:100px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<div v-on:mouseover="fun1" id="div">
				<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
			</div>
			
			<div id="div1" οnclick="div1Click()">
				<div id="div2" οnclick="div2Click()"></div>
			</div>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun1:function (){
					alert("divdivdivdiv....");
				},
				fun2:function (e){
					alert("textareatextareatextarea....");
					event.stopPropagation();
					
				}
			}
		});
		
		
		function div1Click(){
			alert("div1....");
		}
		
		function div2Click(){
			alert("div2....");
			event.stopPropagation();
		}
	</script>

</html>

5、vue中的事件修饰符

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:事件修饰符</title>

		<script src="js/vuejs-2.5.16.js"></script>
		<style>
			#div {
				background-color: red;
			}
			
		</style>
	</head>

	<body>
		<div id="app">
			<input type="text" v-on:keydown.prevent="fun($event)">
			
			<div v-on:mouseover="fun1" id="div">
				<textarea v-on:mouseover.stop="fun2($event)">这是一个文件域</textarea>
			</div>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun1:function (){
					alert("divdivdivdiv....");
				},
				fun2:function (e){
					alert("textareatextareatextarea....");
				}
			}
		});
		
		
	</script>

</html>

6、vue中的按键修饰符

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:按键修饰符</title>

		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<input type="text" name="username" v-on:keyup.enter="fun1('键盘弹起')"/>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun1:function(msg){
					alert(msg);
				}
			}
		});
	</script>

</html>

7、v-html和v-text的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html</title>
		<script src="js/vuejs-2.5.16.js"></script>
		<style type="text/css">
			#div1{
				width:300px;
				height:300px;
				border:1px solid red;
			}
			
			#div2{
				width:300px;
				height:300px;
				border:1px dashed blue;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="div1" v-html="msg"></div>
			<div id="div2" v-text="msg"></div>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				msg:"<h1>Hello InnerHtml and InnerText</h1>"
			}
		});
		
		/* window.onload = function(){
			document.getElementById("div1").innerHTML="<h1>Hello Vue</h1>";
			document.getElementById("div2").innerText="<h1>Hello Vue</h1>";
		} */
	</script>
</html>

8、v-model的使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			用户名：<input type="text" name="username" v-model="user.username" /><br/>
			密码：<input type="text" name="password" v-model="user.password"/><br/>
			<input type="button" v-on:click="changeValue()" value="change">
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				user:{
					username:"aaa",
					password:"1234"
				}
			},
			methods:{
				changeValue:function(){
					this.user.username = "test";
					this.user.password ="abcd";
				}
			}
		});
	</script>

</html>

9、v-bind的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-bind上的使用</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
		{{id}}
		<a href="http://www.itcast.cn/index/{{id}}">itcastaaa</a>
			<a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>
			
			<div v-bind={onclick:"fun1()"}>test</div>	
			
			<div οnclick="fun1()">test</div>	
			
			<div id="mydiv">aaaaaaaa</div>				
		</div>
	</body>
	<script>
		window.onload =function(){
			var mydiv = document.getElementById("mydiv");
			mydiv.setAttribute("onclick","fun2()");
		}
	
		//view model
		new Vue({
			el:"#app",
			data:{
				id:1
			}
		});
		
		function fun1(){
			alert("div");
		}
		
		function fun2(){
			alert("dom编程实现动态click事件的绑定");
		}
	</script>
</html>

10、v-for的使用

（1）、遍历数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历数组</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(value,index) in arr ">{{value}}============{{index}}</li>
			</ul>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				arr:['a','b','c','d']
			}
		});
	</script>
</html>

（2）、遍历对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<li v-for="(value,key) in product ">{{value}}============{{key}}</li>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				product:{
					id:1,
					pname:"笔记本电脑",
					price:1000
				}
			}
		});
	</script>
</html>

（3）、遍历对象集合

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(value,index) in products">
					<td>{{index}}</td>
					<td>{{value.id}}</td>
					<td>{{value.pname}}</td>
					<td>{{value.price}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				products:[
					{
						id:1,
						pname:"笔记本电脑",
						price:1000
					},
					{
						id:2,
						pname:"电视",
						price:3000
					},
					{
						id:3,
						pname:"空调",
						price:5000
					}
				]
			}
		});
	</script>

</html>

11、v-if和v-show的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-if与v-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
	<div id="app">
		<span v-if="flag">传智播客</span> 
		<span v-show="flag">itcast</span>
		<button v-on:click="toggle">切换</button> 
	</div>
</body>
<script>
		//view model
		new Vue({
			el:'#app', 
			data:{
				flag:false
			} ,
			methods:{
				toggle:function(){
					this.flag= !this.flag;
				}
			}
		});
	</script>
</html>

三、VUE的声明周期

1、声明周期示例图

2、生命周期案例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: 'hello world'
			},
			beforeCreate: function() {
				console.log(this);
				showData('创建vue实例前', this);
			},
			created: function() {
				showData('创建vue实例后', this);
			},
			beforeMount: function() {
				showData('挂载到dom前', this);
			},
			mounted: function() {
				showData('挂载到dom后', this);
			},
			beforeUpdate: function() {
				showData('数据变化更新前', this);
			},
			updated: function() {
				showData('数据变化更新后', this);
			},
			beforeDestroy: function() {
				vm.test = "3333";
				showData('vue实例销毁前', this);
			},
			destroyed: function() {
				showData('vue实例销毁后', this);
			}
		});

		function realDom() {
			console.log('真实dom结构：' + document.getElementById('app').innerHTML);
		}

		function showData(process, obj) {
			console.log(process);
			console.log('data 数据：' + obj.message)
			console.log('挂载的对象：')
			console.log(obj.$el)
			realDom();
			console.log('------------------')
			console.log('------------------')
		}
		//vm.message = "good...";
		vm.$destroy(); 
	</script>

</html>

四、VUE综合案例

1、数据准备

CREATE DATABASE vuejsdemo;
USE vuejsdemo;
CREATE TABLE USER(
id INT PRIMARY KEY AUTO_INCREMENT,
age INT,
username VARCHAR(20),
PASSWORD VARCHAR(50),
email VARCHAR(50),
sex VARCHAR(20)
)

2、环境搭建

（1）、新建Maven Project

创建war包工程

（2）、pom.xml

<project xmlns="http://maven.apache.org/POM/4.0.0" 
		 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
		 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 
		 					 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.vue</groupId>
	<artifactId>vue_demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>
		<spring.version>5.0.2.RELEASE</spring.version>
		<slf4j.version>1.6.6</slf4j.version>
		<log4j.version>1.2.12</log4j.version>
		<mybatis.version>3.4.5</mybatis.version>
	</properties>
	<dependencies> <!-- spring -->
		<dependency>
			<groupId>org.aspectj</groupId>
			<artifactId>aspectjweaver</artifactId>
			<version>1.6.8</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context</artifactId>
			<version>${spring.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-context-support</artifactId>
			<version>${spring.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-orm</artifactId>
			<version>${spring.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-test</artifactId>
			<version>${spring.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-webmvc</artifactId>
			<version>${spring.version}</version>
		</dependency>
		<dependency>
			<groupId>org.springframework</groupId>
			<artifactId>spring-tx</artifactId>
			<version>${spring.version}</version>
		</dependency>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.12</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
			<version>3.1.0</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>jsp-api</artifactId>
			<version>2.0</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>jstl</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency> <!-- log start -->
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>${log4j.version}</version>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-api</artifactId>
			<version>${slf4j.version}</version>
		</dependency>
		<dependency>
			<groupId>org.slf4j</groupId>
			<artifactId>slf4j-log4j12</artifactId>
			<version>${slf4j.version}</version>
		</dependency> <!-- log end -->
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis</artifactId>
			<version>${mybatis.version}</version>
		</dependency>
		<dependency>
			<groupId>org.mybatis</groupId>
			<artifactId>mybatis-spring</artifactId>
			<version>1.3.0</version>
		</dependency>
		<dependency>
			<groupId>c3p0</groupId>
			<artifactId>c3p0</artifactId>
			<version>0.9.1.2</version>
		</dependency>
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>5.1.2</version>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.5</version>
		</dependency>
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-core</artifactId>
			<version>2.9.0</version>
		</dependency>
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-databind</artifactId>
			<version>2.9.0</version>
		</dependency>
		<dependency>
			<groupId>com.fasterxml.jackson.core</groupId>
			<artifactId>jackson-annotations</artifactId>
			<version>2.9.0</version>
		</dependency>
	</dependencies>
</project>

（3）、后台代码准备

User.java

package com.vue.domain;

import java.io.Serializable;

public class User implements Serializable {

	private Integer id;
	private Integer age;
	private String username;
	private String password;
	private String sex;
	private String email;
	
	setter/getter
	
	@Override
	public String toString() {
		return "User [id=" + id + ", age=" + age + ", username=" + username + ", password=" + password + ", sex=" + sex
				+ ", email=" + email + "]";
	}
}

UserDao.java

package com.vue.dao;

import java.util.List;

import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;

import com.vue.domain.User;

public interface IUserDao {

	/**
	 * 查询所有
	 * 
	 * @return
	 */
	@Select("select * from user")
	List<User> findAll();

	/**
	 * 根据id查询
	 * 
	 * @param id
	 * @return
	 */
	@Select("select * from user where id= #{id}")
	User findById(Integer id);

	/**
	 * 更新操作
	 * 
	 * @param user
	 */
	@Update("update user set username=#{username},password=#{password},email=#{email},sex=#{sex} where id=#{id}")
	void update(User user);

}

UserServiceImpl.java

package com.vue.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.vue.dao.IUserDao;
import com.vue.domain.User;
import com.vue.service.IUserService;

@Service
public class UserServiceImpl implements IUserService {

	@Autowired
	private IUserDao userDao;

	@Override
	public List<User> findAll() {
		return userDao.findAll();
	}

	@Override
	public User findById(Integer id) {
		return userDao.findById(id);
	}

	@Override
	public void update(User user) {
		userDao.update(user);
	}

}

UserController.java

package com.vue.web.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.vue.domain.User;
import com.vue.service.IUserService;

@Controller
@RequestMapping("user")
@ResponseBody
public class UserController {

	@Autowired
	private IUserService userService;

	/**
	 * 查询所有用户
	 * 
	 * @return
	 */
	@RequestMapping("findAll")
	public List<User> findAll() {
		return userService.findAll();
	}

	/**
	 * 根据id查询用户
	 * 
	 * @return
	 */
	@RequestMapping("findById")
	public User findById(Integer id) {
		return userService.findById(id);
	}

	/**
	 * 更新用户
	 * 
	 * @return
	 */
	@RequestMapping("update")
	public void update(@RequestBody User user) {
		userService.update(user);
	}

}

（4）、配置文件

applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
                            http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx.xsd
                            http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop.xsd
                            http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">
    <!-- 配置 spring 创建容器时要扫描的包 -->
    <context:component-scan base-package="com.vue">
        <!--制定扫包规则，不扫描@Controller 注解的 JAVA 类，其他的还是要扫描 -->
        <context:exclude-filter type="annotation"
                                expression="org.springframework.stereotype.Controller"/>
    </context:component-scan>
    <!-- 加载配置文件 -->
    <context:property-placeholder location="classpath:db.properties"/>
    <!-- 配置 MyBatis 的 Session 工厂 -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 数据库连接池 -->
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!-- 配置数据源 -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}"></property>
        <property name="jdbcUrl" value="${jdbc.url}"></property>
        <property name="user" value="${jdbc.username}"></property>
        <property name="password" value="${jdbc.password}"></property>
    </bean>
    <!-- 配置 Mapper 扫描器 -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="basePackage" value="com.vue.dao"/>
    </bean>
    <!-- 配置事务管理器 -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>
    <!-- 配置事务的通知 -->
    <tx:advice id="txAdvice" transaction-manager="transactionManager">
    	<tx:attributes>
    		<tx:method name="*" propagation="REQUIRED" read-only="false"/>
    		<tx:method name="find*" propagation="SUPPORTS" read-only="true"/>
    	</tx:attributes>
    </tx:advice>
    <!-- 配置aop -->
    <aop:config>
    	<aop:pointcut expression="execution(* com.vue.service.impl.*.*(..))" id="pt1"/>
    	<aop:advisor advice-ref="txAdvice" pointcut-ref="pt1"/>
    </aop:config>
</beans>

springmvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:mvc="http://www.springframework.org/schema/mvc" 
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
						http://www.springframework.org/schema/beans/spring-beans.xsd
						http://www.springframework.org/schema/mvc
						http://www.springframework.org/schema/mvc/spring-mvc.xsd
						http://www.springframework.org/schema/context
						http://www.springframework.org/schema/context/spring-context.xsd">
	<!-- 配置创建 spring 容器要扫描的包 -->
	<context:component-scan base-package="com.vue.web.controller">
		<!-- 制定扫包规则 ,只扫描使用@Controller 注解的 JAVA 类 -->
		<context:include-filter type="annotation"
			expression="org.springframework.stereotype.Controller" />
	</context:component-scan>
	<mvc:annotation-driven></mvc:annotation-driven>
</beans>

db.properties

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/vuejsdemo
jdbc.username=root
jdbc.password=1234

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
		 xmlns="http://java.sun.com/xml/ns/javaee" 
		 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
		 					 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">
  <display-name>vue_demo</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <!-- 手动指定 spring 配置文件位置 -->
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath:applicationContext.xml</param-value>
    </context-param>
    <!-- 配置 spring 提供的监听器，用于启动服务时加载容器 。该间监听器只能加载 WEB-INF 目录中名称为 applicationContext.xml 的配置文件 -->
    <listener>
        <listener-class>
            org.springframework.web.context.ContextLoaderListener
        </listener-class>
    </listener>
    <!-- 配置 spring mvc 的核心控制器 -->
    <servlet>
        <servlet-name>springmvcDispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <!-- 配置初始化参数，用于读取 springmvc 的配置文件 -->
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:springmvc.xml</param-value>
        </init-param>
        <!-- 配置 servlet 的对象的创建时间点：应用加载时创建。取值只能是非 0 正整数，表示启动顺 序 -->
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springmvcDispatcherServlet</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
    <!-- 配置 springMVC 编码过滤器 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <!-- 设置过滤器中的属性值 -->
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <!-- 启动过滤器 -->
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    <!-- 过滤所有请求 -->
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

（4）、加入静态资源文件

3、实现页面加载展示用户列表数据功能

（1）、自定义user.js

var vue = new Vue({
	// 让vue接管id=app的区域
    el: "#app",
    //定义vue中的数据
    data: {
        user: {id:"",username:"",password:"",age:"",sex:"",email:""},
        userList: []
    },
    methods: {
        findAll: function () {
        	// 定义一个vue变量,因为在axios中不能直接调用vue的变量，需要在当前方法内重新定义一个变量
        	// this代表vue区域，在axios中是不能直接调用this的，需要重新定义变量并赋值
        	var _this = this;
            axios.get("./user/findAll.do").then(function (response) {
                _this.userList = response.data;
                // console.log(_this.userList);
            }).catch(function (err) {
                console.log(err);
            });
        },
        findById: function (userid) {
            var _this = this;
            axios.get("./user/findById.do", {
                params: {
                    id: userid
                }
            }).then(function (response) {
              _this.user = response.data;
                $('#myModal').modal("show");
            }).catch(function (err) {
            });

        },
        update: function (user) {
            var _this = this;
            axios.post("./user/update.do",_this.user).then(function (response) {
                _this.findAll();
            }).catch(function (err) {
            });
        }
    },
    // 页面加载完成之后执行的函数
    created(){
    	// alert("页面加载完成，查询数据之前");
        this.findAll();
    }
});

（2）、改造user.html页面

DJTUDaker

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
VUE学习笔记 -- vue的使用

一、VUE介绍1、本课程中VUE相关资料详情请见：https://download.csdn.net/download/wingzhezhe/10526815二、VUE使用案例1、插值表达式的使用2、三、
复制链接

扫一扫