django模板語言與vue.js沖突問題
方法1：
修改vue.js綁定符
`Vue.config.delimiters = ["[[", "]]"];
方法2：
禁用django模版渲染
{{ vue }}
{% endverbatim %}```
####指令
#####v-text
`<span v-text="msg"></span> 等價(jià)于 <span>{{msg}}</span>`
#####v-if
`<div v-if="{{ }}"></div>`根據(jù)表達(dá)式值的真假判斷標(biāo)簽是否存在，觸發(fā)過渡效果
#####v-show
與v-if視覺效果一致映屋，區(qū)別是v-show是切換display的顯示西篓，v-if是銷毀與重建
#####v-for
<div v-for="item in items">
{{ item.text }}
</div>```
v-on:click
<button v-on:click="doThis"></button>觸發(fā)事件
v-bind
class active的更新將取決于數(shù)據(jù)屬性 isActive是否為真值
<div v-bind:class="{ active: isActive }"></div>
縮寫
<div :class="{ active: isActive }"></div>
三元表達(dá)式動態(tài)切換
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
綁定內(nèi)聯(lián)樣式
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}```
#####v-model
實(shí)時(shí)傳輸input內(nèi)容
<p v-bind:title="message">{{message}}</p>
<input v-model="message" type="text" name="">
data:{message:'hellow vue!!',}
###簡單的格式
<script type="text/javascript">
var vm = new Vue({
el: '#app-1',
data:{ #數(shù)據(jù)
message:'hellow vue!!',
list:[
{ text: 'vegetables'},
{ text: 'potato'},
{ text: 'tomato'},
]
},
methods:{ #函數(shù)
Name: function(){
something
}
},
computed:{ #監(jiān)視器
filtered:function(){
}
},
transitions:{ #添加過渡效果
menu:{
enterClass:'bounceInDown',
leaveClass:'bounceOutUp'
},
},
ready:function(){ #首先執(zhí)行
this.Name()
}
})
</script>
未完待續(xù)...
