VUEJS简单入门

1. VueJS 概述与快速入门

1.1 VueJS介绍

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

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

1.2 MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

MVVM全称是Model-View-ViewModel

1.3 VueJS 快速入门

vuejs: Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

1、引入vuejs

2、编写代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

new Vue({

el:'#app', //表示当前vue对象接管了div区域

data:{

message:'hello world' //注意不要写分号结尾

}

});

</script>

</body>

</html>

1.4 VueJs的插入值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。

Vue.js 都提供了完全的 JavaScript 表达式支持。

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ if (ok) { return message } }}

核心代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs快速入门</title>

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

<div id="app">
{{message}} // view
<hr>
{{num+10}}
<hr>
{{num==0?'小飞飞':'小鸭鸭'}}

<hr>

</div>

<script>
//ViewModel
new Vue({
el: '#app', //接管div
data: {
message: 'vuejs入门到发疯......', // Model
num: 1
}
})
</script>
</body>
</html>

小结：插入值表达式可以使用if判断吗？可以定义变量吗？不可以，不可以

2. VueJS 常用系统指令

2.1 v-on

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码

2.1.1 v-on:click （v-on:click的简写是@click）

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<button v-on:click="fun1('雄霸天来了....')">点我</button> // fun1(参数a)

</div>

　//ViewModel

new Vue({

el:'#app', //表示当前vue对象接管了div区域

data:{

　　message: 'vuejs入门到发疯......'

//注意不要写分号结尾

　　//我们把方法都在methods中定义

methods:{

fun1:function(msg){ // function(形参(传参数a）)

　　　　//给model赋值

this.message=msg;

}

});

</script>

</body>

</html>

小结：v-on:click 可以简写成什么？ @click

2.1.2 v-on:keydown 键盘按下事件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

new Vue({

el: '#app', //表示当前vue对象接管了div区域

methods: {

fun2: function (e) { // e形参

　　　/*　//1、获取键盘的按键码

　　　　var keyCode = e.keyCode;　

　　　　//0【48】 1【49】。。。 9【57】
　　　　if(keyCode >= 48 && keyCode<=57){
　　　// 按下了数字，阻止事件默认行为
　　　 alert(keyCode)
　　　 e.preventDefault() */

if (!((e.keyCode >= 48 && e.keyCode <= 57) || e.keyCode == 8 || e.keyCode == 46)) {

　　　　//按下了非数字、非backspace、非Delete键，阻止事件默认行为(即如果按下的键不是数字或不是backspace键或不是delete键，则不会显示出来，该键盘按下的事件会被阻止）

e.preventDefault();

}

});

</script>

</body>

</html>

2.1.3 v-on:mouseover

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs指令： v-on:mouseover</title>

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

<div id="app">
<div style="background-color: yellowgreen" @mouseover="fun1">
<textarea @mouseover="fun2($event)">这是一个文本域</textarea>
</div>
</div>

<script>
//ViewModel
new Vue({
el: '#app', //接管div
//我们把方法都在methods中定义
methods:{
fun1: function () {
alert('div......')
},
fun2: function (e) {
alert('这是一个文本域......')
//阻止事件的冒泡 （如果没有写e.stopPropagation() 阻止事件的冒泡，则会在跳出“这是一个文本域后点确定后，再跳出"div" 因为白色背景的文本域区域是在绿色区域范围内的 )
e.stopPropagation()
}
}
})
</script>
</body>
</html>

上述代码如图

1.当鼠标移动到绿色区域会跳出

2.当鼠标移动到白色背景文本域时会跳出

　　小结：阻止事件传播【冒泡】的方法是event里的那个？stopPropagation()

2.1.4 事件修饰符

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 阻止事件默认行为或event.stopPropagation() 阻止事件的冒泡

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once

<!DOCTYPE html>

<html>

<head>

<title>v-on 事件修饰符</title>

</head>

<body>

</form>

<hr> // 分割线

<a @click.stop href="http://www.itcast.cn">itcast</a>

</div>

</div>

new Vue({

el : '#app', //表示当前vue对象接管了div区域

methods : {

fun1 : function() {

alert("hello itcast");

fun2: function () {
alert('div2222......')
},

fun3: function () {
alert('div......')
}

}

});

</script>

</body>

</html>

小结：事件修饰符的作用是什么？对原生事件的方法的简写

2.1.5 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名：

.enter

.tab

.delete (捕获 "删除" 和 "退格" 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

<!DOCTYPE html>

<html>

<head>

<title>v-on 按钮修饰符</title>

</head>

<body>

</div>

new Vue({

el : '#app', //表示当前vue对象接管了div区域

methods : {

fun1 : function() {

//当我们按下了回车才触发这个方法

alert("你按了回车...");

}

});

</script>

</body>

</html>

<div @click.ctrl="doSomething">Do something</div>

v-on简写方式

2.2
v-text与v-html

<!DOCTYPE html>

<html>

<head>

<title>v-html与v-text</title>

</head>

<body>

</div>

new Vue({

el : '#app', //表示当前vue对象接管了div区域

data : {

message :'<h1>纯情小飞飞</h1>'

}

});

</script>

</body>

</html>

2.3 v-bind

插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<font size="5" v-bind:color="ys1">传智播客</font> <font size="5"

:color="ys2">黑马程序员</font>

<hr>

<a v-bind={href:"http://www.itcast.cn/index/"+id}>itcast</a>

</div>

new Vue({

el : '#app', //表示当前vue对象接管了div区域

data : {

ys1 : "red",

ys2 : "green",

id : 1

}

});

</script>

</body>

</html>

v-bind简写方式

2.4
v-model

<!DOCTYPE html>

<html>

<head>

<title>v-model</title>

</head>

<body>

姓名:<input type="text" id="username" v-model="user.username"><br>

密码:<input type="password" id="password" v-model="user.password"><br>

</div>

new Vue({

el : '#app', //表示当前vue对象接管了div区域

data : {

user : {

username : "",

password : ""

}

methods : {

fun : function() {

alert(this.user.username + " " + this.user.password);

this.user.username = "tom";

this.user.password = "11111111";

}

});

</script>

</body>

</html>

2.5 v-for

2.5.1 操作array

<!DOCTYPE html>

<html>

<head>

<title>v-model</title>

</head>

<body>

<ul>

<li v-for="(item,index) in list">{{item+" "+index}}</li>

</ul>

</div>

new Vue({

el : '#app', //表示当前vue对象接管了div区域

data : {

list : [ 1, 2, 3, 4, 5, 6 ]

}

});

</script>

</body>

</html>

2.5.2 操作对象

<!DOCTYPE html>

<html>

<head>

<title>v-for示例1</title>

</head>

<body>

<ul>

<li v-for="(value,key) in product">{{key}}--{{value}}</li>

</ul>

</div>

new Vue({

el : '#app', //表示当前vue对象接管了div区域

data : {

product : {

id : 1,

pname : "电视机",

price : 6000

}

});

</script>

</body>

</html>

2.5.3 操作对象数组

<!DOCTYPE html>

<html>

<head>

<title>v-for示例1</title>

</head>

<body>

<tr>

</tr>

<td>{{p.pname}}</td>

<td>{{p.price}}</td>

</tr>

</table>

</div>

new Vue({

el : '#app', //表示当前vue对象接管了div区域

data : {

products : [ {

id : 1,

pname : "电视机",

price : 6000

}, {

id : 2,

pname : "电冰箱",

price : 8000

}, {

id : 3,

pname : "电风扇",

price : 600

} ]

}

});

</script>

</body>

</html>

2.6 v-if与v-show

v-if是根据表达式的值来决定是否渲染元素

v-show是根据表达式的值来切换元素的display css属性

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<span v-if="flag">传智播客</span> <span v-show="flag">itcast</span>

</div>

new Vue({

el : '#app', //表示当前vue对象接管了div区域

data : {

flag : false

methods : {

toggle : function() {

this.flag = !this.flag;

}

});

</script>

</body>

</html>

3.VueJS生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

vue在生命周期中有这些状态：

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。

Vue在实例化的过程中，会调用这些生命周期的钩子，给我们提供了执行自定义逻辑的机会。那么，在这些vue钩子中，vue实例到底执行了那些操作，我们先看下面执行的例子

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div id="app">{{message}}</div>

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('------------------')

}

vm.message = "good...";

vm.$destroy();

</script>

</body>

</html>

vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容

1）beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象

2）created ：数据已经绑定到了对象实例，但是还没有挂载对象

3）beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点

4） mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作。

当我们的data发生改变时，会调用beforeUpdate和updated方法

l beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变

l updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新

5）beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动

4.VueJS ajax

4.1 vue-resource

vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。

vue-resource的github: https://github.com/pagekit/vue-resource

4.2 axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

axios的github: https://github.com/axios/axios

4.2.1 引入axios

首先就是引入axios,如果你使用es6，只需要安装axios模块即可

import axios from 'axios';

//安装方法

npm install axios

//或

bower install axios

当然也可以用script引入

4.2.2 get请求

//通过给定的ID来发送请求

axios.get('/user?ID=12345')

.then(function(response){

console.log(response);

})

.catch(function(err){

console.log(err);

});

//以上请求也可以通过这种方式来发送

axios.get('/user',{

params:{

ID:12345

}

})

.then(function(response){

console.log(response);

})

.catch(function(err){

console.log(err);

});

4.2.3 post请求

axios.post('/user',{

firstName:'Fred',

lastName:'Flintstone'

})

.then(function(res){

console.log(res);

})

.catch(function(err){

console.log(err);

});

为方便起见，为所有支持的请求方法提供了别名

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

5. 综合案例

5.1 案例需求

完成用户的查询与修改操作

5.2 数据库设计与表结构

User表：

/*Table structure for table `user` */
CREATE TABLE `user` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `username` VARCHAR(50) DEFAULT NULL,
  `password` VARCHAR(50) DEFAULT NULL,
  `name` VARCHAR(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

/*Data for the table `user` */
INSERT INTO `user`(`id`,`username`,`password`,`name`) VALUES (1,'zhangsan','123','张三');
INSERT INTO `user`(`id`,`username`,`password`,`name`) VALUES (2,'lisi','123','李四');

User类：

public class User {

private Integer id;//主键
    private String username;//用户名
    private String password;//密码
    private String name;//姓名

//此处省略getter和setter方法 .. ..

}

5.3 服务器端

5.3.1 配置文件

5.3.1.1 pom.xml

<?xml version="1.0" encoding="UTF-8"?>

<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">

<groupId>com.itheima.vuejsDemo</groupId>

<artifactId>vuejsDemo</artifactId>

<version>1.0-SNAPSHOT</version>

<name>vuejsDemo Maven Webapp</name>

<url>http://www.example.com</url>

<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>

<groupId>org.aspectj</groupId>

<artifactId>aspectjweaver</artifactId>

</dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-aop</artifactId>