<!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 src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <!-- v-bind: 是vue中一個綁定屬性的指令，可以簡寫為： v-bind:只能實現數據的單項綁定，只能從M綁定到V中，無法實現數據的雙向綁定 v-on 可以簡寫為 @ 用於綁定事件 v-on : 事件 = “函數名” 簡寫 @事件=“函數名” v-model:唯一一個實現雙向數據綁定的命令 v-model只能運用在表單元素中，所謂表單元素是指： select、input(text、email、adress、radio,checkbox）、textarea --> <!--mvvm中的v指的是這個html片段--> <div id="app01"> <!-- v-text沒有閃爍問題，但是v-text也會覆蓋標簽內部原本的內容。--> <!-- 插值表達式只會替換自己的占位符，不會把整個標簽內部的內容都清空--> <h1>===={{msg}}=====</h1> <br> <!-- 差值表達式 ，把data中定義的數據顯示到此處--> <div v-text="msg">====</div><br> <h3 v-html="result">==========</h3> <br> <!--可以解析html格式的內容。--> <input type="text" name="age" v-bind:value=" age+6"><br> <!--v-bind: 是vue中一個綁定屬性的指令，可以簡寫為：--> {{name}} <input type="text" name="name" v-model:value="name"> <br> <!--v-model:唯一一個實現雙向數據綁定的命令--> <button v-on:click="fun1">Vue的onClick事件</button> <br> <button v-on:click="fun2('Vue 的參數 Vue')">Vue的onClick2事件</button> <br> <button v-on:mouseover="fun3('皮卡丘')">點我啊</button> <br> <button v-on:blur="fun4('皮卡丘失去焦點')">失去焦點</button> <br> <button v-on:keydown="fun5('卡哇伊呀咿呀')">可愛</button> <br> <!--=====================================================--> <!--v-if和v-show是一樣的，這是在隱藏的時候，v-show是通過給標簽加display:none的樣式完成的，而v-if是直接將元素去掉完成的--> <p v-if="seen">當seen的屬性為true 看見 ，false就看不見</p> <p v-show="seen">v-show控制的語句</p> <p v-for="key in list">{{key}}</p> <p v-for="(key,index) in list">值為--->{{key}}---索引值為：--->{{index}}</p> <p v-for="(key,index) in list1">值為--->{{key}}---索引值為：--->{{index}}</p> <p v-for="(key,index) in lists">值為--->{{key}}---索引值為：--->{{index}}</p> <p v-for="(val,key,index) in user">值為--->{{val}}---鍵為：--->{{key}}--->索引值為：--->{{index}}</p> <p v-for="count in 10"> this id the {{count}} times</p> <!--遍歷數字的時候，默認從1開始--> </div> <script> // mvvm中的vm： 就是指的這一部分 var vm =new Vue({ el:"#app01", //由Vue接管id為app的區域 // mvvm中的M：指的就是data對象 data:{ msg:"歡迎使用第一個vue!" , //注意：此處不要加分號 msg1:"", result:"<h1 style='color: red'>這是個html標簽的內容</h1>", age:12 , name:"呆呆", seen:false, list:[1,2,3,4,5,6], list1:[ {id:1,name:"呆呆",age:10}, {id:2,name:"敏敏",age:11}, {id:3,name:"小呆呆",age:12}, {id:4,name:"可愛敏",age:13}, {id:5,name:"機智呆",age:14} ], lists:[], user:{ id:1, name:"呆呆", age:18 } }, mounted:function(){ var _this = this axios.get('emp/list').then( function (result) { _this.lists=result.data; } ).catch( function (error) { }); }, methods:{ fun1:function () { alert("大家好，這是我的第一個vue方法！！") }, fun2:function (msg1) { alert("大家好，這是帶參的vue"); this.msg=msg1; alert(msg1); alert(this.age); //在方法中可以直接引用data中的數據 // 在vm實例中，要想獲取data中的數據或者methods中的方法，必須通過this.屬性名或者this.方法名的方式調用， // 這里的this就表示我們new 出來的VM實例對象 }, fun3:function (msg2) { alert(msg2); }, fun4:function (msg3) { alert(msg3); }, fun5:function (msg4) { alert(msg4); }, } }); </script> </body> </html>
vue 2.進階
<!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 src="https://unpkg.com/element-ui/lib/index.js"></script> </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> <el-form-item label="員工年齡" :label-width="formLabelWidth"> <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" 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="pageSize" align="center" :pageSize="pageSize" :current-page="pageNum" @current-change="changeNum" :total="total"> </el-pagination> </div> </div> </div> <script> // mvvm中的vm： 就是指的這一部分 var vm =new Vue({ el:"#app01", //由Vue接管id為app的區域 data:{ list:[], total:5, pageSize:3, pageNum:1, flag:true, pageSize:2, dialogFormVisible:false, form:{ eid:'', ename:'', eage:'' }, formLabelWidth: '120px' }, methods:{ editItem:function(item){ this.dialogFormVisible=true; this.form.eid=item.eid; this.form.ename=item.ename; this.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>