vue.js总结

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>

未完待续...