Vue
概述
是一套用于构建用户界面的渐进式javascript框架。
快速入门
开发中: 我们往往先定义好Vue数据模型,然后在页面标签中进行数据模型的绑定!
- 在Vue对象中声明数据绑定对象
<script>
var vm=new Vue({
el:"#app",//挂载标签
data:{name:"李四"} //声明数据模型,定义一个name数据
})
</script>
- 在页面标签建立好标签-数据模型的关系
<div id="app">你好:{{name}}</div>
<!--//在页面标签建立好标签-数据模型的关系-->
- 通过上述操作: 开发时,我们只需要关注 数据模型对象即可,页面标签数据会自动更新
-
使用vue 可以更快捷的开发,将模型数据和页面展示 分离,开发人员无需开发数据如何更新的问题
-
使用vue 我们只需要关注数据模型的开发! 注意语法: 一切皆json格式的规则!
-
使用vue 开发步骤简单,1. 先声明数据模型对象,2. 在页面标签位置,展示对应的数据即可
初学者重点要掌握: 1. 语法 如何声明数据模型对象 2. 页面展示数据{{}}等特定语法
功能介绍
Vue对象中常用的属性
创建Vue实例
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
})
模板或元素el
每个Vue实例都需要关联一段Html模板,Vue会基于此模板进行视图渲染。我们可以通过el属性来指定。
例如一段html:
<div id="app">
</div>
然后创建Vue实例,关联这个div
var vm = new Vue({
el:"#app"
})
这样,Vue就可以基于id为app
的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。
数据data
当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
html:
<div id="app">
{{name}}
</div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"刘德华" // data 区域 就是我们常说的数据模型对象!
}
})
- name的变化会影响到div标签内的值
方法methods
Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue的作用范围内使用。
一般方法都会和对应的事件绑定:
举例: vue通过 v-on :绑定事件 事件类型,通过冒号:事件类型名称即可
语法格式: v-on:click=“函数名称” 点击事件触发对应的函数
html:
<div id="app">
你好:{{name}}
<button v-on:click="clickMe">点击我</button>
</div>
js:
<script>
var vm = new Vue({
el:"#app",
data:{name:'lisi'},
methods:{
clickMe:function () {
alert("弹弹弹。。。弹走鱼尾纹")
}
}
})
</script>
Vue指令
插值表达式
花括号 格式: 一般用来获取vue数据模型中定义的数据
{{表达式}}
说明:
- 该表达式支持JS语法,可以调用js内置函数(必须有返回值)如:new Date()
- 表达式必须有返回结果。例如 1 + 1,没有结果的表达式不允许使用,如:var a = 1 + 1;
- 可以直接获取Vue实例中定义的数据或函数
- 插值表达式 不可以使用在标签内的属性值上 一定注意!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值表达式{{}}</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!--插值表达式 可以支持数学和逻辑运算-->
{{1+1}}
{{1==1?'true':'false'}}
<!--插值表达式可以支持js内置函数-->
{{new Date()}}
<!--获取数据模型中数据-->
{{name}}
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
name: '程序员'
}
})
</script>
</body>
</html>
v-text和v-html
指令:
- Vue.js的指令是指 v-开头,作用于html标签,提供一些特殊的特性,当指令被绑定到html元素的时候,指令会为被绑定的元素添加一些特殊的行为,可以将指令看成html的一种属性。
指令特征 (Directives) 是带有 v- 前缀的特殊属性,作用于 html标签!
-
也就是说 在标签中才会运用到指令语法! 数据模型 :不会涉及到v- 开头的语法!
-
v-text 数据绑定标签,将vue对象data中的属性绑定给对应的标签作为内容显示出来,类似js的text属性;
-
v-html 类似v-text标签,他是将data的属性作为html语法输出,类似js中的innerHtml属性
说明: -
v-text: 将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出
-
v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-text-html</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
v-html:<span v-html="hello"></span>
<br/>
v-text:<span v-text="hello"></span>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
hello: "<h1>大家好,我是刘德华</h1>"
}
})
</script>
</body>
</html>
v-model
v-text和v-html可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行。
接下来学习的v-model是双向绑定,视图(View)和模型(Model)之间会互相影响。
既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型
语法:
html标签内部直接输入: v-model=“vue定义的变量名称”
此时标签中的value值就和vue定义的变量对应的值,形成了双向绑定,当一个值发生改变,另一个也随之改变;
v-model 指令大都数是用在表单 、 及 等元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。
注意:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。
<!DOCTYPE html>
<html lang="en">
<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="radio" name="sex" value="male" v-model="sex" checked="checked"> 男性
<input type="radio" name="sex" value="female" v-model="sex"> 女性
<div>
你选择了{{sex}}
</div>
<hr>
<div>
<select name="xueli" v-model="xueli">
<option value="chuzhong" selected="selected">初中</option>
<option value="gaozhong">高中</option>
<option value="daxue">大学</option>
<option value="boshi">博士</option>
</select>
</div>
<div>
你选择了{{xueli+1}}
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data :{
sex:"female", // 我们发现 标签中的 checked="checked" 失效
xueli:"boshi" // 标签中初始化的 selected="selected"失效
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<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="checkbox" v-model="ischecked" />是否选中<br/>
<input type="checkbox" v-model="language" value="Java" />Java<br/>
<input type="checkbox" v-model="language" value="PHP" />PHP<br/>
<input type="checkbox" v-model="language" value="GO" />GO<br/>
<h1>
多选框:{{language}} , 单选框:{{ischecked}}
</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
language: [],// 对于多选框 我们用数组来接受多个选项值!
ischecked: true // 对于单个 boolean 来定义
}
})
</script>
</body>
</html>
v-on基本用法
v-on指令用于给页面元素绑定事件
@事件名="js片段或函数名" v-on:click == @click
<div id="app">
<!--事件中直接写js片段 简单的可以这样写 -->
<button @click="num++">增加</button><br/>
<!--复杂事件 需要指定一个回调函数,必须是Vue实例中定义的函数-->
<button @click="decrement">减少</button><br/>
<!--显示效果-->
<h1>num: {{num}}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
num:0 // 初始化数据模型
},
methods:{ // 如果出现事件绑定的函数对象 要用 methods来声明事件 语法规则:
decrement(){
this.num--; // 在vue 对象里面 ,this 表示当前的 vue对象 获取对应的属性 this.声明的属性名称 注意 this不是点击的标签按钮对象!
}
}
})
</script>
v-on按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:
<!-- 监听回车事件 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 表示用户敲击回车 会执行对应的submit函数 submit是函数名称 可以自定义-->
<input @keyup.enter="submit">
<!DOCTYPE html>
<html lang="en">
<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" @keyup.enter="submit" v-model="username">
<p>
你输入的内容:{{username}}
</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data :{
username:''
},
methods:{
submit() {
alert("提交"+this.username) // 当我们敲击回车时,当前submit函数执行
}
}
})
</script>
</body>
</html>
v-bind属性上使用VUE数据
v-bind 用于将vue的值绑定给对应dom的属性值主要用于对标签的元素属性赋值
v-bind:元素属性名="数据模型定义的初试数据"
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
原始语法如下:
<div v-bind:hidden="hiddenValue">v-bind test</div><br>
简化写法 :hidden
<div :hidden="hiddenValue">v-bind test</div>
</div>
<script>
new Vue({
el: "#app",
data: {
hiddenValue:false // 页面元素不影藏 , 如果是true表示隐藏页面元素
}
})
</script>
</body>
</html>
class属性的特殊用法
Vue对class属性进行了特殊处理,可以接收数组或对象格式
<div :class="{ red: true,blue:false }"></div>
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="js/vuejs-2.5.16.js"></script>
<style>
#box {
width: 100px;
height: 100px;
color: darkgray
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button @click="change">更改颜色</button>
<!--
{red:flag,blue:!flag} 对象中,key是已经定义的class样式的名称,如本例中的:red和blue
value是一个布尔值,如果为true,则这个样式会生效,如果为false,则不生效。
-->
<div id="box" :class="{red:flag,blue:!flag}">
点击按钮,背景会切换颜色哦
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
flag:true, // flag表示 当前的样式值
},
methods:{
change(){
this.flag=!this.flag
}
}
})
</script>
</body>
</html>
v-for
遍历数组
v-for="item in items"
- items:要遍历的数组,需要在vue的data中定义好。
- item:迭代得到的数组元素的别名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!--遍历数组 -->
<table width="100%" border="1px">
v-for位置:在需要遍历的元素父元素中书写
<tr v-for="(user in users">
<!--<td >{{index+1}}</td>-->
<td >{{user.name}}</td>
<td v-text="user.gender"></td>
<td v-text="user.age"></td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
// 定义数组对象 遍历的数据源
users:[
{name:'小明', gender:'女', age: 20},
{name:'小米', gender:'男', age: 30},
{name:'小猫', gender:'女', age: 24},
]
}
});
</script>
</body>
</html>
数组角标
在遍历的过程中,如果我们需要知道数组角标,可以指定第二个参数:
v-for="(item,index) in items"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值表达式{{}}</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<!-- 对象遍历-->
<table>
<tr v-for="(u,key,index) in user">
<td v-text="index"></td>
<td v-text="key"></td>
<td v-text="u"></td>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
user:{name:'小明', gender:'男', age: 21}
}
})
</script>
</body>
</html>
v-if和v-show
v-if&v-else的使用
v-if,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。
v-if="布尔表达式"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if-show</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<div id="app">
<div @click="flag=!flag">
点击我试试
</div>
<p v-if="flag">你好 程序员</p>
<p v-else>你好 中国</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data :{
flag: true
}
})
</script>
</body>
</html>
v-show
v-if和v-show功能差不多,都是用来控制dom的显隐,用法也一样,只是原理不同,当v-if="false"时,dom被直接删除掉;为true时,又重新渲染此dom;
<div id="app">
<div @click="flag=!flag">
点击我试试
</div>
<p v-show="flag">你好 程序员</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data :{
flag: true
}
})
</script>
VUE生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等等。Vue为生命周期中的每个状态都设置了监听函数。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。vue的生命周期中具体做了什么事情我们通常不需要关心,我们只要关注生命周期的8个监听函数。
监听函数
vue的整个生命周期中,提供了8个监听函数,以便我们可以在某个生命周期段根据需要做相应的操作:
beforeCreate:在vue实例创建前调用
created:在vue实例创建后调用,这个监听函数是最常用的,这个时候会初始化data数据,通常去后端取数据;
beforeMount:在挂载开始之前被调用 。 什么是挂载?可以将vue对象和视图模板进行关联的过程看作是挂载
mounted:挂载到实例上去之后调用
beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前
updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子
beforeDestroy:实例销毁之前调用。在这一步,vue实例仍然完全可用。
destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
this对象的说明
this就是当前的Vue实例,在Vue对象内部,必须使用this才能访问到Vue中定义的data内属性、方法等
VUE之ajax
vue-resource是Vue.js的插件,提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。
当vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,在这里大家了解一下vue-resource就可以,因为现在基本使用的都是2.0之后的版本了。
axious使用
axios是对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
get请求
//发送get请求 切记不要在ajax回调函数内使用this 因为此时的this 指的是vue对象
axios.get("/findById.do?id=100").then((res) => {
console.log("请求发送成功")
}).catch((e) => {
console.log("发生异常了:" + e)
}).finally(() => {
console.log("最终会执行的业务逻辑")
})
post请求
<script>
//发送post请求,传递数据 使用json格式数据传输 推荐写法!
axios.post("/add.do",{name:"zhangsan"}).then((res) => {
console.log("请求发送成功")
}).catch((e) => {
console.log("发生异常了:" + e)
}).finally(() => {
console.log("最终会执行的业务逻辑")
})
</script>
VUE表单提交数据
说明: 使用axios将表单数据提交到后台 要求使用vue+axios 实现
html页面编写:
<div id="app">
<form>
用户名<input type="text" v-model="formData.username"><br>
密码<input type="password" v-model="formData.password"><br>
性别
<input type="radio" value="male" v-model="formData.sex">男
<input type="radio" value="female"v-model="formData.sex">女
<br>
爱好
<input type="checkbox" value="洗澡"v-model="formData.hobby">洗澡
<input type="checkbox" value="看电视"v-model="formData.hobby">看电视
<input type="checkbox" value="睡觉"v-model="formData.hobby">睡觉
<br>
学历
<select v-model="formData.education">
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大专">大专</option>
<option value="本科">本科</option>
</select>
<br>
简介<textarea rows="5" cols="20" v-model="formData.remark"></textarea>
<br>
<input type="button" @click="add" value="提交"></input><br>
</form>
</div>
vue模块代码编写 通过ajax完成表单数据的提交!
<script>
var vm = new Vue({
el:"#app",
data:{
// 提交给后台的数据 都是在data中声明的
formData:{
username:'',
password:'',
sex:'',
hobby:[],
education:'',
remark:''
}
},
methods:{
add(){
// alert("---"+JSON.stringify(this.formData))
// axios 提交给后台
axios.post("/add.do",this.formData).then();
}
}
})
</script>
注意:通过axios提交表单数据,会自动将表单数据序列化成json格式的数据,我们在后台controller只需要通过: @RequestBody 将此json格式数据 封装到实体对象里面即可!
key:value 格式提交! 标准的json格式数据传输
案例前端代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" rel="stylesheet" href="/css/user.css"/>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<!-- 引入element ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入 element ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<table class="altrowstable" id="alternatecolor">
<tr>
<th>用户编号</th>
<th>用户名</th>
<th>真实姓名</th>
<th>年龄</th>
<th>性别</th>
<th>出生日期</th>
<th>删除操作</th>
</tr>
<tr v-for="user in users">
<td>{{user.id}}</td>
<td>{{user.userName}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td>{{user.birthday}}</td>
<td><button @click="deleteUserById(user.id)">删除</button></td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
users:null // 用户数据绑定-后续ajax查询结果绑定到此对象上
},
created:function () {
this.findAll();// 页面数据初始化时 发送ajax请求到后台 查询所有用户信息
},
methods:{
deleteUserById:function (id) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
axios.get("/user/deleteUserById.do?id="+id).then((res)=>{
this.$message({
type: 'success',
message: '删除成功!'
});
this.findAll();
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
findAll:function () {
axios.get("/user/findAll.do").then((res)=>{
// console.info(res.data)
this.users=res.data;
})
}
}
})
</script>
</body>
</html>