?2016-2026 Matools All rights reserved,
粵ICP備17059708號(hào)
因?yàn)轫?xiàng)目需要前后端分離,后端竟然不用控制view層了,頁(yè)面的跳轉(zhuǎn)后端不再干涉,(前端的vue經(jīng)過打包后成了一張index.html)
后端只需要響應(yīng)給前端json串就ok,其實(shí)這不是爽歪歪?但是覺得還是奇奇怪怪,感覺前端是個(gè)黑盒了, 于是忍不住去學(xué)習(xí)了vue
感覺前端的框架帶來的這種前后端分離變化還是特別明顯的,后端確實(shí)不用再操心view層了,頁(yè)面的轉(zhuǎn)換有vue通過后端的切換不同的組件,后端基本上沒有什么變化,但是相應(yīng)數(shù)據(jù)基本上是清一色的json格式的數(shù)據(jù)了,
此外, 目前碰到的后端的安全框架
SpringSecurity的使用有了些許變化,起碼認(rèn)證成功還是失敗,不能往指定的頁(yè)面跳轉(zhuǎn)了,轉(zhuǎn)而使用消息+狀態(tài)碼提示,因?yàn)榫鸵粡坕ndex.html,還能往哪里跳轉(zhuǎn)?
下面是近幾天的學(xué)習(xí)筆記, 還是再整理一遍,畢竟會(huì)忘
認(rèn)識(shí)MVVM框架Vue
MV VM分別對(duì)應(yīng)著
* model : 數(shù)據(jù)模型,存放后端傳遞過來的數(shù)據(jù)
* view : 視圖,其實(shí)就是html, 頁(yè)面
* viewModel : vue 的實(shí)例
下面是一個(gè)入門的例子: 通過這個(gè)例子可以看到:
* 我們new 出來vue的實(shí)例,然后把它關(guān)聯(lián)在了html中id為 app的代碼塊,這樣目的是如果我們?cè)谶@個(gè)代碼塊中使用vue的模板語法,vue可以解析
*
data: 這個(gè)模塊盛放的 mvvm中的第一個(gè)m
其實(shí)這也可以看出,vue的開發(fā)模式,它的出現(xiàn)屏蔽掉了dom操作,我們?cè)僖膊挥胐ocument.getElementById(),
然后innnerHtml了, 現(xiàn)在的工作就是把后端給的值填充進(jìn)data塊中的屬性字段就ok,一旦發(fā)生改變,頁(yè)面會(huì)自動(dòng)渲染上最新的值
<body> <div id="app"> <input type="text" v-model="username"><!-- 聲明式開發(fā) dom監(jiān)聽
--> <p>Haha {{username}}</p> <!-- 數(shù)據(jù)綁定 --> </div> </body> <script
type="text/javascript" src="js/vue.js"></script> <script
type="text/javascript"> var vm = new Vue({ el:'#app', // 元素選擇器, 選出根路徑 data:{ //
Data Model 數(shù)據(jù)模型 username:'哈哈' } }); </script>
模板語法:
雙大括號(hào) 取值:
<p>{{msg}}</p> <p>{{msg.toUpperCase()}}</p> <!-- 可以調(diào)用js函數(shù) -->
嵌入文本或html
<p v-text="msg"></p> <!-- 相當(dāng)于 textContent --> <p v-html="msg"></p> <!-- 相當(dāng)于
innerHtml -->
強(qiáng)制數(shù)據(jù)綁定,在原標(biāo)簽前添加 :
<img :src="imaUrl" alt="">
綁定監(jiān)聽事件: @符
* 比較有趣的地方,如果在methods塊中,js函數(shù)的定義是無參數(shù)據(jù)的,
在html代碼塊中可以直接寫函數(shù)名,而不寫小括號(hào),因?yàn)閖ava代碼寫多了,看了想笑 ,(當(dāng)然(),也可以寫上,但是js編程者會(huì)認(rèn)為這是沒事找事)
<button @click="text"> 點(diǎn)我111 </button> <button @click="text222('haha')"> 點(diǎn)我222
</button>
計(jì)算屬性
計(jì)算屬性,說白了就是vue給我們的一塊糖,讓我們定制數(shù)據(jù)的變化規(guī)則,然后vue幫我們渲染在html頁(yè)面上
* 計(jì)算屬性是針對(duì)data中的字段的操作
* 計(jì)算屬性中的每一個(gè)函數(shù),都分兩部分: get和set , 默認(rèn)是get,作用是把這個(gè)方法的返回值渲染進(jìn)頁(yè)面, set方法,就是重新設(shè)置值,
然后get會(huì)重新渲染html
* 計(jì)算屬性是存在緩存的,key就是函數(shù)的名字,value就是計(jì)算得到的值
例子:
<body> <div id="app"> 姓名: <input type="text" placeholder="FirstName"
v-model="secondName"> <br> 姓名1: <input type="text" placeholder="FullName1"
v-model="FullName1"> <br> 姓名3: <input type="text" placeholder="FullName3"
v-model="FullName3"> <br> </div> <script type="text/javascript"
src="js/vue.js"></script> <script type="text/javascript"> // 下面的全部回調(diào)函數(shù)中，
this都是vm對(duì)象 var vm = new Vue({ el: '#app', data: { firstName: 'A', secondName:
'B', }, computed: { FullName1() { return this.firstName + ' ' +
this.secondName; }, // todo 通過計(jì)算屬性實(shí)現(xiàn)雙向的數(shù)據(jù)綁定, 不受其他影響 FullName3: { get() { //
計(jì)算并返回當(dāng)前屬性的值 return this.firstName + ' ' + this.secondName; }, set(vel) { // get
執(zhí)行之后 把結(jié)果返回給 set const names = vel.split(' '); alert(names[0]); alert(names[1]);
this.firstName = names[0]; this.secondName = names[1]; } } } });
計(jì)算屬性寫在computed塊中, 可以看到它常用的兩種寫法, 在使用是時(shí)候都是直接使用函數(shù)名就行,因?yàn)樗]有參數(shù)
* 函數(shù)名(){}
* 對(duì)象名:{ get(){} , set(){} }
上面的FullName1以函數(shù)的,這種書寫格式是對(duì) get方法的默認(rèn)實(shí)現(xiàn),方法的返回值會(huì)被渲染到頁(yè)面上
FullName3還重寫了set(val){} 方法, 如果我們?cè)贔ullName3對(duì)應(yīng)的輸入框里面輸入新的值,
val就是這個(gè)新的值,在set方法中,如果對(duì)當(dāng)前vue實(shí)例的data中的屬性做了改動(dòng),這個(gè)改動(dòng)是雙向的,頁(yè)面中所有使用對(duì)應(yīng)字段的地方的值,都會(huì)重新渲染
事件的監(jiān)聽:
它的語法:
// 下面的全部回調(diào)函數(shù)中， this都是vm對(duì)象 var vm = new Vue({ el: '#app', data: { firstName:'',
secondName:'' }, computed: {}, method: {}, watch: {/* 監(jiān)視 */ firstName: function
(newVal) { this.firstName = newVal + ' ' + this.secondName; } } });
它會(huì)監(jiān)聽data中的屬性,當(dāng)用戶改變了data中屬性的值,就會(huì)觸發(fā)對(duì)應(yīng)的回調(diào)
class和style的綁定
class和style的屬性綁定同樣使用的是使用 : 強(qiáng)制屬性綁定
首先是寫好 css屬性,才能進(jìn)一步使用vue將屬性樣式綁定在html上
head> <meta charset="UTF-8"> <title>Title</title> <style> .aClass{ font-size:
30px; color: #ff4400; } .bClass{ color: #00b4ff; } .cClass{ color: #1c036c; }
</style> </head>
語法:
* :class="data中的css屬性"
* :class="{data中的css屬性:boolean, data中的css屬性:boolean}"，
這種對(duì)象語法，就是當(dāng)類名確定但是是否顯示不確定時(shí)使用，比如讓一個(gè)導(dǎo)航欄中的一個(gè)高亮顯示
* :style="{color:activeColor,fontSize:fontSize +'px'}", style有單位的+單位 <body>
<div id="text"> <h2>1. class綁定 :: class='X X X '</h2> <p
:class="a">123123字符串</p> <p :class="{aClass:isa, bClass:isb}">class是對(duì)象,綁定class
類名:boolean </p> <h2>2. style 綁定 </h2> <p
:style="{color:activeColor,fontSize:fontSize +'px'}">2. style 綁定 </p> <button
@click="update" >點(diǎn)擊</button> </div>
下面的vue對(duì)象
<script type="text/javascript" src="js/vue.js"></script> <script
type="text/javascript"> var vm = new Vue({ el: '#text', data: { a:'aClass', //
關(guān)聯(lián)著最上面的css樣式 isa:true, isb:false, activeColor:'red', fontSize:'30' }, methods:{
update() { this.a='bClass' } } })
條件渲染
<p v-if="ok">deal</p> --> ok是vue中data的數(shù)據(jù),ok為true時(shí), 顯示 <p v-else>false</p> -->
和 v-if成對(duì)出現(xiàn), ok為false, 顯示 <p v-show="ok"> 成功 </p> <p v-show="!ok"> 失敗 </p>
列表的渲染 v-for, 及對(duì)數(shù)組的操作
下面的例子使用v-for遍歷數(shù)組中的每一個(gè)數(shù)據(jù), 遍歷的同時(shí)使用{{對(duì)象.屬性}}展示屬性,同時(shí)可以根據(jù)每個(gè)li的index綁定上不同的事件
<body> <div id="text"> <ul> <!-- 一旦有 v-for 加上key--> <li v-for="(p,index) in
person" :key="index"> {{p.name}} : {{p.age}} : {{index}} <button
@click="deleteP(index)"> 刪除</button> <button
@click="updateP(index,{name:'Cat',age:20})"> 更新</button> </li> </ul> </div> var
vm = new Vue({ el: '#text', data: { person: [ /* vue 只會(huì)監(jiān)視person的改變,
不會(huì)監(jiān)視數(shù)組中數(shù)據(jù)的改變*/ {name: 'tom', age: 23}, {name: 'tom2', age: 223}, {name: 'tom2',
age: 23}, {name: 'tom3', age: 232}, {name: 'tom5', age: 23} ] }, methods: {
deleteP(index) { this.person.splice(index, 1); //從index開始 刪除1個(gè) },
updateP(index, person) { // this.person[index]=person; 并沒有改變 persons ，
從index開始，刪除1個(gè) 添加person this.person.splice(index, 1, person) }
如果我們更新的js是這樣寫的, 數(shù)組中的內(nèi)容確實(shí)會(huì)被改變,但是頁(yè)面的上數(shù)據(jù)并不會(huì)更新
this.person[index]=person; 并沒有改變 persons ， 從index開始，刪除1個(gè) 添加person
因?yàn)関ue監(jiān)聽的person的改變,person中只有一個(gè)數(shù)組,雖然數(shù)組中的數(shù)據(jù)變了, 但是數(shù)組沒變,所以我們使用vue的提供的splice進(jìn)行數(shù)組的操作
splice(下標(biāo),數(shù)量,[新的對(duì)象數(shù)組])
他可以實(shí)現(xiàn)數(shù)組的增刪改的效果
* 刪除 //刪除起始下標(biāo)為1，長(zhǎng)度為2的一個(gè)值(len設(shè)置2) var arr2 = ['a','b','c','d']
arr2.splice(1,2); console.log(arr2); //['a','d']
* 修改 //替換起始下標(biāo)為1，長(zhǎng)度為1的一個(gè)值為‘ttt’，len設(shè)置的1 var arr = ['a','b','c','d'];
arr.splice(1,1,'ttt'); console.log(arr); //['a','ttt','c','d']
* 添加 var arr = ['a','b','c','d']; arr.splice(1,0,'ttt'); console.log(arr);
//['a','ttt','b','c','d']
其他數(shù)組相關(guān)的操作
* unshift()添加到第一個(gè)
* shift() 添加到最后一個(gè)
* push() 壓棧,棧頂
* pop()彈出
* sort()排序
* reverse() 反轉(zhuǎn)
數(shù)組的映射,過濾,排序
js的箭頭函數(shù)和java8的lambda表達(dá)式特別像
* 映射 array.map(item=>item.id) // 可以將數(shù)組中的每一個(gè)元素映射成他的id屬性
* 過濾 persons = person.filter(p => p.name.indexOf(searchModel)>=0); //
保留數(shù)組中滿足條件的對(duì)象
* ES6的語法糖
把對(duì)象的指定字段存放進(jìn)聲明的多個(gè)常量中 const{searchModel,person,orderType} = this;
* 排序 persons.sort(function (p1,p2) { // 升序 if (orderType===1){ return
p1.age-p2.age; } else if (orderType===2){ // 降序 return p2.age-p1.age; }
事件綁定相關(guān)
@click綁定事件
<button @click="text1">text1</button> <button
@click="text2('haha')">text2</button> <button
@click="text3($event)">text3</button> <button @click="text4">text4</button><!--
如果沒有指定參數(shù)進(jìn)去,傳遞進(jìn)去的就是event--> <button @click="text5(123,$event)">text5</button>
var vm = new Vue({ el:'#test', methods:{ text1(){ alert("text 1"); },
text2(msg){ alert(msg); }, text3(event){ alert(event.target.innerHTML); },
text4(event){ alert(event.target.innerHTML); }, text5(msg,event){
alert(msg+event.target.innerHTML); },
可以看到@click使用vue中method的函數(shù)時(shí),如果沒有參數(shù),可以簡(jiǎn)寫,去掉(), 如果不寫參數(shù),傳遞進(jìn)去的是事件本身event ,
text三中通過event拿到了標(biāo)簽的文本內(nèi)容
@click.prevent阻止事件的默認(rèn)行為
<a href="http:www.baidu.com" @click.prevent="text8">百度一下</a> <!-- 阻止事件的默認(rèn)行為 -->
監(jiān)聽某個(gè)按鍵的點(diǎn)擊事件
<input type="text" @keyup.enter="text9"> <!-- @keyup.13(名字) 監(jiān)聽某一個(gè)鍵的點(diǎn)擊事件 -->
收集表單數(shù)據(jù)
使用vue將用戶填入表單中的數(shù)據(jù)收集起來, 收集到哪里去? 其實(shí)是收集到 vue的data塊中的屬性中
其實(shí)就是在html使用v-model暴力綁定dom監(jiān)聽, 將單選框,輸入框,多選框中用戶輸入進(jìn)去的內(nèi)容和data中的屬性關(guān)聯(lián)起來
* input,textarea 等輸入框,收集起來的值就是用戶輸入進(jìn)去的值
* 單選框 radio ,多選框 checkbox 等選擇框,收集起來的值的 html中的value屬性的值 <h1>表單中最終提交給后臺(tái)的是
value值</h1><br> <h2> 使用v-model實(shí)現(xiàn)表單數(shù)據(jù)的自動(dòng)收集 </h2> <form action="/XXX"
@submit.prevent="handleSubmit" ><!-- 阻止表單的默認(rèn)自動(dòng)提交事件 --> <span>用戶名:</span> <input
type="text" v-model="username"><br> <span>密碼</span> <input type="password"
v-model="pwd" ><br> <span>性別</span><br> <input type="radio" id="female"
value="女" v-model="sex"> <label for="female">女</label><br> <input type="radio"
id="male" value="男" v-model="sex"> <label for="male">男</label><br><br>
<span>愛好</span><br> <input type="checkbox" id="basket" value="basket"
v-model="likes"> <label for="basket">籃球</label> <input type="checkbox"
id="foot" value="foot" v-model="likes"> <label for="foot">足球</label> <input
type="checkbox" id="pingpang" value="pingpang" v-model="likes"> <label
for="pingpang">乒乓球</label><br><br> <span>城市</span><br> <select
v-model="cityId"> <option value="">未選擇</option> <option :value="city.id"
v-for="(city,index) in allCitys" :key="index">{{city.name}}</option> </select>
<span>介紹:</span> <textarea name="" id="" cols="30" rows="10"
v-model="dec"></textarea> <input type="submit" value="注冊(cè)"><br> </form> </div>
<script type="text/javascript" src="js/vue.js"></script> <script
type="text/javascript"> var vm = new Vue({ el:'#test', data:{ username:'',
pwd:'', sex:'女', likes:['foot'],
allCitys:[{id:1,name:'北京'},{id:2,name:"山東"},{id:3 ,name:"青島"}], cityId:'3' /*
默認(rèn)讓 3被選中*/, dec:"哈哈" }, methods:{ handleSubmit(){
alert(this.username+this.pwd); alert(this.sex); } } })
vue的生命周期
vue對(duì)象在創(chuàng)建初始化的過程中一次執(zhí)行如下聲明周期相關(guān)的方法,
根據(jù)這個(gè)特性,通常把加載進(jìn)入一個(gè)新的頁(yè)面中時(shí)去發(fā)送ajax請(qǐng)求的方法放到mounted(){},收尾工作放在beforeDestroy(){}
var vm = new Vue({ el: "#text", data: {}, beforeCreate() { // 創(chuàng)建之前回調(diào)
console.log("beforeCreate"); }, created() { // 創(chuàng)建之后回調(diào) console.log("created");
}, beforeMount() { console.log("beforrMount"); }, // todo 常用, 異步操作,
比如發(fā)起ajax請(qǐng)求獲取數(shù)據(jù), 添加定時(shí)器 mounted() { // 初始化顯示之后會(huì)立即調(diào)用一次 console.log("mounted");
this.intervalId = setInterval(() => { console.log("干掉vm之后, 定時(shí)器還在跑, 內(nèi)存泄露了");
this.isShow = !this.isShow; }, 1000); /* 如果下面不使用箭頭回調(diào)函數(shù), this就是window, 而不是vm *
setInterval(() => { this.isShow= !this.isShow; },1000); * */ }, // 更新階段
beforeUpdate() { //更新階段之前回調(diào) console.log("beforeUpdate"); }, updated() { //
更新階段之后回調(diào) console.log("updated"); }, // 死亡階段 // todo 常用 收尾工作 beforeDestroy() {
// 死亡之前回調(diào)一次 console.log("beforeDestroy "); clearInterval(this.intervalId); },
destroyed() { console.log("destroyed"); }, methods: {} } });
ES的語法糖,箭頭函數(shù)
比如在設(shè)置定時(shí)器時(shí), 定時(shí)器中需要對(duì)vue的屬性進(jìn)行操作,在定時(shí)器的代碼塊中this指的是定時(shí)器對(duì)象,es6的箭頭語法解決就這個(gè)問題,
在箭頭函數(shù)中this沒有的屬性,會(huì)到外層的vue中來找
this.intervalId = setInterval(() => { console.log("干掉vm之后, 定時(shí)器還在跑, 內(nèi)存泄露了");
this.isShow = !this.isShow; }, 1000);
動(dòng)畫
按照vue的下面的幾步要求, vue 會(huì)給目標(biāo)元素添加或者移除特定的 css,實(shí)現(xiàn)動(dòng)畫的效果
* 需要添加動(dòng)畫的標(biāo)簽被 <transition name="" > XXX </transition>包裹 <div id="test">
<transition name="YYY"> <p v-show="isShow" class="">toggle</p> <button
@click="isShow=!isShow">toggle</button> </transition> </div> <script
type="text/javascript" src="js/vue.js"></script> <script
type="text/javascript"> new Vue({ el: '#test', data() { return { isShow: true }
} });
* 定義以 .YYY-開頭的 css屬性, 這個(gè)YYY就是上面自定義的YYY, 需要在這些自定義的屬性中指定過度的屬性以及隱藏的屬性
一個(gè)簡(jiǎn)單的動(dòng)畫效果標(biāo)簽從隱藏->出現(xiàn), 再?gòu)某霈F(xiàn)到隱藏的過程,就像下面這樣
v-enter v-enter-to v-leave v-leave-to 隱藏 出現(xiàn) 出現(xiàn) 隱藏
自定義這四個(gè)時(shí)期的狀態(tài)
/* 顯示的過度效果*/ .YYY-enter-active { transition: all 1s; } /* 隱藏的過度效果*/
.YYY-leave-active { transition: all 3s; } /* 從無到有的樣式 */ .YYY-enter { opacity:
0; } /* 從有到無的樣式 */ .YYY-leave-to { opacity: 0; transform: translateX(20px); /*
離開時(shí),向X軸的正方向移動(dòng)20px*/ }
格式化時(shí)間的插件庫(kù)
點(diǎn)擊進(jìn)入 moment.js網(wǎng)址 <https://www.bootcdn.cn/moment.js/> ,在這里可以找到需要引入的script標(biāo)簽
點(diǎn)擊進(jìn)入 moment.js的文檔 <https://momentjs.com/docs/> 在文檔中可以找到對(duì)應(yīng)的格式和例子
<div id="test"> <h2>顯示格式化的日期時(shí)間</h2> <p>{{date}}</p> <p>默認(rèn)完整: {{date |
dateFormat}}</p><!-- 一旦我們這么寫， 他就會(huì)把date的值，傳遞給dateFormat函數(shù) --> <p>年月日: {{date |
dateFormat('YYYY-MM-DD')}}</p><!-- 一旦我們這么寫， 他就會(huì)把date的值，傳遞給dateFormat函數(shù) -->
<p>時(shí)分秒: {{date | dateFormat('HH:mm:ss')}}</p><!-- 一旦我們這么寫，
他就會(huì)把date的值，傳遞給dateFormat函數(shù) --> </div> /* 這個(gè)在官網(wǎng)上查找 */ <script
type="text/javascript"
src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script> <script
type="text/javascript" src="js/vue.js"></script> <script
type="text/javascript"> // 自定義過濾器 Vue.filter('dateFormat',(value,format)=>{ /*
Vue是函數(shù)對(duì)象 */ return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss'); });
new Vue({ el:'#test', data:{ date:new Date() } });
Es的語法糖
es6 的語法: 形參默認(rèn)值 , 沒傳值的話,就使用默認(rèn)值
function(value,format="YYYY-MM-DD"){ return moment(value).format(format); }
vue的指令
常見的原生指令如下
v:text : 更新元素的textContent <br> v:html : 更新元素的innerHtml<br> v-if: true
如果為true,標(biāo)簽才會(huì)輸出到頁(yè)面 <br> v-else: 如果為false,標(biāo)簽才會(huì)輸出到頁(yè)面 <br> v-show:
通過控制display的樣式來控制顯示和隱藏<br> v-for: 遍歷數(shù)組對(duì)象 <br> v-on: 綁定監(jiān)聽事件, 一般直接寫 @ <br>
v-bind: 強(qiáng)制綁定解析表達(dá)式 一般簡(jiǎn)寫成 : <br> v-model: 雙向數(shù)據(jù)綁定 <br> ref: 指定唯一的標(biāo)識(shí), Vue對(duì)象可以通過
$els 屬性來訪問這個(gè)元素對(duì)象 <br> v-cloak: 防止閃現(xiàn)可能應(yīng)為網(wǎng)速的原因{{msg}} 一直解析不了, 于是用戶就看到它了,不友好, 于是
vue推出 與css配合 [v-cloak] {display:none} <br>
補(bǔ)充最后兩個(gè)
* ref 指定唯一的標(biāo)識(shí), Vue對(duì)象可以通過 $els 屬性來訪問這個(gè)元素對(duì)象
* 防止閃現(xiàn)可能應(yīng)為網(wǎng)速的原因{{msg}} 一直解析不了, 于是用戶就看到它了,不友好, 于是 vue推出 與css配合 [v-cloak]
{display:none}
例子:
<head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak] { /*
回去尋找有這個(gè)屬性名的標(biāo)簽 [v-cloak] , 就是下面的p標(biāo)簽 */ display:none } </style> </head> <body>
<div id="test"> <p ref="content123">哈哈哈哈</p> <button @click="hint">提示</button>
// v-cloak="" + 上面的css 樣式避免 {{ }} 閃現(xiàn)的效果 <p v-cloak="">{{msg}}</p> <br> </div>
<script type="text/javascript" src="js/vue.js"></script> <script
type="text/javascript"> // 注冊(cè)全局指令 Vue.directive('') new Vue({ el:'#test',
data:{ msg: '嘿嘿' } , methods:{ hint(){ // 因?yàn)?`<p ref="content123">哈哈哈哈</p>`
使用了ref,所以vue可以通過this.$refs.content123 找到指定的這個(gè)元素
alert(this.$refs.content123.textContent) } } });
熱門工具 換一換