Vue框架基本使用
1. Vue的入门
- 使用Vue框架必须导入Vue.js文件
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
- 入门案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> {{message}} <!-- {{ }}为Vue的插值表达式,把data中定义的数据显是到此处 --> {{true?"Yes":"No"}} {{number*3}} </div> </body> <script> //vue使用步骤 //1. 创建Vue对象 new Vue({ el:"#app", //由Vue接管id为app的区域 data:{ message:"Hello Vue!",//注意：此处不要加分号 number:20 } }); </script> </html>
- Vue插值表达式支持：三元运算符、加减乘除运算，但是不支持：表达式。如a = 20和if语句
- new vue内部都是json格式数据
2. Vuejs常用系统指令
v-on指令:可以使用v-on指令监听DOM事件，并在触发时运行一些js代码。v-on可用@代替
- v-on:click :捕捉点击事件，并执行js代码
<body> <div id="app-2"> {{message}}<br /> <button v-on:click="fun1('This is v-on:click')">点这</button> </div> </body> <script> new Vue({ el:"#app-2", data:{ message:"Hello Vue" }, methods:{ fun1(msg){ this.message = msg; } } }); </script> <!-- 当单击button时，将message值改成This is v-on:click -->
- v-on:keydown :捕捉键盘按下事件
Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ preventDefault():通知浏览器不要执行与事件关联的默认动作。 event对象和我们的document对象以及window对象一样，可以不用定义而直接使用 Vue中的$event ：是Vue中的事件对象，和我们传统的js的event对象是一样的<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <h1>实例1：当键盘按下，弹出被按下键的keycode码</h1> <h1>实例2：限制只能输入数字，其他键不起作用</h1> <div id="app-3"> 传统方式_实例1：<input type="text" onkeydown="fun1()" /> <br /> 传统方式_实例2：<input type="text" onkeydown="fun1_prevent()" /> <hr /> Vue方式_实例1：<input type="text" v-on:keydown="fun2($event)" /> <br /> Vue方式_实例2：<input type="text" v-on:keydown="fun2_privent($event)" /> </div> </body> <script> //传统实例1 //event对象和我们的document对象以及window对象一样，可以不用定义而直接使用 function fun1(){ var keyCode = event.keyCode; alert(keyCode); } //传统实例2 function fun1_prevent(){ var keyCode = event.keyCode; if(keyCode<48 || keyCode>57){ event.preventDefault(); } } //Vue实例1 new Vue({ el:"#app-3", methods:{ /* $event 是Vue中的事件对象，和我们传统的js的event对象是一样的 */ fun2:function(event){ var keyCode = event.keyCode; alert(keyCode); }, //Vue实例2 fun2_privent:function(event){ var keyCode = event.keyCode; if(keyCode<48 || keyCode>57){ event.preventDefault(); } } } }); </script> </html>
- v-on:mouseover :捕捉鼠标悬停事件
event.stopPropagation();:指定当前事件发生后，不再发生后续的事件<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> <style type="text/css"> #app-4{ width: 300px; height: 300px; background-color: aqua; } </style> </head> <body> <div id="app-4" @mouseover="fun()"> <textarea @mouseover="fun1($event)">这是文件区域</textarea> </div> </body> <script> new Vue({ el:"#app-4", methods:{ fun:function(){ alert("鼠标悬停在div上"); }, fun1:function(event){ alert("鼠标悬停在textarea上"); //event.stopPropagation();:指定当前事件发生后，不再发生后续的事件 event.stopPropagation(); } } }); </script> </html>Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。 .stop == event.stopPropagation()停止本事件之后的事件发生 .prevent == event.preventDefault()：阻止本事件的发生 .capture .self .once<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> <style type="text/css"> #app-4{ width: 300px; height: 300px; background-color: aqua; } </style> </head> <body> <div id="app-5"> <!-- v-on:submit.prevent阻止提交 --> <form action="Vue-02.html" v-on:submit.prevent> <input type="submit" value="提交" /> </form> </div> <!-- @mouseover.stop="fun1($event)：等于在fun1中定义event.stopPropagation() --> <div id="app-4" @mouseover="fun()"> <textarea @mouseover.stop="fun1($event)">这是文件区域</textarea> </div> </body> <script> new Vue({ el:"#app-5" }); new Vue({ el:"#app-4", methods:{ fun:function(){ alert("鼠标悬停在div上"); }, fun1:function(event){ alert("鼠标悬停在textarea上"); } } }); </script> </html>按键修饰符：就是将独立一个按键提取出来，当键盘按下此键时，触发指定代码。代替了原始的使用keyCode方式判断是否是该键按下。 常用的按键修饰符有： .enter 键 .tab 键 .delete (捕获 "删除" 和 "退格" 键) .esc 键 .space 键 .up 键 .down 键 .left 键 .right 键 .ctrl 键 .alt 键 .shift 键 .meta 键 以上都对应键盘上的指定键<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app-6"> Vue原始:<input type="text" v-on:keydown="fun($event)" /><br /> Vue按键修饰符:<input type="text" v-on:keydown.enter="fun_enter()" /> </div> </body> <script> new Vue({ el:"#app-6", methods:{ fun:function(event){ var keyCode = event.keyCode; // alert(keyCode); if(keyCode == 13){ alert("按下了回车键"); } }, fun_enter:function(){ alert("按下了回车键——按键修饰符") } } }); </script> </html>
- v-text与v-html
innerText和innerHTML的区别： innerText不会解析html代码，引号内是什么就会输出什么。 == Vue中的v-text 而innerHtml会解析html代码. == Vue中的v-html
- 原始js方式辨别innerText和innerHTML的区别：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app-7"> <div id="text"></div> <div id="html"></div> </div> </body> <script> window.onload = function(){ //innerText和innerHTML的区别： // innerText不会解析html代码，引号内是什么就会输出什么。 // 而innerHtml会解析html代码. document.getElementById("text").innerText = "<h1>Hello Vue</h1>"; document.getElementById("html").innerHTML = "<h1>Hello Vue</h1>"; } </script> </html>
- Vue中的v-text与v-html方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app-7"> <div v-text="message"></div> <br /> <div v-html="message"></div> </div> </body> <script> new Vue({ el:"#app-7", data:{ message:"<h1>Hello Vue</h1>" } }); </script> </html>
- v-bind ：给html标签的属性设置变量的值。
注意：{{}}插值运算符不可用于html标签的属性取值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app-8"> <font size="5" v-bind:color="ys1">Hello Vue</font> <font size="5" :color="ys2">你好，Vue</font> </div> </body> <script> new Vue({ el:"#app-8", data:{ ys1:"red", ys2:"green" } }); </script> </html>
- v-bind简写方式
<!-- 完整语法 --> <a v-bind:href="url">...</a> <!-- 缩写 --> <a :href="url">...</a>
- v-for : 遍历数组/json格式数据
- 遍历数组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app-9"> <ul> <li v-for="(item,index) in arr">{{item}}={{index}}</li> </ul> </div> </body> <script> new Vue({ el:"#app-9", data:{ arr:[1,2,3,4,5] } }); </script> </html>注意：
遍历格式：<li v-for="(item,index) in arr">{{item}}={{index}}</li> 其中index索引从0开始<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app-9"> <ul> <li v-for="(key,value) in product">{{key}}===={{value}}</li> </ul> </div> </body> <script> new Vue({ el:"#app-9", data:{ product:{ id:1, name:"张三", age:20 } } }); </script> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app-9"> <table border="1"> <tr v-for="(product,index) in products"> <td>{{product.id}}</td> <td>{{product.name}}</td> <td>{{product.age}}</td> </tr> </table> </div> </body> <script> new Vue({ el:"#app-9", data:{ products:[ {id:1,name:"小白",age:21}, {id:2,name:"小红",age:20}, {id:3,name:"小凤",age:20}, {id:4,name:"小腾",age:20}, ] } }); </script> </html>
- v-model : 类似input中的value属性。可取出json格式数据的值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app-10"> <form action="" method="post"> <input type="text" name="username" v-model ="user.username" /> <input type="text" name="password" v-model="user.password" /> </form> </div> </body> <script> new Vue({ el:"#app-10", data:{ user:{ username:"晓丽", password:123 } } }); </script> </html>v-if是根据表达式的值来决定是否渲染元素 :等同于：if(true) 就显是所在的标签内容
v-show是根据表达式的值来切换元素的display css属性 (true:显是该标签 false:不显示该标签)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-if与v-show</title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <span v-if="flag">传智播客</span> <span v-show="flag">itcast</span> <button @click="toggle">切换</button> </div> <script> new Vue({ el: '#app', //表示当前vue对象接管了div区域 data:{ flag:false , }, methods:{ toggle:function(){ this.flag = !this.flag; } } }); </script> </body> </html>
3. VueJs的生命周期
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vuejs生命周期</title> <script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> {{message}} </div> </body> <script> var vm = new Vue({ el: "#app", data: { message: 'hello world' }, beforeCreate: function() { console.log(this); showData('创建vue实例前', this); }, created: function() { showData('创建vue实例后', this); }, beforeMount: function() { showData('挂载到dom前', this); }, mounted: function() { showData('挂载到dom后', this); }, beforeUpdate: function() { showData('数据变化更新前', this); }, updated: function() { showData('数据变化更新后', this); }, beforeDestroy: function() { vm.test = "3333"; showData('vue实例销毁前', this); }, destroyed: function() { showData('vue实例销毁后', this); } }); function realDom() { console.log('真实dom结构：' + document.getElementById('app').innerHTML); } function showData(process, obj) { console.log(process); console.log('data 数据：' + obj.message) console.log('挂载的对象：') console.log(obj.$el) realDom(); console.log('------------------') console.log('------------------') } // vm.message = "good..."; vm.$destroy(); </script> </html>注意：对应控制台(此时没用数据的更新，所以不会有beforeUpdate和updated生命周期，当放开vm.message = “good…”;注释vm.$destroy(); 后会看到数据更新)
创建vue实例前 data 数据：undefined 挂载的对象： undefined 真实dom结构： {{message}} 创建vue实例后 data 数据：hello world 挂载的对象： undefined 真实dom结构： {{message}} 挂载到dom前 data 数据：hello world 挂载的对象： <div id="app"> {{message}} </div> 真实dom结构： {{message}} 挂载到dom后 data 数据：hello world 挂载的对象： <div id="app"> hello world </div> 真实dom结构： hello world vue实例销毁前 data 数据：good... 挂载的对象： <div id="app"> hello world </div> 真实dom结构： hello world vue实例销毁后 data 数据：good... 挂载的对象： <div id="app"> hello world </div> 真实dom结构： hello world
4. VueJS ajax
- axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
axios的github:https://github.com/axios/axios
- 引入axios
首先就是引入axios,如果你使用es6，只需要安装axios模块之后
import axios from 'axios'; //安装方法 npm install axios //或 bower install axios当然也可以用script引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
- Get请求
//通过给定的ID来发送请求 axios.get('/user?ID=12345') .then(function(response){ console.log(response); }) .catch(function(err){ console.log(err); }); //以上请求也可以通过这种方式来发送 axios.get('/user',{ params:{ ID:12345 } }) .then(function(response){ console.log(response); }) .catch(function(err){ console.log(err); });
- Post请求
axios.post('/user',{ firstName:'Fred', lastName:'Flintstone' }) .then(function(res){ console.log(res); }) .catch(function(err){ console.log(err); });
- 为方便起见，为所有支持的请求方法提供了别名
axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])
5. 综合案例
- 创建数据表
DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `age` int(11) DEFAULT NULL, `username` varchar(20) DEFAULT NULL, `PASSWORD` varchar(50) DEFAULT NULL, `email` varchar(50) DEFAULT NULL, `sex` varchar(20) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8; INSERT INTO `user` VALUES ('1', '33', '张老师', '123', 'zzz@itcast.cn', '男 '); INSERT INTO `user` VALUES ('2', '31', '刘老师', '123', 'lll@itcast.cn', '女'); INSERT INTO `user` VALUES ('3', '17', '赵工', '213', 'zg@itcast.cn', '女'); INSERT INTO `user` VALUES ('4', '40', '高管', '213', 'gg@itcast.cn', 'female'); INSERT INTO `user` VALUES ('5', '28', '李总', '312', 'lz@jxjt.com', 'male'); INSERT INTO `user` VALUES ('6', '34', '王董', '312', 'wd@jxjt.com', 'male'); INSERT INTO `user` VALUES ('7', '55', '孙老板', '4321', 'slb@xzjt.com', '男'); INSERT INTO `user` VALUES ('8', '19', '陈秘书', '4321', 'cms@xzjt.com', '女');
- SSM整合配置，添加findAll、findById、updateUser方法—略
- Controller代码
package com.itlearn.Controller; import com.itlearn.domain.User; import com.itlearn.service.IUserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.stereotype.Repository; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.List; @Controller @RequestMapping("/user") @ResponseBody public class UserController { @Autowired private IUserService service; @RequestMapping("/findAll") public List<User> findAll(){ List<User> users = service.findAll(); return users; } @RequestMapping("/findById") public User findById(Integer id){ User byId = service.findById(id); return byId; } @RequestMapping("/update") public void updateUser(@RequestBody User user){ System.out.println(user); service.updateUser(user); } }
- 前台html主要代码
<tr v-for="u in userList"> <td><input name="ids" type="checkbox"></td> <td>{{u.id}}</td> <td>{{u.username}} </td> <td>{{u.password}}</td> <td>{{u.sex}}</td> <td>{{u.age}}</td> <td class="text-center">{{u.email}}</td> <td class="text-center"> <button type="button" class="btn bg-olive btn-xs">详情</button> <button type="button" class="btn bg-olive btn-xs" @click="findById(u.id)">编辑</button> </td> </tr> </tbody> <!--模态窗口--> <div class="tab-pane" id="tab-model"> <div id="myModal" class="modal modal-primary" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span></button> <h4 class="modal-title">用户信息</h4> </div> <div class="modal-body"> <div class="box-body"> <div class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">用户名:</label> <div class="col-sm-5"> <input type="text" class="form-control" v-model="user.username"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">密码:</label> <div class="col-sm-5"> <input type="text" class="form-control" v-model="user.password"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性别:</label> <div class="col-sm-5"> <input type="text" class="form-control" v-model="user.sex"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">年龄:</label> <div class="col-sm-5"> <input type="text" class="form-control" v-model="user.age"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">邮箱:</label> <div class="col-sm-5"> <input type="text" class="form-control" v-model="user.email"> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-outline" data-dismiss="modal" @click="update">修改</button> </div> </div>
- user.js代码
var vue = new Vue({ el: "#app", data: { user: {id:"",username:"",password:"",age:"",sex:"",email:""}, userList: [] }, methods: { findAll: function () { var _this = this; axios.get("/user/findAll.do").then(function (response) { _this.userList = response.data; console.log(_this.userList); }).catch(function (err) { console.log(err); }); }, findById: function (userid) { var _this = this; axios.get("/user/findById.do", { params: { id: userid } }).then(function (response) { _this.user = response.data; $('#myModal').modal("show"); }).catch(function (err) { }); }, update: function (user) { var _this = this; axios.post("/user/update.do",_this.user) .then(function (response) { _this.findAll(); }) .catch(function (err) { }); } }, created(){//当页面 加载时触发请求，查询所有 this.findAll(); } });
console.log(_this.userList);
}).catch(function (err) { console.log(err); }); }, findById: function (userid) { var _this = this; axios.get("/user/findById.do", { params: { id: userid } }).then(function (response) { _this.user = response.data; $('#myModal').modal("show"); }).catch(function (err) { }); }, update: function (user) { var _this = this; axios.post("/user/update.do",_this.user) .then(function (response) { _this.findAll(); }) .catch(function (err) { }); } }, created(){//当页面 加载时触发请求，查询所有 this.findAll(); }});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
