django模板语言与vue.js冲突问题
方法1:
修改vue.js绑定符
`Vue.config.delimiters = ["[[", "]]"];
方法2:
禁用django模版渲染
{{ vue }}
{% endverbatim %}```
####指令
#####v-text
`<span v-text="msg"></span> 等价于 <span>{{msg}}</span>`
#####v-if
`<div v-if="{{ }}"></div>`根据表达式值的真假判断标签是否存在,触发过渡效果
#####v-show
与v-if视觉效果一致,区别是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>
触发事件
v-bind
class active的更新将取决于数据属性 isActive是否为真值
<div v-bind:class="{ active: isActive }"></div>
缩写
<div :class="{ active: isActive }"></div>
三元表达式动态切换
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
绑定内联样式
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}```
#####v-model
实时传输input内容
<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:{ #数据
message:'hellow vue!!',
list:[
{ text: 'vegetables'},
{ text: 'potato'},
{ text: 'tomato'},
]
},
methods:{ #函数
Name: function(){
something
}
},
computed:{ #监视器
filtered:function(){
}
},
transitions:{ #添加过渡效果
menu:{
enterClass:'bounceInDown',
leaveClass:'bounceOutUp'
},
},
ready:function(){ #首先执行
this.Name()
}
})
</script>
未完待续...