重點為：雙向數據綁定。
框架：是一個半成品軟件，是一套可重用的、通用的、軟件基礎代碼模型，基于框架進行開發，更加快捷，更加高效。
Vue快速入門
基礎框架：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue</title><!--引入vue --><script src="js/vue.js"></script>
</head>
<body><!-- 定義視圖 --><div id="app"><--v-model進行數據綁定--><input type="text" v-model="message"><!-- 在界面中直接將message數據展示出來 -->{{message}} </div>
</body><!-- 定義Vue對象 --><script>new new Vue({//編寫屬性值el:"#app", //vue接管的區域data:{ //data定義數據模型message:"Hello World"}})</script>
</html>
Vue的常用指令
v-bind和v-model
v-bind：作用在超鏈接上。
v-model：作用在表單上<input type=...>
data：為數據模型
<body><div id="app"><!--vue視圖--><a v-bind:href="url">百度</a><input type="text" v-model="url"></div>
</body>
<script>//定義Vue對象new new Vue({el:"#app",//vue接管的范圍data:{url:"https://www.baidu.com/"}})
</script>v-on
methods屬性可以定義來定義函數。
<body><div id="app"><!--vue視圖--><input type="button" value="點我一下" v-on:click="handle"></div>
</body>
<script>//定義Vue對象new new Vue({el:"#app",//vue接管的范圍data:{},methods: {handle:function(){alert("你點了我一下..")}},})
</script>
v-if和v-show
<body><div id="app"><!--vue視圖--><input type="text" v-model="age"><br>經判定為：<span v-if="age<=30">年輕人</span><span v-else-if="age>30&& age<=60">中年人</span><span v-else="age>60">老年人</span></div>
</body>
<script>//定義Vue對象new new Vue({el:"#app",//vue接管的范圍data:{age:20},methods: {}})
</script>
判定后：
v-for?
<body><div id="app"><div v-for="(arr, index) in address" >{{index+1}}:{{arr}}</div></div>
</body>
<script>//定義Vue對象new new Vue({el:"#app",//vue接管的范圍data:{address:["上海","深圳","西安","南京","北京"]},methods: {}})
</script>
Vue案例
分析：先將表格的格式展現出來，再用Vue進行改編。
</head>
<body><div id="app"><!--創建表格--><table border="1" cellspacing="0" width="50%" ><tr ><th >編號</th><th>姓名</th><th>年齡</th><th>性別</th><th>成績</th><th>等級</th></tr><!-- 利用vfor循環遍歷 --><tr align="center" v-for="(us, index) in users" ><td>{{index+1}}</td><td>{{us.name}}</td><td>{{us.age}}</td><td><span v-if="us.gender==1">男</span><span v-if="us.gender==2">女</span></td><td>{{us.score}}</td><td><span v-if="us.score>=85" >優秀</span><span v-else-if="us.score>=60&&us.score<85">及格</span><span v-else style="color:red;">不及格</span></td></tr></table></div>
</body>
<script>new new Vue({el:"#app",data:{users:[{name:"Tom",age:20,gender:1,score:78},{name:"Rose",age:18,gender:2,score:86},{ name:"Jerry",age:26,gender:1,score:90},{name:"Tony",age:30,gender:1,score:52}]}})
</script>
</html>
Vue生命周期
?以mounted方法為主：
Ajax
同步與異步
原生Ajax制作了解，因為過程繁瑣，現在已經基本不使用
Axios
Axios對原生的Ajax進行封裝，簡化書寫，快速開發。
Axios入門
<body><input type="button" value="獲取數據get"onclick="get()"><input type="button" value="刪除數據post"onclick="post()">
</body>
<script>function get(){//通過axios發送異步請求-getaxios({method:"get",url:"http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result=>{console.log(result.data);})}function post(){//通過axios發送異步請求-postaxios({method:"post",url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",data:"id=1"}).then(result=>{console.log(result.data);})}
</script>
推薦這種axios的調用方式：
Vue和Axios結合在mount（）方法中
前端工程化
使用YApi功能，可以更好的使前后端分離出來：
YApi
?
Vue項目
目錄結構
?
Vue組件庫Element
?Element基本模型
<template><div></div>
</template><script>
export default {}
</script>
<style></style>
快速入門程序
先在新建的ElementView中將想要在瀏覽器展示的東西，在div中寫出來
<template>
<div>
<el-row><el-button>默認按鈕</el-button><el-button type="primary">主要按鈕</el-button><el-button type="success">成功按鈕</el-button><el-button type="info">信息按鈕</el-button><el-button type="warning">警告按鈕</el-button><el-button type="danger">危險按鈕</el-button>
</el-row>
</div>
</template>
<script>
export default {}
</script>
<style></style>再在APP.vue中引入element-view
<template><div>
<element-view></element-view></div>
</template><script>
import ElementView from './views/element/ElementView.vue'
export default {components: { ElementView },
}
</script>
<style></style>
Element常見組件
在Element官網上找到相應組件，復制其代碼，再將代碼復制到vscode中，將代碼改成你想要的樣子。
表格
?在ElementView.vue中中編寫想要在頁面展示的信息。
<template><div><!--按鈕--><el-row><el-button>默認按鈕</el-button><el-button type="primary">主要按鈕</el-button><el-button type="success">成功按鈕</el-button><el-button type="info">信息按鈕</el-button><el-button type="warning">警告按鈕</el-button><el-button type="danger">危險按鈕</el-button></el-row><!--表格--><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></div>
</template>
<script>
export default {data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1516 弄'}]};},
};
</script>
<style>
</style>在App.vue中引入<element-view></element-view>
<template><div>
<element-view></element-view></div>
</template><script>
import ElementView from './views/element/ElementView.vue'
export default {components: { ElementView },
}
</script>
<style></style>
分頁
?
</el-table><!--分頁--><el-pagination background layout="sizes,prev, pager, next,jumper" :total="1000">
</el-pagination>
對話框
<!--對話框-->
<el-button type="text" @click="dialogTableVisible = true">收貨地址Dialog</el-button>
<el-dialog title="收貨地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table>
</el-dialog>對話框中所需要的數據，在script的data數據中填寫：
dialogTableVisible用于是否顯示數據，當點擊這個Dialog，其里面的值就改變為true，顯示數據。
gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],dialogTableVisible: false,?
?點擊收貨地址Dialog：
?表單
<template><div><!--按鈕--><el-row><el-button>默認按鈕</el-button><el-button type="primary">主要按鈕</el-button><el-button type="success">成功按鈕</el-button><el-button type="info">信息按鈕</el-button><el-button type="warning">警告按鈕</el-button><el-button type="danger">危險按鈕</el-button></el-row><!--表格--><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table><!--分頁--><el-paginationbackgroundlayout="sizes,prev, pager, next,jumper":total="1000"></el-pagination><!--對話框-->
<el-button type="text" @click="dialogTableVisible = true">收貨地址Dialog</el-button>
<el-dialog title="收貨地址" :visible.sync="dialogTableVisible"><el-table :data="gridData"><el-table-column property="date" label="日期" width="150"></el-table-column><el-table-column property="name" label="姓名" width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-dialog> <br><!--嵌套from的對話框-->
<el-button type="text" @click="dialogFormVisible = true">嵌套表單的對話框Dialog</el-button>
<el-dialog title="表單Form" :visible.sync="dialogFormVisible"><el-form ref="form" :model="form" label-width="80px"><el-form-item label="活動名稱"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活動區域"><el-select v-model="form.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活動時間"><el-col :span="11"><el-date-picker type="date" placeholder="選擇日期" v-model="form.date1" style="width: 100%;"></el-date-picker></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-time-picker placeholder="選擇時間" v-model="form.date2" style="width: 100%;"></el-time-picker></el-col></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即創建</el-button><el-button>取消</el-button></el-form-item>
</el-form>
</el-dialog> </div>
</template>
<script>
export default {data() {return {form: {name: '',region: '',date1: '',date2: '',delivery: false},gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}],dialogTableVisible: false,dialogFormVisible :false,tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀區金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀區金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀區金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀區金沙江路 1516 弄",},],};},methods: {onSubmit() {alert(JSON.stringify(this.form))}},
};
</script>
<style>
</style>?整個頁面展示：
Element案例
練習
根據頁面原型完成員工管理頁面開發，并通過Axios完成數據異步加載。
最終頁面：
?步驟：
先將基礎框架搭建好：
創建tilas，再在其里面創建EmpView.vue
創建頁面完成對總體的布局
?
<template><div>
<el-container style="height: 700px; border: 1px solid #eee"><el-header style="front-size:80px;background-color: rgb(238, 241, 246)">學習管理系統Header</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系統信息管理</template><el-menu-item index="1-1">部門管理</el-menu-item><el-menu-item index="1-2">員工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><el-table :data="tableData"><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="image" label="圖像" width="180"></el-table-column><el-table-column prop="gender" label="性別" width="140"></el-table-column><el-table-column prop="job" label="職位" width="140"></el-table-column><el-table-column prop="entrydate" label="入職日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作時間" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">編輯</el-button><el-button type="danger" size="mini">刪除</el-button></el-table-column></el-table></el-main></el-container>
</el-container></div>
</template><script>
export default {data () {return {tableData:[]}}
}
</script><style></style>
頁面組件實現
<template><div>
<el-container style="height: 700px; border: 1px solid #eee"><el-header style="front-size:80px;background-color: rgb(238, 241, 246)">學習管理系統Header</el-header><el-container><el-aside width="200px"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系統信息管理</template><el-menu-item index="1-1">部門管理</el-menu-item><el-menu-item index="1-2">員工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!--表單--><el-form :inline="true" :model="SearchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="SearchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性別"><el-select v-model="SearchForm.gender" placeholder="性別"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入職時間"><!--時間選擇器--><el-date-pickerv-model="SearchForm.entrydate"type="daterange"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form><!--表格--><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="image" label="圖像" width="180"></el-table-column><el-table-column prop="gender" label="性別" width="140"></el-table-column><el-table-column prop="job" label="職位" width="140"></el-table-column><el-table-column prop="entrydate" label="入職日期" width="180"></el-table-column><el-table-column prop="updatetime" label="最后操作時間" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">編輯</el-button><el-button type="danger" size="mini">刪除</el-button></el-table-column></el-table><br><!--分頁條--><el-paginationbackgroundlayout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination></el-main></el-container>
</el-container></div>
</template><script>
export default {data () {return {tableData:[],SearchForm:{name:"",gender:"",entrydate:[]}}},methods: {onSubmit:function(){alert("查詢數據")},handleSizeChange:function(val){alert("每頁記錄數變化"+val);}, handleCurrentChange:function(val){alert("每碼數變化"+val);}},
}
</script><style></style>
?列表數據異步加載，并渲染展示
要完成異步加載：使用axios進行異步請求。
將axios寫在mount中
整體演示
<template><div>
<el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px;background-color: rgb(238, 241, 246)">學習管理系統Header</el-header><el-container><el-aside width="230px" style=" border: 1px solid #eee"><el-menu :default-openeds="['1', '3']"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系統信息管理</template><el-menu-item index="1-1">部門管理</el-menu-item><el-menu-item index="1-2">員工管理</el-menu-item></el-submenu></el-menu></el-aside><el-main><!--表單--><el-form :inline="true" :model="SearchForm" class="demo-form-inline"><el-form-item label="姓名"><el-input v-model="SearchForm.name" placeholder="姓名"></el-input></el-form-item><el-form-item label="性別"><el-select v-model="SearchForm.gender" placeholder="性別"><el-option label="男" value="1"></el-option><el-option label="女" value="2"></el-option></el-select></el-form-item><el-form-item label="入職時間"><!--時間選擇器--><el-date-pickerv-model="SearchForm.entrydate"type="daterange"range-separator="至"start-placeholder="開始日期"end-placeholder="結束日期"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查詢</el-button></el-form-item></el-form><!--表格--><el-table :data="tableData" border><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column label="圖像" width="180"><template slot-scope="scope"> <!--插槽--><img :src="scope.row.img" width="50px" height="50px"></template></el-table-column><el-table-column label="性別" width="140"><template slot-scope="scope"> <!--插槽-->{{scope.row.gender==1?'男':'女'}}</template></el-table-column><el-table-column prop="job" label="職位" width="140"></el-table-column><el-table-column prop="entrydate" label="入職日期" width="180"></el-table-column><el-table-column prop="updatedate" label="最后操作時間" width="230"></el-table-column><el-table-column label="操作" ><el-button type="primary" size="mini">編輯</el-button><el-button type="danger" size="mini">刪除</el-button></el-table-column></el-table><br><!--分頁條--><el-paginationbackgroundlayout="total,sizes,prev, pager, next,jumper" @size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"></el-pagination></el-main></el-container>
</el-container></div>
</template><script>
import axios from 'axios';
export default {data () {return {tableData:[],SearchForm:{name:"",gender:"",entrydate:[]}}},methods: {onSubmit:function(){alert("查詢數據")},handleSizeChange:function(val){alert("每頁記錄數變化"+val);}, handleCurrentChange:function(val){alert("每碼數變化"+val);}},mounted() {axios.get("https://yapi.pro/mock/401965/user/getById").then((result) => {this.tableData= result.data.data;});},
}
</script><style></style>
?Vue路徑
能夠實現路徑跳轉
路由信息配置
?在EmpView.vue中要添加route-link to類似于超鏈接
?
啟動報錯)
