函式	Vue元件
形參	Slot,props
區域性變數和區域性函式	Data,methods
函式名	Name
Retrun	template

 

<template></ template>--------------------------HTML

<script></ script>----------------------------------javaScript

<style></style>----------------------------------Css

MVVM  M(當前檢視中的可用資料)  v(渲染UI html)  vm(model和view的集合)雙向資料繫結  

MVC   C(處理和控制資料)

el:繫結的元素

data:屬性 {

name :sugang

age:12,

flage:true,

arr:[‘a’,’b’,’c’,d’’].

obj:{id:1,name:’aa’},

obj2:{id:1,name:’aa’},{id:3,name:’sugang},

}

表示式 {{}}:輸出資料

指令

v-model// 雙向資料繫結(用於表單，相當於value)

v-for //用於對陣列和物件進行迴圈遍歷

 arr in arrs   陣列  

(v,i ) in arrs    i:index     v:value 

(v,k) in arrs  {{v}}-{{k}}        k:key     v:value

v-on:click mouseover :事件執行 @替代

v-show /v-if //顯示隱藏 

<!-- 修飾符 -->

        <input v-model.trim='meg'/>

        <input v-model.number='num' type="number" />   

:是v-bind的縮寫，是為了動態繫結資料。繫結屬性,動態的來操作屬性

繫結c33樣式    css後面的把前面的覆蓋 

<div id="my">

            <img :src="url"/ :title="msg">

        <div :class="aa">引用單個</div>

        <div :class="[aa,bb]">引用多個</div>

        <div :style="{color:'#000',fontSize:'200px'}">

        style樣式</div>

        <div :class="{aa:flag,bb:flag}">json方式</div>

        </div>

指令大全

v-for迴圈

v-show 顯示與隱藏

v-if顯示與隱藏    如果表示式成立

v-else        否則就

v-else-if         多種情況下用這個

v-model雙向繫結資料

{{}}表示式 自動將我們雙向繫結的資料實時顯示出來

 

 

     

<!-- 開發環境版本，包含了用幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生產環境版本，優化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

宣告式渲染   

文字查值{{message}}   

繫結元素特性  ：title=”message”  v-bind:將元素節點的title特性和vue例項的message屬性保持一致.

toLocaleString() 方法可根據本地時間把 Date 物件轉換為字串，並返回結果。Thu Jun 21 2018 08:55:32 GMT+0800 (中國標準時間)——————————————2018/6/21 上午8:55:32

條件與迴圈

v-if  v-for

app4.todos.push({ text: '新專案' })push()在陣列後追加元素

處理使用者輸入

逆轉訊息v-on:click 新增事件監聽器 ，呼叫自定義的方法

this.message.split('').reverse().join('')逆轉訊息

v-model：輕鬆實現表單輸入和應用狀態之間的雙向繫結。

元件化應用構建

Js

// 定義名為 todo-item 的新元件

Vue.component('todo-item', {

  template: '<li>這是個待辦項</li>'

})

HTMl

<ol>

  <!-- 建立一個 todo-item 元件的例項 -->

  <todo-item></todo-item>

</ol>

V-text  v-html

 解決瀏覽器閃爍問題 (必須配置css樣式，否則不生效)

<div v-cloak>{{msg}}</div>

Css中 [v-cloak]{display:none} 

<div v-html></div>        <div v-text ></div>

Event

v-on或者 @click

事件冒泡:子元素的事件傳遞到父元素

修飾符

Stop: 

底層是e.stopPropagation()

阻止冒泡：v-on:click.stop="show3(event)"阻止事件冒泡

Prevent：

@click.prevent="open($event)"

阻止預設的動作：e.preventDefault();取消事件的預設的動作

Once :

@click.once="open($event)"

點選只執行1次 e.stopPropagation(),點完阻止事件

鍵盤事件  @keydowun.enter   按鍵後+回車

       @keydowun.a       按鍵後+a

過濾器

{{3.1415926 | number}}

toFixed() 方法可把 Number 四捨五入為指定小數位數的數字。

計算屬性(引用+快取)

 

1. vue例項常用屬性

（1）.data：Vue例項的資料物件

   Components:Vue例項配置區域性註冊元件

（2）.類方法

Computed:計算屬性

      Watch:偵聽屬性

Fiters：過濾器

Methods:Vue例項方法

Render:渲染函式，建立虛擬DOM

（3）.生命週期

Created:在例項建立完成後被立即呼叫，完成初始化操作

Mounted:el掛載到Vue例項上了，開始業務邏輯操作

BeforeDestroy:例項銷燬之前呼叫

1. Vue元件

Props:用於接收來自父元件的資料

Template：元件模板