vue.js 学习笔记

/*属性*/
标签内的属性都用 :attr="xxx" 的形式 /*模板*/
{{ msg }} -> 绑定数据
{{ *msg }} -> 数据只绑定一次
{{{ msg }}} -> 若数据中带有html标签，则转义输出(在vue2.x已经被废除) /*过滤器*/
{{ 12 | currency 'Y'}} // ￥12 /*交互*/
vue-resource
get:
post:
this.$http.post(url, {param: xxx}, {emulateJSON: true}).then(...)
jsonp:
this.$http.jsonp(url, {word: xxx}, {jsonp: 'cb'}).then(...) /*vue生命周期*/
new Vue 创建实例 生命周期钩子函数：
created: 实例创建后执行
beforeCompile: 编译之前
afterCompil: 编译之后
ready: 文本节点插入到文档中
beforeDestory: 销毁之前
destoryed: 销毁之后 vue2.0 =>
beforeCompile -> created
compiled -> mounted /*解决{{msg}}绑定闪烁问题*/
v-cloak
<div id="box" v-cloak>{{ msg }}</div>
[v-cloak] {
display: none;
} {{msg}} -> v-text
{{{msg}}} -> v-html ( {{{}}} 在2.0已经被废弃) /*computed*/
data: {
a:;
},
computed: {
/*可以放业务逻辑代码，最后要return xx; */
b: function () {
return this.a;
}
} /* vue实例方法 */
var vm = new Vue({...}) vm.$el -> <div id="box"></div>
vm.$el.style.background = 'red';
vm.$data -> data object vm.$mount('#box') /* 手动挂载 */ new Vue({
data: {...}
}).$mount('#box') vm.$options.xx -> 访问自定义属性(方法) vm.$log() -> 查看当前数据的状态 /*解决重复数据*/
<li v-for="value in data" track-by="$index"></li>