Vue入门
一、什么是 Vue#
Vue (读音 /vjuː/) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。在前后端分离项目中经常使用到。
二、Vue 常见指令#
首先在 HTML 的 标签引入 vue.js，以下 vue 指令都写在 标签中
注意：vue.js 要是开发版的，生产版的不能调试
{{属性}}#
作用：vue 用来解析数据的指令
<body>
<!--页面模板-->
<div id="app">
<!--模板中需要进行填充内容:内容取值-->
{{ message }}
</div>
<script>
// 创建 vue 实例
var vue = new Vue({
el: '#app', // 指定 vue 渲染的模板
data: { // 模板渲染时需要属性值
message: 'Hello Vue!'
}
})
</script>
</body>v-bind#
作用：表示通知 vue 在渲染的 DOM 标签时，将 bind 绑定的属性和 vue 实例 data 中同名属性值保持一致
<body>
<!--页面模板-->
<div id="app">
<span v-bind:title="title">{{msg}}</span>
<span :title="title">{{msg}}</span> <!--简写-->
</div>
<script>
// 创建 vue 实例
var app = new Vue({
el: '#app', // 指定 vue 渲染的模板
data: { // 模板渲染时需要属性值
msg: '移到上面来',
title:"显示数据"
}
})
</script>
</body>v-model#
作用：双向数据绑定和单向数据绑定：使用 v-model 进行双向数据绑定，功能与 v-bind 类似， 不过数据可同步改动
<body>
<div id="app">
<!--v-bind: 单向属性绑定指令,修改绑定属性值,不会改变vue实例中的data属性值-->
v-bind: <input type="text" :value="username" > </br>
<!--v-model:双向属性绑定指令,修改绑定属性值,会改变vue实例中的data属性值-->
v-model:<input type="text" v-model:value="username" >
<span>{{username}}</span>
</div>
<script>
// 创建 vue 实例
var app = new Vue({
el: '#app', // 指定 vue 渲染的模板
data: { // 模板渲染时需要属性值
username:"jere"
}
})
</script>
</body>v-html#
作用：如果数据是带有 html 格式的数据，用 v-html 将这数据渲染出来
<body>
<!--页面模板-->
<div id="app" v-html="content"></div>
<script>
// 创建 vue 实例
var app = new Vue({
el: '#app', // 指定 vue 渲染的模板
data: { // 模板渲染时需要属性值
content:"<span style='color: hotpink'>hotpink</span>"
}
})
</script>
</body>v-if#
判断指令，可以用 if、else-if 、else
<body>
<!--页面模板-->
<div id="app">
<span v-if="age>18">大于18</span>
<span v-else-if="age==18">等于18</span>
<span v-else="age<18">小于18</span>
</div>
<script>
// 创建 vue 实例
var vue = new Vue({
el: '#app', // 指定 vue 渲染的模板
data: { // 模板渲染时需要属性值
age:17
}
})
</script>
</body>v-for#
循环指令，遍历操作格式：（元素，索引）in 数组 / 集合
注意：要使用到索引的话，必须放在元素后面
<body>
<!--页面模板-->
<div id="app">
<ul>
<li v-for="e,index in emps">
{{e.id}}---{{e.name}}----{{e.age}}---索引{{index}}
</li>
</ul>
</div>
<script>
// 创建 vue 实例
var vue = new Vue({
el: '#app', // 指定 vue 渲染的模板
data: { // 模板渲染时需要属性值
emps:[
{id:1,name:"悟空",age:18},
{id:2,name:"八戒",age:11},
{id:3,name:"悟净",age:10}
]
}
})
</script>
</body>v-on#
事件绑定指令，可以缩写成 @
<body>
<!--页面模板-->
<div id="app">
<!-- <ul>
<li v-for="e,index in emps" v-on:click="clickMe()">
{{e.id}}---{{e.name}}----{{e.age}}---索引{{index}}
</li>
</ul>-->
<!--简写方式-->
<ul>
<li v-for="e,index in emps" @click="clickMe()">
{{e.id}}---{{e.name}}----{{e.age}}---索引{{index}} 点点会弹窗
</li>
</ul>
</div>
<script>
// 创建 vue 实例
var vue = new Vue({
el: '#app', // 指定 vue 渲染的模板
data: { // 模板渲染时需要属性值
emps:[
{id:1,name:"悟空",age:18},
{id:2,name:"八戒",age:11},
{id:3,name:"悟净",age:10}
]
},
methods:{ //用于 vue
clickMe:function(){
alert("点到了")
}
}
})
</script>
</body>三、Vue 事件处理#
事件函数#
事件被触发之后，执行逻辑
事件对象#
描述事件源被触发到执行完事件函数的所有过程对象，里面封装整个过程产生所有数据
事件信息封装对象： 使用 $event 标记
事件源#
触发事件，并执行事件函数那个 html 标签
事件函数传值#
$event：触发事件时，vue 自动将这个事件对象创建并保存在 $event 变量
<body>
<div id="app">
<ul>
<li v-for="u in list" v-on:click="choseClick($event,u)">
{{u.id}}-{{u.name}}-{{u.age}}-{{u.sex==1?'男':'女'}}
</li>
</ul>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
list: [
{id: 1, name: 'wukong', age: 18, sex: 1},
{id: 2, name: 'bajie', age: 17, sex: 1},
{id: 3, name: 'xishi', age: 18, sex: 0},
{id: 4, name: 'dongshi', age: 19, sex: 0}
]
},
methods:{
choseClick:function (ev,u) {
console.log(ev); // 事件对象
console.log(this); // 当前 vue 实例对象
console.log(ev.target);// 事件源
console.log(u);// 传进来的参数值
}
}
})
</script>
</body>四、Vue 实例属性#
el#
用来指示vue编译器从什么地方开始解析 vue的语法
data#
用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中
methods#
放置页面中的业务逻辑，js函数一般都放置在methods中
<script>
//....
methods:{
fun1:function () {
//....
},
fun2:function () {
}
}
</script>filters#
vue过滤器集合，主要用来格式化操作。性别判断、日期格式化都会用到
下面的 {{u.sex | sexFilter}} 意思是左边参数赋值给右边
<div id="app">
<ul>
<!--{{u.sex | sexFilter}}左边参数赋值给右边-->
<li v-for="u in list" v-on:click="choseClick($event,u.id,u.name)">
{{u.id}}-{{u.name}}-{{u.age}}-{{u.sex | sexFilter}}
</li>
</ul>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
list: [
{id: 1, name: 'wukong', age: 18, sex: 1},
{id: 3, name: 'xishi', age: 18, sex: 0},
{id: 4, name: 'dongshi', age: 19, sex: -1}
]
},
filters: {
sexFilter: function (value) {
if (value === 1){
return '男'
}else if (value === 0){
return '女'
}else{
return '保密'
}
}
}
})
</script>mounted#
定义：是一个函数， 在 vue 实例创建完成后被立即调用（ html 加载完成后执行），一般用于初始化 data 中的数据
作用：从后端接口拿数据，对 data 数据进行数据初始化
问题：调用 mounted 时发生了什么
- vue 实例创建
- vue 属性初始化（解析 vue 模板），此时的属性都是默认值
- 执行 mounted 方法，从后端接口拿数据，对 data 数据进行数据初始化
- 设置数据，渲染 vue 模板
前后端分离项目采用 ajax 异步方式请求接口获取数据
<div id="app">
<ul>
<!--{{u.sex | sexFilter}}左边参数赋值给右边-->
<li v-for="u in emps" v-on:click="choseClick($event,u.id,u.name)">
{{u.id}}-{{u.name}}-{{u.age}}-{{u.sex | sexFilter}}
</li>
</ul>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
emps: []
},
mounted: function () {
var _this = this; // _this 指的是 vue
$.get("/data/emps.json", function (data) {
_this.emps = data;
})
}
})
</script>五、Vue 生命周期#
六、Vue 综合案例 demo#
员工列表#
@RestController
@RequestMapping("employees")
public class EmployeeController {
@Autowired
private IEmployeeService employeeService;
@GetMapping("/list")
public Object list(){
return employeeService.list();
}
}<div id="app">
<ul>
<li v-for="e in emps">
{{e.id}}---{{e.name}}----{{e.age}}
</li>
</ul>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
emps: []
},
mounted: function () {
var _this = this;
$.get("http://localhost:8088/employees/list", function (data) {
_this.emps = data
})
}
})
</script>员工添加#
问题：是用 同步表单 还是 异步表单？
前后端分离项目一般都使用异步表单
@PostMapping("/saveOrUpdate")
public JsonResult saveOrUpdate(Employee employee){
employeeService.saveOrUpdate(employee);
return JsonResult.success();
}将form表单转换成异步表单有两种形式
第一种方式：使用 $.post( "xxx" , $( "#formId" ).serialize( ),function(data){
})
第二种方式：需要先引入jQuery.form.js,并在 HTML 引入中放在jQuery.js的下面，代码如下
<div id="app">
<form id="formId">
<input type="hidden" name="id">
名称：<input type="text" name="name"><br>
年龄：<input type="text" name="age"><br>
<input type="button" id="btn" @click="submitForm()" value="提交">
</form>
</div>
<script>
var vue = new Vue({
el: "#app",
data: {
emps: []
},
methods: {
submitForm: function () {
$("#formId").ajaxSubmit({
url: "http://localhost:8088/employees/saveOrUpdate",
type: "post",
success: function (data) {
if (data.code === 200) {
window.location.href = "list.html"
} else {
alert("输入有误")
}
}
});
}
}
})
</script>success方法里面用回调的data去获取后端传来的JSON对象中的code，判断状态码是否为200，如果是200，就跳页面，如果不是就弹窗报错
window.location.href 可以跳页面
员工编辑#
@GetMapping("/detail")
public Object detail(Long id){
return employeeService.getById(id);
}<!--回显用 v-model -->
<div id="app">
<form id="formId">
<input type="hidden" name="id" v-model="emp.id">
名称：<input type="text" name="name" v-model="emp.name"><br>
年龄：<input type="text" name="age" v-model="emp.age"><br>
<input type="button" id="btn" @click="submitForm()" value="提交">
</form>
</div>
<script>
//获取url上的请求参数
function getParams() {
//获取问号及问号后面的内容
var url = window.location.search;
var params = new Object();
if (url.indexOf("?") != -1) {
//截取问号后面的内容,再使用&分割多个属性
var arr = url.substr(1).split("&");
for (var i = 0; i < arr.length; i++) {
//使用=分割为keyvalue
var keyValue = arr[i].split("=");
params[keyValue[0]] = keyValue[1];
}
}
return params;
}
var vue = new Vue({
el: "#app",
data: {
emp: []
},
methods: {
submitForm: function () {
$("#formId").ajaxSubmit({
url: "http://localhost:8088/employees/saveOrUpdate",
type: "post",
success: function (data) {
if (data.code === 200) {
window.location.href = "list.html"
} else {
alert("输入有误")
}
}
});
}
},
mounted:function () {
// 步骤一: 获取 id
var params = getParams();
// 步骤二: 发起异步请求获取员工对象
if (params) {
var _this = this;
$.get("http://localhost:8088/employees/detail", {id: params.id}, function (data) {
console.log(data)
_this.emp = data;
})
}
}
});