vue學習筆記

vue學習筆記

原創

PiaoMiaoXiaodao

2020-02-23 07:42

語法基礎

v-bind 縮寫 :
v-bind 單向數據綁定對象–>html渲染

對於數據對象 a={b:‘22222’}
在文本渲染中v-bind 寫法 {{a.b}}
對於數據對象 a={b:‘sasasas’}
想渲染成html 那應該寫成
對於標籤內部屬性應該寫成 v-bind:id=“a.b” v-bind:disabled=‘a.b’ v-bind:href=“url” :href=“url” v-bind:[attributeName]=“url”
切換class 根據isActive hasError 切換active ‘text-danger’
v-bind:class="{ active: isActive, ‘text-danger’: hasError }"
動態style activeColor fontSize 都會隨對象數據變化
v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px’ }""

v-on

v-on:click=“doSomething” v-on:[eventName]=“doSomething” @click=“doSomething”

v-if

v-if 條件渲染 v-show 條件顯示(隱藏的也會渲染) v-if如果不想複用元素要加一個key 唯一

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-for

<li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
  <div v-for="item of items"></div>
  
  <div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

v-model
v-model專用於雙向數據綁定相當於一個v-bind 加一個v-on:change

組件基礎

引入組件

//import後面沒有大跨號
//./是當前路徑 即同目錄下  @/是src下

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
  //引入後必須在components裏聲明
    ComponentA,
    ComponentC
  },
  // ...
}

定義組件內props屬性
props是組件對外開放的屬性外部使用組件時候可以傳遞props包含的屬性的值給組件
組件自己不應該對props進行修改

如果傳遞了一個props裏面不存在的屬性這個屬性會落到組件的根元素上如果屬性衝突外部優先級高
不想發生這種情況應該在組件內添加 inheritAttrs: false

假設組件名爲 blog-post

//默認傳遞屬性數組
props: ['title']
//用對象格式可以定義類型 如 String Number Boolean Array Object Date Function Symbol 等 不要引號
props: {title:String}
//多定義是否必須
props:{title:{type: String, required: true}}
//多個類型
props:{title:[String, Number]}

//傳遞屬性  靜態
<blog-post title="My journey with Vue"></blog-post>
//傳遞屬性 動態
<blog-post v-bind:title="post.title"></blog-post>
<blog-post :title="post.title"></blog-post>

//傳遞屬性 除字符串之外 不分靜態動態 都必須用v-bind傳遞 後面都必須要加引號
<blog-post v-bind:key="42"></blog-post>
<blog-post v-bind:key="true"></blog-post>

自定義事件和v-model實現
數據狀態的逆向傳遞
可以在組件的元素上監聽各種自定義的事件, 組件內部自己代碼產生推送這些事件達到數據狀態的逆向傳遞

//組件使用
<blog-post @myeve="saveNewState"></blog-post>

//組件內部
//$emit 對外通知事件
this.$emit('myeve');
this.$emit('myeve',e);

// 自定義v-model   前面已經知道了 v-model實際上就是一個v-bind 和一個v-on:change  的合用的語法糖
//v-model 默認綁定的屬性是value 對於組件也是一樣的,如果你想自定義別人用在你組件上的v-model語法操作的屬性和事件那麼 在組件內加如下屬性
model: {
    prop: 'checked',
    event: 'change'
  },

插槽

//一般組件模板是一個緊湊的html標籤 其內部是沒有內容的如
<blog-post title="My journey with Vue"></blog-post>
//有內容也不會被解釋運行
//插槽的意思就是在模板內接收 放置在標籤內部的內容然後渲染
//採用插槽標籤作爲接收者 <slot></slot>

//例:
//組件模板
<a  v-bind:href="url"  class="nav-link">
  <slot></slot>
</a>

<nnn url="/profile">插槽內容</nnn>

//<slot></slot> 會等價於  插槽內容  四個字
//具名插槽等後面再說

訪問
組件內可使用 $root 來訪問根元素，$ parent來訪問父元素 $refs來訪問子元素(前提在子組件上定義ref=‘名稱’,然後 $refs.名稱) 如果是延遲渲染,可能訪問不到子元素因爲ref是作爲渲染結果存在的,所以如有必要請使用this.$ nextTick(() => {}函數
方法傳遞
如果父組件的所有親代或隔代等子組件都想使用一個方法,那麼這個方法父組件可以放到provide裏子組件用inject接收

//父組件
provide: function () {
  return {
    getMap: this.getMap
  }
}
//子組件
inject: ['getMap']

過渡效果
transition 是一個內部組件將其他會改變的組件包裹在其內部自然就會添加過渡效果

混入
混入類似於java中的繼承被混入的對象會繼承所有混入對象的方法如果有同名方法子類優先(都被調用)

//引入的是不帶大跨號的對象
import initData from '@/mixins/initData'

//定義在混入數組內
mixins: [initData],

聲明週期鉤子
類似於java的接口是預先定義好的一組函數, 父組件會在特定的時期去調用這些方法

聲明週期: 創建前->創建->掛載前->掛載->更新前->更新->(啓用停用)->銷燬前->銷燬
對應方法:beforeCreate create …

開發心得

組件可以自己使用自己只要寫明name就行使用的時候注意給定義不同的key 防止組件複用
回調內和其他框架一樣,用this有風險,最好在外面定義 var vm=this,回調內部用vm

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

vue學習筆記