vue2.0入門及實戰開發(四)
過濾器 獲取DOM元素
<div>
請輸入內容:<input type="text" name="" v-model="text">
顯示:{{text|myFilter}}
</div>
export default{
data(){
return{ text: ''}
}
filters:{
myFilter:function(value){value就是text
//輸入的內容幫我做個反轉,轉換成陣列,反轉陣列,再轉為字串
// return 1;
return value.split('').reverse().join('');
}
}
}
建立全域性過濾器
Vue.filter('myFilter',function(value){
return '我是全域性過濾器';
})
注意:當全域性過濾器和元件內過濾器重名的時候,是以元件內過濾器為有效的
獲取DOM元素
<sub-vue ref="sub"></sub-vue> 元件物件
<div ref="myDiv">{{text}}</div> DOM物件
救命稻草,前端框架就是為了減少DOM操作,但是再特定的情況下,還是給你留了後門的
在指定的元素上,新增 ref ="名稱A"
在獲取的地方加上 this.$refs.名稱A
如果ref放在了原生DOM元素上,獲取的資料就是原生的DOM物件
如果ref放在了元件物件上,獲取的就是元件物件
export default{
data(){
return{
text:'123'
}
},
//組價建立後,資料已經完成初始化,但是DOM還未生成
created(){ //事件的處理函式(created)
console.log('created':this .$refs.myDiv);
}
//資料裝載到DOM上,各種資料已經就位,將資料渲染到DOM上,DOM已經生成
mounted(){
this.$refs.sub.$el.innerHTML='xxxxx' 元件
console.log('mounted:',this.$refs.myDiv); DOM
//涉及DOM類的操作
//this.$refs.myDiv.innerHTML='hhhh';
//涉及到資料的操作
this.text='xxxx';
}
}
總結:原生的DOM可以直接操作,若是元件物件,想獲得DOM物件,通過this.$refs.sub.$el進行操作
對應的事件:
created完成了資料的初始化,此時還未生成DOM,無法操作DOM
mounted將資料已經裝載到了DOM之上,可以操作DOM
重定向和404
進入後,預設就是/
重定向 {path :'/',redirect: '/home'}
重定向 {path :'/',redirect:{name:'home'}}
404:在路由規則的最後的一個規則中寫一個很強大的匹配
{path : '*',component: NotFoundVue}
兩種建立路由物件配置路由規則的方式
方法一:
let router=new VueRouter();
routes:[
{}
]
方法二:
let router=new VueRouter();
router.addRoutes([
])
let router=new VueRouter();
router.addRoutes([
//重定向
{path: '/',redirect: '/home'},
{path: '/home',component:Home}
{path: '/',redirect:{name: 'home'}},
{name: 'home',path: '/home',component: Home}
//最終無法匹配 ->404
{path: '*',component: NotFound}
])
相關推薦
vue2.0入門及實戰開發(四)
過濾器 獲取DOM元素 <div> 請輸入內容:<input type="text" name="" v-model="text"> 顯示:{{text|myFilter}} </div> export
vue2.0入門及實戰開發(九)
給Vue原型掛載一個屬性 Vue.prototype.$axios=Axios; 全域性預設設定 Axios.defaults.baseURL='http://182.254.146.100/api' post請求的時候,如果資料是字串,預設頭就是鍵值對 否
vue2.0入門及實戰開發(七)
程式設計導航 this.$router.go(-1) 根據瀏覽器記錄來前進和後退 前進 1 後退 -1 this.$router.push(直接跳轉到某個頁面顯示) 引數:字串/xxx
vue2.0入門及實戰開發(五)
專案路由 前端路由:核心就是錨點值的改變,根據不同的值,渲染指定DOM位置的不同資料 ui-router:錨點值改變,如何獲取模版?ajax vue中,模版資料不是通過ajax請求來,而是呼叫函式獲取模
.NET Core實戰專案之CMS 第四章 入門篇-Git的快速入門及實戰演練
寫在前面 上篇文章我帶著大家通過分析了一遍ASP.NET Core的原始碼瞭解了它的啟動過程,然後又帶著大家熟悉了一遍配置檔案的載入方式,最後引出了依賴注入以及控制反轉的概念!如果大家把前面幾張都理解了,那麼你也就入了ASP.NET Core的大門了。但是我們還需要一個版本控制工具來提高我們的編碼效率。因此
從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 計劃書 & 我的前後端開發簡史
---新內容開始--- 番外 大家週一好呀,又是元氣滿滿的一個週一呀!感謝大家在週一這個著急改Bug的黃金時期,抽出時間來看我的博文哈哈哈,時間真快,已經到第十四篇博文了,也很順順(跌跌)利利 (撞撞)的來到了Vue的講解,群裡有小夥伴說,感覺後端還有很多沒有更新,是呀!還是有很多東西的在後端,只不過
STM32開發入門及實戰 (1)
本部落格的編寫目的: 一、自我總結,記錄。 二、分享,輸出,加深思考。 三、不作細緻如書本般編排,儘管那樣的排版很好看,但是過於耗費時間,還有很多東西沒有必要說明,完全可以自己去解決,但還是儘量做好排版,便於閱讀。 四、儘可能舉一反三,做到真正能夠處理實際
Web全棧前端開發之VUE2.0項目實戰,由淺入深學習路線
rip bpa 異步 解決 基礎 下拉 out icons 體驗 51cto ---JavaScript零基礎快速入門視頻教程https://edu.51cto.com/course/11773.html?source=so 第1天 Vue 2.01、vue簡介2、體驗v
Docker從入門到實戰(四)
Docker 虛擬化 一步一步走,寫小白都能看懂的文章,將持續更新中,敬請期待! Docker從入門到實戰(四) Docker基礎 一:Docker基本操作 一般情況安裝Docker之後系統會自動創建一個Docker的用戶組,如果沒有創建可以手動創建groupadd docker把當前非root用戶加
MySQL數據庫從入門到實戰(四)
字符集 數據類型 主鍵 元數據 ——————————————————————第一部分:字符集——————————————————————show charset; ---查看mysql支持字符集1、服務器端(1)實例級別vim my.cnfcharacter-set-server=utf8
Vue2.0的使用 配置開發環境成功執行第一個專案
什麼是 Vue Vue 是一個前端框架,特點是: 資料繫結 元件化 頁面上小到一個按鈕都可以是一個單獨的檔案.vue,這些小元件直接可以像樂高積木一樣通過互相引用而組裝起來 Vue2.0 推薦開發環境 Node.js 、
django2.0+python3.4實戰開發教程-資訊型部落格系統(一)
專案簡介 執行平臺:windows Python版本:3.4 Django版本:2.0 資料庫工具:sqlite 開發工具:Pycharm+sublime-text 寫在開頭:這是我第一次使用Django進行web開發,在此之前並無任何web開發經驗。其中,Django以及htm
【資料售賣平臺】—— Vue2.0入門學習專案爬坑
前言:這個專案是我從零學習Vue2.0時用於練習基礎知識的入門專案,包含了Vue2.0幾乎所有專案都會用到的基礎功能,是新手用來練手的好專案,這裡溫故知新對功能點做一個總結。 平臺首頁 登入註冊
vue2.0 入門總結
1.生成vue的例項 var vm=new vue({ //這裡是選項 他可以包含資料、模板、掛載元素、方法、生命週期鉤子等函式 }) 2.例項生命週期(在生命週期裡this指向呼叫它的vue例項) created在例項被建立後呼叫 created()
乾貨分享:vue2.0做移動端開發用到的相關外掛和經驗總結(2)
最近一直在做移動端微信公眾號專案的開發,也是我首次用vue來開發移動端專案,前期積累的移動端開發經驗較少。經過這個專案的鍛鍊,加深了對vue相關知識點的理解和運用,同時,在專案中所涉及到的微信api(微信分享,微信支付),百度地圖api(如何例項化地圖,給地圖新增自定義覆蓋物,給地圖新增自定義標註,對地圖進行
乾貨分享:vue2.0做移動端開發用到的相關外掛和經驗總結
最近一直在做移動端微信公眾號專案的開發,也是我首次用vue來開發移動端專案,前期積累的移動端開發經驗較少。經過這個專案的鍛鍊,加深了對vue相關知識點的理解和運用,同時,在專案中所涉及到的微信api(微信分享,微信支付),百度地圖api(如何例項化地圖,給地圖新增自
Vue2.0入門
現在web開發應該是很火的. 隨著前端技術的成熟, 手機效能提升. webApp 已經越來越接近原生體驗. 原生開發也應該掌握混合開發的能力,畢竟現在多數公司都要求hybrid開發經歷.(好好中文不用,非要hybrid) 因為公司專案Vue用的比較成熟, 跟著學習了一波
vue2.0+Element-ui實戰案例
前言 我們將會選擇使用一些 vue 周邊的庫vue-cli, vue-router,axios,moment,Element-ui搭建一個前端專案案例,後端資料介面,會使用json-server快速搭建一個本地的服務,方便對資料的增刪改查, 利用以上技術我們會搭建一個vue案例,效果展示圖: 以上就是
Node.js從入門到實戰(四)Node.js / JavaScript / ECMAScript的關係
一、Node.js Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。 Node.js 的包管理器 npm,是全球最大的開源庫生態系統。 V8引擎本身使用
vue2.0做移動端開發用到的相關外掛和經驗總結(2)
最近一直在做移動端微信公眾號專案的開發,也是我首次用vue來開發移動端專案,前期積累的移動端開發經驗較少。經過這個專案的鍛鍊,加深了對vue相關知識點的理解和運用,同時,在專案中所涉及到的微信api(微信分享,微信支付),百度地圖api(如何例項化地圖,給地圖新增自定義覆蓋物