成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue.js基礎(chǔ)教程

XboxYan / 3491人閱讀

摘要：自定義名稱縮放控制器可以使用中的動畫設(shè)計更為華麗的效果。在和中必須使用，不然它們會同時生效，動畫也會瞬間完成。先在標(biāo)簽內(nèi)加入，接著類似自定義動畫可以給命名。

文章鏈接：Vue.js基礎(chǔ)教程

開發(fā)工具準(zhǔn)備：

根據(jù)個人喜歡選擇IDE，我使用的是WebStorm，推薦使用Atom和VSCode；

安裝git base和node.js；

安裝vue-cli，命令npm i -g @vue/cli；

新建vue-cli項目：

方法一：通過圖形界面進(jìn)行安裝vue ui；

方法二：通過命令行安裝vue create project-name

運行項目npm run serve，端口8080。

雙向綁定v-model

雙向綁定大多用于表單事件，通過監(jiān)聽使用者輸入的事件來更新內(nèi)容。

現(xiàn)階段大部分工作在App.vue上，template與普通寫法一致，js寫法：

export default {
    name: "app",
    data() {
        return {
            title: "vue.js",
            myname: "請輸入名字"
        }
    }
}
去掉空白符.trim

直接在v-model后加上.trim即可。

懶加載.lazy

在離開input時才更新輸入的內(nèi)容，在v-model后加上.lazy即可。

限定輸入數(shù)字.number

在v-model后加上.number即可。

遍歷v-for

遍歷有一個基本的模板：


    
    
        
  • {{item}}
    •
組件component

在App.vue中引入components中的組件：
數(shù)據(jù)傳遞props

其中:cardData="cardData"是這個組件的核心，用于綁定屬性cardData。其他數(shù)據(jù)展示工作放在Card.vue組件中進(jìn)行。

JS Result
EDIT ON

這里解析一下

包裹
主要是方便后期應(yīng)用擴(kuò)展，以及讓應(yīng)用整體更穩(wěn)定。

生命周期

我不喜歡用官網(wǎng)的生命流程圖來講解這個內(nèi)容，使用文字表達(dá)更加讓思維清晰。

初始化：設(shè)置數(shù)據(jù)監(jiān)聽，編譯模板，掛載到DOM并在數(shù)據(jù)變化時更新DOM等；

生命周期鉤子：其實就是一個過程處理，類似于服務(wù)站。

生命周期鉤子簡介

beforeCreate：實例初始化

created：實例建立完成（可以取得$data）

beforeMount：模板掛載之前（還沒有生成html）

mounted：模板掛載完成

beforeUpdate：如果data發(fā)生變化，觸發(fā)組件更新，重新渲染

updated：更新完成

beforeDestroy：實例銷毀之前（實例還可以使用）

destroyed：實例已銷毀（所有綁定被解除、所有事件監(jiān)聽器被移除、所有子實例被移除）

生命周期鉤子用得最多的是mounted，主要用在調(diào)用屬性、方法的時候，

指令 v-once指令

第一次渲染完成后變?yōu)殪o態(tài)內(nèi)容，其下的所有子元素都是這樣的效果。

v-pre指令

v-pre指令會讓指定元素被忽略。

v-cloak指令

v-cloak指令用于去除頁面渲染數(shù)據(jù)時出現(xiàn)閃現(xiàn)的情況，使用方法：
v-html指令

v-html指令會把html標(biāo)簽渲染成DOM顯示在頁面上。

v-html指令只能對可信任的用戶使用，否則容易受到XSS攻擊。

動畫

Vue動畫一般在真正需要使用的情況下才加入頁面，推薦在CSS中使用動畫。

加入漸變的時機

v-if條件渲染

v-show條件顯示

動態(tài)組件

組件的根節(jié)點

漸變的分類

v-enter定義進(jìn)入漸變時開始的樣式。

只存在組件插入前，組件插入后就移除。

v-enter-active定義進(jìn)入漸變的過程效果，可以設(shè)定漸變過程的時間（duration）和速度曲線（easing curve）。

在組件被插入前生效，在完成動畫時移除。

v-enter-to定義進(jìn)入漸變后結(jié)束的樣式。

在組件被插入后生效，同時v-enter被移除，并在完成進(jìn)入漸變動畫時移除。

v-leave定義離開漸變時開始的樣式。

在觸發(fā)組件離開漸變時生效，接著馬上移除。

v-leave-active定義離開漸變的過程效果，可以設(shè)定漸變過程的時間（duration）和速度曲線（easing curve）。

在觸發(fā)組件離開漸變時生效，在完成動畫時移除。

v-leave-to定義離開漸變后結(jié)束的樣式。

在觸發(fā)組件離開漸變時生效，同時v-enter被移除，并在完成離開漸變動畫時移除。

transition自定義名稱 
.zoom-enter, .zoom-leave-to {
width: 0px;
height: 0px;
}
.zoom-enter-active, .zoom-leave-active {
transition: width 1s, height 1s;
}
animation

可以使用CSS中的animation動畫設(shè)計更為華麗的效果。

.zoom-leave-active {
animation: special_effects 1.5s;
}

.zoom-enter-active {
animation: special_effects 1.5s reverse;
}

@keyframes special_effects {}
transition自定義動畫類別

除了在中設(shè)定name自定義前綴（屬性），還可以預(yù)設(shè)動畫類別。

enter-class定義進(jìn)入動畫時開始的樣式。

enter-active-class定義進(jìn)入動畫的過程效果。

enter-to-class定義進(jìn)入動畫后結(jié)束的樣式。

leave-class定義離開動畫時開始的樣式。

leave-active-class定義離開動畫的過程效果。

leave-to-class定義離開動畫后結(jié)束的樣式。

以上六個自定義屬性優(yōu)先級別高于一般漸變類別。

CSS動畫庫：Animation.css
JavaScript鉤子

還可以綁定JavaScriptHooks，除了多帶帶使用，也能結(jié)合CSS transition和animations一起使用。

beforeEnter(el)在進(jìn)入漸變或動畫前生效。

enter(el,callback)在進(jìn)入漸變或動畫的組件插入時生效。

afterEnter(el)在進(jìn)入漸變或動畫結(jié)束時生效。

enterCanceled(el)在未完成漸變或動畫時取消。

beforeLeave(el)在離開漸變或動畫前生效。

leaveCancelled(el)在未完成漸變或動畫時取消。

在enter和leave中必須使用done，不然它們會同時生效，動畫也會瞬間完成。

設(shè)定初始載入時的漸變

如果想要設(shè)定一開始載入畫面時組件的漸變效果，可以通過設(shè)定appear屬性來實現(xiàn)。

appear-class載入時開始的樣式。

appear-to-class載入過程的樣式。

appear-active-class載入結(jié)束時樣式。

先在標(biāo)簽內(nèi)加入appear，接著類似自定義動畫可以給class name命名。

初始載入JavaScript Hooks

beforeAppear載入前

appear載入時

afterAppear載入后

appearCancelled取消載入（載入開始后）
key

對相同的標(biāo)簽元素使用key進(jìn)行區(qū)分。

漸變模式in-out和out-in in-out模式

新加入的元素做漸變進(jìn)入。

漸變進(jìn)入結(jié)束后，原存在的元素再漸變離開。

out-in模式

原存在的元素漸變離開。

漸變離開結(jié)束后，新元素再漸變進(jìn)入。
列表過渡

會渲染出一個html標(biāo)簽，預(yù)設(shè)是，也可以選擇自定義tag為其他標(biāo)簽。

無法使用（漸變模式in-out和out-in），因為不再是元素之間來回切換。

每個元素需要設(shè)定一個key值，不能重復(fù)。

列表亂數(shù)排序

能夠改變數(shù)組的排序，使用前需要先安裝shuffle

npm i --save lodash.shuffle

let shuffle = require("lodash.shuffle")
過濾器filter filters串聯(lián)

filter可以同時串聯(lián)多個filter函數(shù)。

filters參數(shù) $emit

父組件可以使用props把數(shù)據(jù)傳遞給子組件。

子組件可以使用$emit觸發(fā)父組件的自定義事件。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101996.html

相關(guān)文章

  • (原創(chuàng))vue 學(xué)習(xí)筆記

    摘要：菜鳥教程這是一個屬性其值是字符串菜鳥教程同上這是一個屬性其值是字符串用于定義的函數(shù)，可以通過來返回函數(shù)值。它們都有前綴，以便與用戶定義的屬性區(qū)分開來。 開篇語 我最近學(xué)習(xí)了js,取得進(jìn)步,現(xiàn)在學(xué)習(xí)vue.js.建議新手學(xué)習(xí),請不要用npm的方式(vue-cli,vue腳手架),太復(fù)雜了. 請直接下載vue.js文件本地引入,就上手學(xué)習(xí)吧參照菜鳥教程網(wǎng)站的vue.js教程http://...

    layman 評論0 收藏0

  • 推薦五個Vue2的免費教程

    摘要：一步一步學(xué)習(xí)一直都有發(fā)布他開發(fā)的教程。在上有他免費的教程，并且宣稱是世上最深入的系列。基礎(chǔ)在上有個非常的視頻教程。的官網(wǎng)教程非常值得你從頭讀到尾。使用框架這是我們最后一個教程的介紹。不過在和已經(jīng)有為你準(zhǔn)備了不錯的免費課程哈 一步一步學(xué)習(xí)Vue 2 （Laracasts） Jeffrey Way一直都有發(fā)布他web開發(fā)的教程。他曾經(jīng)在30天內(nèi)教會了我使用jquery。在Laracast...

    liangzai_cool 評論0 收藏0

  • 微豆 - Vue 2.0 實現(xiàn)豆瓣 Web App 教程

    摘要：微豆一個使用與重構(gòu)豆瓣的項目。在中的配置代理重新啟動，打開查看結(jié)果是否與直接請求豆瓣相同。更多請參考豆瓣電影文檔。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。 微豆 Vdo 一個使用 Vue.js 與 Material Design 重構(gòu) 豆瓣 的項目。 項目網(wǎng)站 http://vdo.ralfz.com/ GitHub https:...

    cjie 評論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對前端學(xué)習(xí)資源做一個匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會及時更新，平時業(yè)務(wù)工作時也會不定期更...

    princekin 評論0 收藏0

  • 美團(tuán)小程序框架mpvue入門教程

    摘要：美團(tuán)小程序框架入門教程自打?qū)懥嗣缊F(tuán)小程序框架蹲坑指南一發(fā)不可收拾，今天趁周末空閑，來寫個沒朋友的簡單入門教程，本教程只針對新手，老鳥勿噴。 美團(tuán)小程序框架mpvue入門教程 自打?qū)懥?美團(tuán)小程序框架mpvue蹲坑指南,一發(fā)不可收拾，今天趁周末空閑，來寫個mpvue(沒朋友)的簡單入門教程，本教程只針對新手，老鳥勿噴。 另外，我還專門為本文做了一個簡單的項目，如果懶得從頭開始搭項目的童鞋...

    YorkChen 評論0 收藏0

發(fā)表評論

0條評論

XboxYan

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<