国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue.js基礎教程

XboxYan / 3481人閱讀

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

文章鏈接：Vue.js基礎教程

開發工具準備：

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

安裝git base和node.js；

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

新建vue-cli項目：

方法一：通過圖形界面進行安裝vue ui；

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

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

雙向綁定v-model

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

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

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

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

懶加載.lazy

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

限定輸入數字.number

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

遍歷v-for

遍歷有一個基本的模板：


    
    
        
  • {{item}}
    •
組件component

在App.vue中引入components中的組件：
數據傳遞props

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

JS Result
EDIT ON

這里解析一下

包裹
主要是方便后期應用擴展，以及讓應用整體更穩定。

生命周期

我不喜歡用官網的生命流程圖來講解這個內容，使用文字表達更加讓思維清晰。

初始化：設置數據監聽，編譯模板，掛載到DOM并在數據變化時更新DOM等；

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

生命周期鉤子簡介

beforeCreate：實例初始化

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

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

mounted：模板掛載完成

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

updated：更新完成

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

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

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

指令 v-once指令

第一次渲染完成后變為靜態內容，其下的所有子元素都是這樣的效果。

v-pre指令

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

v-cloak指令

v-cloak指令用于去除頁面渲染數據時出現閃現的情況，使用方法：
v-html指令

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

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

動畫

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

加入漸變的時機

v-if條件渲染

v-show條件顯示

動態組件

組件的根節點

漸變的分類

v-enter定義進入漸變時開始的樣式。

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

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

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

v-enter-to定義進入漸變后結束的樣式。

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

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

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

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

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

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

在觸發組件離開漸變時生效，同時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動畫設計更為華麗的效果。

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

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

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

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

enter-class定義進入動畫時開始的樣式。

enter-active-class定義進入動畫的過程效果。

enter-to-class定義進入動畫后結束的樣式。

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

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

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

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

CSS動畫庫：Animation.css
JavaScript鉤子

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

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

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

afterEnter(el)在進入漸變或動畫結束時生效。

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

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

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

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

設定初始載入時的漸變

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

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

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

appear-active-class載入結束時樣式。

先在標簽內加入appear，接著類似自定義動畫可以給class name命名。

初始載入JavaScript Hooks

beforeAppear載入前

appear載入時

afterAppear載入后

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

對相同的標簽元素使用key進行區分。

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

新加入的元素做漸變進入。

漸變進入結束后，原存在的元素再漸變離開。

out-in模式

原存在的元素漸變離開。

漸變離開結束后，新元素再漸變進入。
列表過渡

會渲染出一個html標簽，預設是，也可以選擇自定義tag為其他標簽。

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

每個元素需要設定一個key值，不能重復。

列表亂數排序

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

npm i --save lodash.shuffle

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

filter可以同時串聯多個filter函數。

filters參數 $emit

父組件可以使用props把數據傳遞給子組件。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101996.html

相關文章

  • (原創)vue 學習筆記

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

    layman 評論0 收藏0

  • 推薦五個Vue2的免費教程

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

    liangzai_cool 評論0 收藏0

  • 微豆 - Vue 2.0 實現豆瓣 Web App 教程

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

    cjie 評論0 收藏0

  • 前端資源系列（4）-前端學習資源分享&前端面試資源匯總

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

    princekin 評論0 收藏0

  • 美團小程序框架mpvue入門教程

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

    YorkChen 評論0 收藏0

發表評論

0條評論

XboxYan

男|高級講師

TA的文章

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