vuejs介紹
Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁 定和組合的視圖組件。它不僅易於上手，還便於與第三方庫或既有項目整合。 官網:https://cn.vuejs.org/
MVVM模式
MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為
抽象化，讓我們將視圖 UI 和業務邏輯分開
MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model） Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專注於View 層。
它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負責連接 View 和 Model，保證視圖和數據的一致性，這種輕量級的架構讓前端
開發更加高效、便捷.
vuejs快速入門
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vuejs入門</title>
<script src="js/vuejs_v2.5.17.js"></script>//首先引入標簽
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
new Vue({
el:"#app",//選擇器 ${#app} 表示當前vue對象接管了div區域
data:{ //module
message:"hello world" //注意不要寫分號結尾
},
methods:{//可以自定義方法
}
});
</script>
</body>
</html>
插值表達式
數據綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值，Mustache 標簽將會被替代為對應數據對
象上屬性的值。無論何時，綁定的數據對象上屬性發生了改變，插值處的內容都會更新。
Vue.js 都提供了完全的 JavaScript 表達式支持。
<div id="app"> {{message}} {{5>3?"yes":"no"}} </div> <script> //創建vue對象 new Vue({ el:"#app", // 選擇器 $("#app") data:{ //封裝數據 message:10 } }); </script>
這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個
表達式，所以下面的例子都不會生效。
<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}
vuejs常用系統指令
v-on
可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼
v-on:click
<div id="app"> {{message}} <input type="button" value="點我" v-on:click="fun1('good')" /> </div> <script> //創建vue對象 new Vue({ el:"#app", // 選擇器 $("#app") data:{ //封裝數據 message:"hello" }, methods:{ fun1:function(msg){ this.message=msg; } } }); </script>
v-on:keydown
<div id="app">
<input type="text" v-on:keydown="fun1()"/>
</div>
<script>
//創建vue對象
new Vue({
el:"#app", // 選擇器 $("#app")
methods:{
fun1:function(){
//event:事件源
var code=event.keyCode;//得到當前按鍵的編碼
//alert(code)
if(!(code>=48&&code<=57)){//如果不是0-9的數字,阻止事件關聯
event.preventDefault();//通知瀏覽器不要執行與事件關聯的默認動作
}
}
}
});
</script>
v-on:mouseover
<div id="app">
<div v-on:mouseover="fun1()" style="border:1px solid red">
<textarea v-on:mouseover="fun2()">這是一個文本域</textarea>
</div>
</div>
<script>
//創建vue對象
new Vue({
el:"#app", // 選擇器 $("#app")
methods:{ //定義方法
fun1:function(){
alert("div");
},
fun2:function(){
alert("textarea");
event.stopPropagation();//不再派發事件
}
}
});
</script>
事件修飾符
Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通過由點(.)表示的指令后綴來調用修飾符。
.stop
.prevent
.capture
.self
.once
<div id="app">
<!--
@click == v-on:click
-->
<form @submit.prevent action="http://www.baidu.com">
<input type="submit" value="提交" />
</form>
<div @click="fun1">
<a @click.stop href="http://www.baidu.com">百度</a>
</div>
</div>
<script>
//創建vue對象
new Vue({
el:"#app", // 選擇器 $("#app")
methods:{ //定義方法
fun1:function(){
alert("div事件執行了");
}
}
});
</script>
按鍵修飾符
Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符
全部的按鍵別名：
.enter
.tab
.delete (捕獲 "刪除" 和 "退格" 鍵)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
<div id="app"> <input type="text" v-on:keyup.enter="fun1"> </div> <script> new Vue({ el:'#app', //表示當前vue對象接管了div區域 methods:{ fun1:function(){ alert("你按了回車"); } } }); </script>
v-text與v-html
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
<script>
//創建vue對象
new Vue({
el:"#app", // 選擇器 $("#app")
data:{
message:"<font color='red'>大冪冪</font>"
}
});
</script>
v-bind
<div id="app">
<font v-bind:color="ys1" >大冪冪</font>
<font v-bind:color="ys2" >小冪冪</font>
</div>
<script>
//創建vue對象
new Vue({
el:"#app", // 選擇器 $("#app")
data:{
ys1:"red",
ys2:"lime"
}
});
</script>
<!-- 完整語法 -->
<a v-bind:href="url">...</a>
<!-- 縮寫 -->
<a :href="url">...</a>
v-model
既可以取值又可以給對象賦值
<div id="app"> 用戶名：<input type="text" v-model="username"/><br/> 密碼：<input type="text" v-model="password"/><br/> <input type="button" value="操作" @click="fun1" /> </div> <script> //創建vue對象 new Vue({ el:"#app", // 選擇器 $("#app") data:{ username:"tom", password:"123"
//user:{username:"rose",password:"123"}
}, methods:{ fun1:function(){ alert(this.username+"===="+this.password);
//alert(this.user.username+"==="+this.user.user.password) } } }); </script>
v-for
<div id="app">
<ul>
<li v-for="(v,i) in arr">{{v+" "+i}}</li>
</ul>
<ul>
<li v-for="(val,key) in person">{{val+" "+key}}</li>
</ul>
<table border="1">
<tr>
<td>編號</td>
<td>姓名</td>
<td>年齡</td>
</tr>
<!--
for(User u : users) -->
<tr v-for="u in users">
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.age}}</td>
</tr>
</table>
</div>
<script>
//創建vue對象
new Vue({ el:"#app", // 選擇器 $("#app")
data:{ arr:["aa","bb","mm","sb"], person:{id:1,name:"tom",age:18}, users:[{id:1,name:"tom",age:18},{id:2,name:"jerry",age:19}] } }); </script>
v-if與v-show
div id="app">
<font v-if="flag">大冪冪</font>
<font v-show="flag">小冪冪</font>
<input type="button" @click="fun1" value="切換"/>
</div>
<script>
//創建vue對象
new Vue({
el:"#app", // 選擇器 $("#app")
data:{
flag:false
},
methods:{
fun1:function(){
this.flag = !this.flag;
}
}
});
</script>
VueJS生命周期
每個 Vue 實例在被創建之前都要經過一系列的初始化過程
vue在生命周期中有這些狀態，
beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue
在實例化的過程中，會調用這些生命周期的鈎子，給我們提供了執行自定義邏輯的機會。那么，在這些vue鈎子(回調函數)
中，vue實例到底執行了那些操作，我們先看下面執行的例子
<body>
<div id="app">
{{message}}
</div>
<script>
//創建vue對象
var vm = new Vue({
el:"#app", // 選擇器 $("#app")
data:{
message:"hello"
},
methods:{
},
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 showData(process, obj) {
console.log(process);
console.log('data 數據：' + obj.test)
console.log('掛載的對象：')
console.log(obj.$el)
realDom();
console.log('------------------')
console.log('------------------')
}
function realDom() {
console.log('真實dom結構：' + document.getElementById('app').innerHTML);
}
//vm.message = "hello world";
vm.$destroy(); //銷毀
</script>
vue對象初始化過程中，會執行到beforeCreate,created,beforeMount,mounted 這幾個鈎子的內容
beforeCreate ：數據還沒有監聽，沒有綁定到vue對象實例，同時也沒有掛載對象
created ：數據已經綁定到了對象實例，但是還沒有掛載對象
beforeMount: 模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的
el屬性，el屬性是一個HTMLElement對象，也就是這個階段，vue實例通過原生的createElement等方法來創
建這個html片段，准備注入到我們vue實例指明的el屬性所對應的掛載點
mounted:將el的內容掛載到了el，相當於我們在jquery執行了(el).html(el),生成頁面上真正的dom，上面我們
就會發現dom的元素和我們el的元素是一致的。在此之后，我們能夠用方法來獲取到el元素下的dom對象，並
進 行各種操作
當我們的data發生改變時，會調用beforeUpdate和updated方
beforeUpdate ：數據更新到dom之前，我們可以看到$el對象已經修改，但是我們頁面上dom的數據還
沒有發生改變
updated: dom結構會通過虛擬dom的原則，找到需要更新頁面dom結構的最小路徑，將改變更新到
dom上面，完成更新
beforeDestroy,destroed :實例的銷毀，vue實例還是存在的，只是解綁了事件的監聽還有watcher對象數據
與view的綁定，即數據驅動
VueJS ajax
1) vue-resource
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP進行Web請求和處理響應的服務。 當vue更新
到2.0之后，作者就宣告不再對vue-resource更新，而是推薦的axios，在這里大家了解一下vue-resource就可以。
vue-resource的github: https://github.com/pagekit/vue-resource
2)
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(confifig)axios.get(url[, confifig])
axios.delete(url[, confifig])
axios.head(url[, confifig])
axios.post(url[, data[, confifig]])
axios.put(url[, data[, confifig]])
axios.patch(url[, data[, confifig]])
案例(springboot方式實現)
數據庫設計與表結構
CREATE DATABASE vuejsdemo; USE vuejsdemo; CREATE TABLE USER( id INT PRIMARY KEY AUTO_INCREMENT, username VARCHAR(20), PASSWORD VARCHAR(50), age INT, sex VARCHAR(20), email VARCHAR(50) ); INSERT INTO `user`(`id`,`username`,`PASSWORD`,`age`,`sex`,`email`) VALUES (1,'tom','123',18,'男','tom@163.com'), (2,'jerry','333',19,'女','jerry@163.com');
服務端
創建maven工程引入坐標
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.1.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.6</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.16.10</version>
</dependency>
</dependencies>
加入配置文件
#DB Configuration: spring.datasource.driverClassName=com.mysql.jdbc.Driver spring.datasource.url=jdbc:mysql://127.0.0.1:3306/vuejsdemo spring.datasource.username=root spring.datasource.password=root
加入pojo
@Data//自動生成get/set @Entity//與表建立映射關系 public class User implements Serializable { @Id//對應主鍵 private Integer id; private String username; private String password; private String email; private String sex; private Integer age; }
創建啟動類
@SpringBootApplication public class ApplicationRun { public static void main(String[] args) { SpringApplication.run(ApplicationRun.class,args); } }
controller
@RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; @RequestMapping("/findAll") public List<User> findAll(){ return userService.findAll(); } @RequestMapping(value = "/findById/{id}") public User findById(@PathVariable("id")int id){ return userService.findById(id); } @RequestMapping("/update") public void update(@RequestBody User user){ userService.update(user); } }
service
public interface UserService { public List<User> findAll(); User findById(int id); void update(User user); }
impl
@Service public class UserServiceImpl implements UserService { @Autowired private UserDao userDao; @Override public List<User> findAll() { return userDao.findAll(); } @Override public User findById(int id) { Optional<User> opt = userDao.findById(id); return opt.get(); } @Override public void update(User user) { userDao.save(user); } }
dao
public interface UserDao extends JpaRepository<User,Integer> { }
前台html頁面略
前台js頁面
new Vue({
el:"#abc",
data:{
userList:[],
user:[]
},
methods: {
//查詢所有
findAll: function () {
var _this = this;
//執行ajax查詢數據
var url = "user/findAll";
axios.get(url).then(function (result) {
_this.userList = result.data;
}).catch(function (error) {
});
},
//根據id查詢
findById:function(id){
var _this=this;
//執行ajax查詢數據
var url="user/findById/"+id;
axios.get(url).then(function(result){
_this.user=result.data;
//顯示窗口
$("#myModal").modal("show");
}).catch(function(){
});
},
//修改
update:function(){
var _this=this;
//執行ajax請求
var url="user/update";
axios.post(url,_this.user).then(function(){
//重新查詢
_this.findAll();
//隱藏窗口
$("#myModal").modal("hide");
}).catch(function(error){
})
}
},
//創建vue實例后執行
created: function () {
this.findAll();
}
});