VUE 老專案改造,常用方法說明
vue 相較 上一代web框架JQ有更優秀的開發理念,更快的開發速度(這裡可能有些低版本瀏覽器相容問題)
可由於歷史遺留問題,很難使用vue的全部生態來開發 比如腳手架,
比如我們公司在組織架構上,前端的設計 html css的編寫是由一個部門完成的
動態渲染是由另一個部門完成的
導致一個問題,在後端迭代新技術的時候無法要求人家去迭代,所以我們公司還在使用 freemarker 和JSP等相關技術
搞過JAVA開發的都知道 這倆技術有點坑,
(比如 在做一些AJXA渲染移動端上拉載入更多等操作的時候,要同時維護 freemarker和JQ兩種程式碼,冗餘不說BUG也不好處理 )
由於公司結構的問題,又很難推進VUE的全部生態,使用腳手架前後端分離開發
如何解決呢,如何提高開發速度了,如何提高效率不加班呢(PS:不加班是我的最終目的~~)
我們可以不使用腳手架,直接進行頁面JS的編寫,對公共元件進行抽離(這個問題會放在下一次來說)
寫了一些了,目前效果不錯最起碼BUG少了,也不怎麼加班了,還有時間學習新東西了,好了先看程式碼
<script type="text/javascript">
//開發完畢重構抽到單門的JS中並壓縮處理
var indexApp = new Vue({
el: '#indexApp', //@1 標記符詳情見下
data: {
//@2 標記符詳情見下
datas: [],
watchVal:''
},
created:function(){
//@3 標記符詳情見下
this.onLoadData();
},
methods:{
//@4 標記符詳情見下
onLoadData :function(){
console.log("onLoad")
},
watchFun : function(newVal,oldVal){
console.log("newVal")
console.log("oldVal")
},
eventFun : function (val){
console.log("newVal");
}
},
filters: {
//@5 標記符詳情見下
dateFormat : function(val1,val2){
}
},
watch :{
//@6 標記符詳情見下
'watchVal':'watchFun'
}
})
</script>
這裡只介紹些常用的 基本能解決大部分的日常開發問題,更詳細的教程網上很多,可以自行搜一搜
@1:對應需要VUE進行處理的DOM上,不要把ID放在body上,會報錯
@2:VUE用來進行資料繫結的,資料物件,在繫結完dom後,我們的主要錯做都是在操作這個屬性下的值
@3: vue的生命週期鉤子很多,這個是比較常用的,其中可以用this.{funName} 來呼叫 methods裡面定義的方法
@4: 用來定義方法的屬性,比如可以給生命週期裡的回掉來定義方法,可以給watch定義函式,可以定義各種事件的方法等
@5: 這個也很重要,主要是在做迴圈時對值的處理,因為後端開發人員不會都給你格式化好的,他們懶著呢(給你就行了格式自己處理,別問我怎麼知道的),說一下用法
<div v-for="data in datas">
<dl @click="eventFun(data)">
<dt><a href="javascript:void(0)" target="_blank" > {{data[5]}}</a></dt>
<dd><span class="time"> {{data[3] | dateFormat}} </span></dd>
<dd class="text">{{data[2]}}</dd>
</dl>
</div>
注意 {{data[3] | dateFormat}} 這個就是 filters 的用法 其中 dateFormat 的 val1可以獲得 data[3]
(PS 感覺很像 linux的管道符 有木有)
這裡的 data[3] 得到的是個時間戳(後臺就是這麼傲嬌,我之所以不罵他,因為後臺也是我寫的~~)
如果要傳多個引數怎麼辦呢,比如我還想獲得data[4],通過這倆個值在做一些判斷,可以這樣
{{data[3] | dateFormat(data[4])}}
這樣就可以在dateFormat的 val2 中獲得 data[4] 的值的,再有其他的需求依次類推
@6: 這個呢 從字面中就能看出來 是個觀察者,觀察什麼的,觀察data屬性中的資料的
比如我有個需求,在移動端 對著input 的輸入的值,在滿足手機號的正則的時候將下方的按鈕有不可用變成可用
注意是移動端,有興趣的可以試試,能做不好做
如果用VUE就很簡單了,
‘watchVal’:’watchFun’ //data中的 watchVal 在改變的時候會呼叫 methods 中的 watchFun並傳進來兩個引數
分別是
newVal 第一個 改變之後的資料
oldVal 第二個 改變之前的資料
如果要滿足上面的需求 只需要對第一個值做正則就可以了
相關推薦
VUE 老專案改造,常用方法說明
vue 相較 上一代web框架JQ有更優秀的開發理念,更快的開發速度(這裡可能有些低版本瀏覽器相容問題) 可由於歷史遺留問題,很難使用vue的全部生態來開發 比如腳手架, 比如我們公司在組織架構上,前端的設計 html css的編寫是由一個部門完成的 動
Java之線程,常用方法,線程同步,死鎖
時間 imp log 沖突 根據 oms adl 無法 誰的 1, 線程的概念 進程與線程 進程:每個進程都有獨立的代碼和數據空間(進程上下文),進程間的切換會有較大的開銷,一個進程包含1--n個線程。(進程是資源分配的最小單位) 線程:同一類線程共享代碼和數據空間,每個線
元組的建立,特性,常用方法,
元組的建立 對於元組,其可以儲存任意資料型別,但儲存的資料不能改變,即不能增刪改查。在元組中,除了數值型別可以相加減外,其餘型別都不可以,並且元組不可以被複制。 定義元組 t = (1,1.2,True,‘westos’) print(t,type(t)) 如果元組裡麵包含可變資料型
用vue構建專案筆記5(在vue-cli專案中引用公用方法)(vue resource統一處理)
之前用cli腳手架構建的專案廢了,又讓我改成jq了,悲劇,這次這個專案用純vue實現了,哈哈。下面介紹如何引入全域性方法供每個元件都能呼叫。 1.建立一個js檔案,我起的名字叫做“common.js”,放在assets>js下。 2.在common.js檔案中寫入公用
【JavaEE學習筆記】SpringMVC_01_快速搭建一個環境,簡介,常用方法
SpringMVC_01 A.快速搭建一個SpringMVC環境 1.搭建框架 <project xmlns="http://maven.apache.org/POM/4.0.0" xm
springboot傳送郵件,常用方法
一:pom檔案springboot版本2.0<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-m
從零開始搭建Electron+Vue+Webpack專案框架,一套程式碼,同時構建客戶端、web端(一)
摘要:隨著前端技術的飛速發展,越來越多的技術領域開始被前端工程師踏足。從NodeJs問世至今,各種前端工具腳手架、服務端框架層出不窮,“全棧工程師”對於前端開發者來說,再也不只是說說而已。在NodeJs及其衍生技術高速發展的同時,Nw和Electron的問世,更是為前端發展提速不少,依稀記得哪位前輩說過,“能
【原創】從零開始搭建Electron+Vue+Webpack專案框架,一套程式碼,同時構建客戶端、web端(二)
導航: (一)Electron跑起來(二)從零搭建Vue全家桶+webpack專案框架(三)Electron+Vue+Webpack,聯合除錯整個專案(未完待續)(四)Electron配置潤色(未完待續)(五)預載入及自動更新(未完待續)(六)構建、釋出整個專案(包括client和web)(未完待續) 摘要:
Java enum列舉在實際專案中的常用方法
> 在專案實際開發過程中,經常會遇到對某些固定的值、字典項的定義的需求,很多專案經常使用常量來定義,其實在jdk1.5就已經引入了列舉,使用列舉可以更好的解決這類需求,本文主要記錄列舉的優勢以及經常在專案中使用的方法。 # 知識點 * **列舉類命名** 列舉類的命名通常需要Enum為字尾,列舉成
微信公眾號支付介面(vue專案中,兩種方法)
第一種:引入微信js-sdk //在一個地方呼叫this.weixin()方法,比如說按鈕 //寫微信支付方法 weixin() { var that = this; var url=''; var params = {
vue專案中,頁面重新整理回到頁面頂部的方法
在Vue專案中,訪問過的頁面,在滾動到某個位置後,再次重新整理頁面,頁面仍處於上次訪問過的位置。為了想頁面回到頂部,只需要對路由進行修改,在router下index.js中:export default new Router({ routes: [{...}], sc
使用spring boot 改造老專案,多個數據源問題
使用spring boot 改造老專案,因為資料來源有多個,啟動時一直報如下錯誤 Caused by: org.springframework.beans.factory.NoUniqueBeanDefinitionException: No qualifyin
go語言使用go-sciter創建桌面應用(七) view對象常用方法,文件選擇,窗口彈出,請求
問題 adf img function jquery stdout view type 改變 view對象的詳細文檔請看: https://sciter.com/docs/content/sciter/View.htm demo9.html代碼如下: &l
封裝對象,包含幾個常用方法
nts opp 操作 阻止事件冒泡 3.1 坐標 stop pre 處理 這兩天復習了DOM事件綁定,記錄一下,便於復習學習。 1 事件處理程序 1.1 HTML事件處理程序:直接寫在html中,和html不解耦,修改麻煩 1.2 DOM0級事件處理程序:不寫在html
Java中什麽是匿名對象,空參構造方法輸出創建了幾個匿名對象,屬性聲明成static
es2017 ava cit 得到 定義 屬性 自增 alt spa package com.swift; //使用無參構造方法自動生成對象,序號不斷自增 public class Person { private static int count; //如果在定
十二、事件,委托,泛型委托,集合(泛型和非泛型),Lambda表達式(聲明委托,使用委托,簡單的委托示例,action<T>和func<t>委托,多播委托,匿名方法,Lambda表達式,參數,事件)
multicast new 調用方法 多播 ted 被調用 輸入參數 pac cas 事件(Event) 事件是一種對象或類能夠提供通知的成員,客戶端可以通過提供事件處理程序為相應的事件可添加可執行代碼,事件可以理解為一種特殊的委托。 委托(Delegate) 委托是存有對
Java代碼優化,都有哪些常用方法?
Java開發 Java學習 Java代碼優化 Java代碼優化是Java編程開發很重要的一個步驟,Java代碼優化要註重細節優化,一個兩個的細節的優化,產生的效果不大,但是如果處處都能註意代碼優化,對代碼減少體積、提高代碼運行效率是有巨大幫助的,還能在一定程度上避免未知錯誤,常用的Java代碼優化
vue使用md5,base64方法
保護 技術 image 代碼 info mage 提高 img 但是 在前端加密代碼雖然對安全沒有提高,但是可以避免明文傳輸,提供用戶隱私保護,還是很有必要的。 首先安裝js-md5,js-base64。 在vue中引入。 之後就可以直接使用了,一般的做法是先把密碼轉行
16,re模塊的常用方法
ID 查找 Go 正則 callable find eee 信息 AR ret =re.findall(‘\d+‘, ‘eva123egon4yuan567‘) print(ret)#返回滿足條件的結果 ,放在一個列表裏。 ret2 = re.search(‘\d+‘,
python學習第二天筆記一,字符串常用方法
大寫字母 生成 with dsa AC nds 使用 star strip() 今天主要學習了字符串常用方法,字典,高效循環字典方式,以及文件讀寫。 字符串的常用方法: print(name.capitalize())#首字母大寫 print(name.istitle())