文章連接: Vue.js基礎教程
開發工具準備:javascript
IDE
,我使用的是WebStorm
,推薦使用Atom
和VSCode
;git base
和node.js
;vue-cli
,命令npm i -g @vue/cli
;新建vue-cli
項目:css
vue ui
;vue create project-name
npm run serve
,端口8080
。<!--more-->html
雙向綁定大多用於表單事件,經過監聽使用者輸入的事件來更新內容。vue
現階段大部分工做在App.vue
上,template
與普通寫法一致,js
寫法:java
export default { name: 'app', data() { return { title: 'vue.js', myname: '請輸入名字' } } }
.trim
直接在v-model
後加上.trim
便可。node
<input type="text" v-model.trim="name" value="name">
.lazy
在離開input
時才更新輸入的內容,在v-model
後加上.lazy
便可。git
.number
在v-model
後加上.number
便可。github
v-for
遍歷有一個基本的模板:vue-cli
<div id="app"> <ul v-for="(item,index) in member" :key="index"> <li>{{item}}</li> </ul> </div>
component
在App.vue
中引入components
中的組件:npm
<template> <div id="app"> <Card /> </div> </template> <script> import Card from './components/Card' export default { components: { Card } } </script>
props
<template> <div id="app"> <Card :cardData="cardData"/> </div> </template>
其中:cardData="cardData"
是這個組件的核心,用於綁定屬性cardData
。其餘數據展現工做放在Card.vue
組件中進行。
JS Result EDIT ON <template> <div class="card_wall"> <div class="card" v-for="item in cardData" :key="item.name"> <div class="card_title">{{item.name}}</div> <div class="card_body"> <p>生日:{{item.birthday}}</p> <p>E-mail:{{item.mail}}</p> </div> </div> </div> </template> <script> export default { props: { cardData: { type: Array, required: true } } } </script>
這裏解析一下<div class="card_wall"></div>
包裹<div class="card"></div>
主要是方便後期應用擴展,以及讓應用總體更穩定。
我不喜歡用官網的生命流程圖來說解這個內容,使用文字表達更加讓思惟清晰。
DOM
並在數據變化時更新DOM
等;生命週期鉤子簡介
beforeCreate
:實例初始化created
:實例創建完成(能夠取得$data
)beforeMount
:模板掛載以前(尚未生成html
)mounted
:模板掛載完成beforeUpdate
:若是data
發生變化,觸發組件更新,從新渲染updated
:更新完成beforeDestroy
:實例銷燬以前(實例還可使用)destroyed
:實例已銷燬(全部綁定被解除、全部事件監聽器被移除、全部子實例被移除)生命週期鉤子用得最多的是mounted
,主要用在調用屬性、方法的時候,
v-once
指令第一次渲染完成後變爲靜態內容,其下的全部子元素都是這樣的效果。
v-pre
指令v-pre
指令會讓指定元素被忽略。
v-cloak
指令v-cloak
指令用於去除頁面渲染數據時出現閃現的狀況,使用方法:
<template> <div id="app"> <div v-cloak>${ item.title }</div> </div> </template> <style> [v-cloak] { display: none; } </style>
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
自定義名稱<template> <div id="app"> <div class="main"> <button @click="change = !change">縮放控制器</button> <transition name="zoom"> <div v-if="change" class="ant_man_style"></div> </transition> </div> </div> </template>
.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
自定義動畫類別除了在<transition>
中設定name
自定義前綴(屬性),還能夠預設動畫類別。
enter-class
定義進入動畫時開始的樣式。enter-active-class
定義進入動畫的過程效果。enter-to-class
定義進入動畫後結束的樣式。leave-class
定義離開動畫時開始的樣式。leave-active-class
定義離開動畫的過程效果。leave-to-class
定義離開動畫後結束的樣式。以上六個自定義屬性優先級別高於通常漸變類別。
CSS動畫庫: Animation.css
JavaScript
鉤子<transition>
還能夠綁定JavaScriptHooks,除了單獨使用,也能結合CSS transition
和animations
一塊兒使用。
beforeEnter(el)
在進入漸變或動畫前生效。enter(el,callback)
在進入漸變或動畫的組件插入時生效。afterEnter(el)
在進入漸變或動畫結束時生效。enterCanceled(el)
在未完成漸變或動畫時取消。beforeLeave(el)
在離開漸變或動畫前生效。leaveCancelled(el)
在未完成漸變或動畫時取消。<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled"> <div v-if="change" class="ant_man_style"></div> </transition>
在enter
和leave
中必須使用done
,否則它們會同時生效,動畫也會瞬間完成。
若是想要設定一開始載入畫面時組件的漸變效果,能夠經過設定appear
屬性來實現。
appear-class
載入時開始的樣式。appear-to-class
載入過程的樣式。appear-active-class
載入結束時樣式。<transition appear appear-class="show-appear-class" appear-to-class="show-appear-to-class" appear-active-class="show-appear-active-class"> </transition>
先在<transition>
標籤內加入appear
,接着相似自定義動畫能夠給class name
命名。
JavaScript Hooks
beforeAppear
載入前appear
載入時afterAppear
載入後appearCancelled
取消載入(載入開始後)<div id="app"> <transition appear @before-appear="beforeAppear" @appear="appear" @after-appear="afterAppear" @appear-cancelled="appearCancelled"> <div v-if="change" class="ant_man_style"></div> </transition> </div>
key
對相同的標籤元素使用key
進行區分。
in-out
和out-in
in-out
模式out-in
模式<transition mode="out-in"></transition> <transition mode="in-out"></transition>
<transition-group>
會渲染出一個html
標籤,預設是<span>
,也能夠選擇自定義tag
爲其餘標籤。in-out
和out-in
),由於再也不是元素之間來回切換。key
值,不能重複。<transition-group>
可以改變數組的排序,使用前須要先安裝shuffle
npm i --save lodash.shuffle let shuffle = require('lodash.shuffle')
filter
filters
串聯filter
能夠同時串聯多個filter
函數。
filters
參數$emit
props
把數據傳遞給子組件。$emit
觸發父組件的自定義事件。