<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="static/js/vuejs-2.5.16.js"></script>-->
<script src="static/js/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css ">
<Script the src =" https://unpkg.com/element-ui/ lib / index.js "> </ script
<-! introducing component library ->
V
<-!
<body>
</ head>
-bind: vue instruction is a binding property, can be abbreviated as: V- the bind: single binding data can only achieve, can be bound to the V M, the data can not be achieved the two-way binding
v -ON can be abbreviated as @ for binding event v-on: event = "function name" @ shorthand event = "function"
v -model: the only command a two-way data binding implementation V- Model can only be used in form elements, the so-called form element means:
the SELECT, the INPUT (text, Email, Adress, Radio, the CheckBox), the TextArea
->
<- MVVM in v refers to the html fragment ->!
<div the above mentioned id = "app01">
<-! v-text does not flicker, but v-text inside the tag will cover the original content. ->
<! - alternative interpolation only their expression placeholder, not the entire interior contents emptied tag ->
<h1 of> ==== {{}} ================ MSG < / h1> <br> <-! difference expression, the display data to the data defined here ->
<div V-text = "MSG"> ==== </ div> <br>
< h3 v-html = "
<INPUT type = "text" name = "Age" the bind-V: value = "Age +. 6"> <br>
<- the bind-V:! vue instruction is a binding property, can be abbreviated as: - ->
{{name}} <INPUT type = "text" name = "name" V-Model: value = "name"> <br> <- V-Model:! achieve a unique two-way data binding command - ->
<Button ON-V: the Click = "fun1"> Vue onClick event of </ Button> <br>
<Button ON-V: the Click = "fun2 ( 'Vue parameter Vue')"> onClick2 event of Vue < / the Button> <br>
<the Button v-ON: mouseOver = "fun3 ( 'Pikachu')"> point I ah </ the Button> <br>
<the Button v-ON: Blur = "FUN4 ( 'Pikachu lose focus') "> loses focus </ Button> <br>
<Button ON-V: = keyDown"fun5 ( 'Kawaii ah babbling') "> cute </ Button> <br>
<-! ========================== =========================== -> = "seen"> when the attribute is true seen see, false on invisible </ p>
<-! v-IF and v-show is the same, which is hidden time, v-show by adding tags to display: none style to complete, while the v-if is done directly to the elements removed ->
<P V- IF
<= P V-Show "Seen"> Show V-control statements </ P>
<P V- for = "Key in List"> Key {} {} </ P>
<P V- for = "(Key, index) in List"> value ---> {{key}} --- index value: ---> index {} {} </ P>
<P V- for = " (key, index) in list1 " > value ---> {{key}} --- index value: ---> index {} {} </ P>
<P V- for =" (Key, index) in lists "> value ---> {{key}} --- index value: ---> index {} {} </ P>
<P V- for =" (Val, Key, index ) in user "> value ---> {{val}} --- bond is: ---> {{key}} ---> index value: ---> {{index}} </ P>
<V- P for = "COUNT in 10"> the this ID COUNT {{}} The Times </ P> <-! the traversal number, a default starting from 1 ->
</ div>
<Script> //
MVVM in vm: This portion refers
var VM = new new Vue ({
EL: "# app01", // the Vue takeover region of the app id
// MVVM in M: refers to the data Object
the Data: {
msg: "Welcome to the first VUE!", // Note: Do not add a semicolon here
msg1: "" ,
the Result: "<h1 style = 'Color: Red'> this is the content of a html tags </ h1 of> " ,
Age: 12 is ,
name: " dull " ,
Seen: to false ,
List:[1,2,3,4,5,6],
list1:[
ID {:
Mounted: function () { . 1, name: "dull", Age: 10 },
{ID: 2, name: "Minmin", Age:. 11 },
{ID: . 3, name: "Small slumped", age: 12 },
{ID: . 4, name: "cute Min", Age: 13 is },
{ID: . 5, name: "tact stay", Age: 14 }
],
Lists: [],
User: {
ID: . 1 ,
name : "dull" ,
Age: 18 is
}
},
var _this = this
axios.get ( 'EMP / List' ) .then (
function (Result) {
_this.lists = result.data;
}
). the catch (
function (error) {
});
},
Methods: {
fun1: function () {
Alert ( "Hello everyone, this is my first method vue !!" )
},
fun2: function (msg1) {
Alert ( "Hello everyone, this is with the Senate vue" );
the this .msg = msg1;
Alert (MSG1);
Alert ( this .age); // can be referenced directly in the process data in the data
// in vm example, the method of data or data acquisition methods in order, by this property name must. Alternatively this invocation of the method name,
// this here to express our new instance of an object out of the VM
},
FUN3: function (Msg2) {
Alert (Msg2);
},
FUN4: function (the Msg3) {
Alert (the Msg3) ;
},
fun5: function (Msg4) {
Alert (Msg4);
},
}
});
</ Script>
</ body>
</ HTML>
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script type="text/javascript" src="static/js/vuejs-2.5.16.js"></script>-->
<script src="static/js/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css ">
<Script the src =" https://unpkg.com/element-ui/ lib / index.js "> </ script
<-! introducing component library ->
</head>
<body>
<div id="app01">
<!--添加-->
<el-dialog title="添加员工" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="员工id" :label-width="formLabelWidth">
<el-input v-model="form.eid" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="员工姓名" :label-width="formLabelWidth">
<el-input v-model="form.ename" auto-complete="off"></el-input>
</el-form-item>
Employees Age": label-width = "formLabelWidth<el-form-item label =
<el-input v-model="form.eage" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</div>
</el-dialog>
<!-- <p v-for="key in list">id 为:{{key.eid}}–>值为：–>{{key.ename}}–></p>-->
<div style="margin-left: 400px;">
<el-button type="primary"style="margin: 10px 250px ;" @click="add">添加员工</el-button>
<el-table
v-bind:data="list"
style="width: 60%;"
:stripe="true"
:border="flag">
<el-table-column
prop="eid"
label="EID"
align="center">
</el-table-column>
<el-table-column
prop="ename"
label="姓名"
align="center">
</el-table-column>
<el-table-column
prop="eage"
align="center"= "Age">
label
</el-table-column>
<el-table-column
fixed="right"
label="操作"
align="center"
width="100">
<template slot-scope="scope">
<el-button @click="deleteItem(scope.row.eid)" type="text" size="small">删除</el-button>
<el-button type="text" size="small" @click="editItem(scope.row)">编辑</el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin-right: 400px;">
<el-pagination
background
layout= "PREV, pager, Next"
: Page -size = "the pageSize"
align = left = "Center"
: the pageSize = "the pageSize"
: Current -page = "pageNum"
@current-change="changeNum"{
list:[],
: Total = "Total">
</ EL-the pagination>
</ div>
</ div>
</ div>
<Script> // MVVM in vm: This portion refers
var VM = new new Vue ({
EL: " app01 # ", // the Vue takeover region of the app id Data: {
total: 5 ,
page size: 3 ,
pageNum: 1 ,
flag: true ,
page size: 2 ,
dialogFormVisible: false,
Form: {
eid: '' ,
enameling: '' ,
looked: ''
},
formLabelWidth: '120px'
},
methods: {
editItem: function (item) {
this .dialogFormVisible = true ;
Messages .form.eid = item.eid;
Messages .form.ename = item.ename;
Messages .form.eage = item.eage;
},
deleteItem:function(eid){
alert(eid);
var _this = this;
axios.delete("emp/del/"+eid).then(
function (result) {
if (result.data.map.statusCode==200){
_this.$message({
message: '删除成功',
type: 'success'
});
_this.fenye("emp/list",_this);
}
}).catch(function (reason) {
})
},
confirm:function(){
var _this =this;
if (this.form.eid == ''){
axios.post("emp/saveInfo",this.form).then(
function (result) {
if(result.data.map.statusCode==200){
_this.dialogFormVisible=false;
_this.fenye("emp/list",_this);
}
}
).catch(function (reason) {
alert("失败")
});
} else {
alert("1111111111");
axios.put("emp/update",_this.form).then(
function (result) {
if(result.data.map.statusCode==200){
_this.dialogFormVisible=false;
_this.fenye("emp/list",_this);
}
}
).catch(function (reason) {
alert("失败")
});
}
},
add:function(){
this.dialogFormVisible=true;
},
changeNum:function (num) {
var _this = this;
this.fenye('emp/list',_this);
},
fenye:function (url,_this) {
axios.get(url).then(
function (result) {
_this.list=result.data;
}
).catch(function (error) {
});
}
},
mounted:function(){
var _this = this;
this.fenye('emp/list',_this);
}
});
</script>
</body>
</html>