vue2 0入門及實戰開發 四

2021-08-20 12:01:35 字數 1168 閱讀 7208

過濾器  獲取dom元素

請輸入內容:"text" name="" v-model="text">

顯示:}

export default

}filters:

}}建立全域性過濾器

vue.filter('myfilter',function(value))

注意:當全域性過濾器和元件內過濾器重名的時候,是以元件內過濾器為有效的

獲取dom元素

ref="sub"> 元件物件

ref="mydiv">}

dom物件

救命稻草,前端框架就是為了減少dom操作,但是再特定的情況下,還是給你留了後門的

在指定的元素上,新增 ref="名稱a"

在獲取的地方加上 this.$refs.名稱a

如果ref放在了原生dom元素上,獲取的資料就是原生的dom物件

如果ref放在了元件物件上,獲取的就是元件物件

export default

},//組價建立後,資料已經完成初始化,但是dom還未生成

created()

//資料裝載到dom上,各種資料已經就位,將資料渲染到dom上,dom已經生成

mounted()

}總結:原生的dom可以直接操作,若是元件物件,想獲得dom物件,通過this.$refs.sub.$el進行操作

對應的事件:

created完成了資料的初始化,此時還未生成dom,無法操作dom

mounted將資料已經裝載到了dom之上,可以操作dom

重定向和404

進入後,預設就是/

重定向

重定向 }

404:在路由規則的最後的乙個規則中寫乙個很強大的匹配

兩種建立路由物件配置路由規則的方式

方法一:

let router=new vuerouter();

routes:[{}]

方法二:

let router=new vuerouter();

router.addroutes([

])let router=new vuerouter();

router.addroutes([

//重定向,},

//最終無法匹配 ->404

])

vue2 0入門及實戰開發 一

元件化 頁面 動態效果 樣式 new vue 原樣輸出裡面的內容 package.json webpack.config.js isshow style height 100px background color green isred?red green 1111 export default r...

Vue2 0 實戰專案 六 Vuex

最近進入了乙個新專案組,前端框架選擇vue進行開發,資料的狀態管理選擇用vuex。本篇隨筆中的 採用vuex官網提供的購物車案例。index.html main.js api shop.js 抽取出api請求 components cart.vue 購物車元件 productlist.vue 產品元...

搭建Vue2 0開發環境

1 必須要安裝nodejs 2 搭建vue的開發環境 安裝vue的腳手架工具 官方命令列工具 npm install global vue cli cnpm install global vue cli 此命令只需要執行一次 3 建立專案 必須cd到對應的乙個專案裡面 vue init webpac...