Vue - fantasy0107/notes GitHub Wiki

Vue Cheatsheet

Instance

var vm = new Vue({
    el: '#app', //指定render 區域
    data: data //資料流
    methods : { //方法寫在這
    	addone() { 
        	...
        }.
    }
})

Instance Property

el 指定render 區域

data 資料流

methods 所有方法

created - 當 instance created 之後 /

mounted - 在 instance mounted之後

computed 可以在 @{{ test }} 做計算 會去呼叫 test 這個 東西

使用時機當需要在 {{ ... }} 做複雜運算

// before :  {{ message.split('').reverse().join('') }}
// after  :  {{ reversedMessage  }}

watch 監看你的 data 值做出改變時必須要相對應改變

使用時機 當值產生改變時相對應得值也必須要改變

//vue instance

data: {
    question: '',
    payment : {
    	value : 10
    }
},
 watch: {
    // whenever question changes, this function will run
    question: function (newValue, oldValue) {
      ...//do something
    },
    'payment.value' : funcction(newValue, oldValue) {
    }
},

Directives

vue 提供的特殊指令
v-xxx

v-if

// 判斷當 true 的時候就顯示

<div v-if='status == true'>
   ...        
</div>

v-show

v-for 迴圈

沒有index

<div v-for="item in items">
    @{{item}}
</div>

有index

<div v-for="(item,index) in items">
	@{{item}}
</div>

v-on

//綁定事件與 vue methods

//v-on:event='' 

v-on:click='createACheck()' //呼叫 method
v-on:click='value = 10' //設定值

v-bind

//綁定屬性 class, style ...

v-bind:class="{'d-none':isNotShow}" // 'className' : vueModelParameter value

//比較好維護的 v-bind:style 是

//vue instance 
data : {
    styles : {
    	
    }
}

v-model

綁定資料
//限制

<textarea> components 

<input v-model="item.value">

小技巧

style 可以寫在 vue instance data 裡

nowIndex: {
    color: '#643F03',
    'border-bottom-width':'10px',
    'border-bottom-color':'#6FC809'
},

其它

使用 JavaScript Expressions

{{ number + 1 }}  
{{ ok ? 'YES' : 'NO' }}  
{{ message.split('').reverse().join('') }}

laravel blade 中用 vue

@{{ vueVariable  }}

v-bind:style 三元運算

v-bind:style= "[condition ? {styleA} : {styleB}]"

<figure :style="[item.main_featured ? {'background': 'url(' + item.main_featured + ') center no-repeat'} : {'background': '#FFF'}]">

解決在new 出 vue instance 前會有變數

// @ {{  app.value  }}

<style type="text/css">
    [v-cloak] {
        display: none;
    }
</style>

<div id='vueInstance' v-cloak> .. </div>

底端

⚠️ **GitHub.com Fallback** ⚠️