Vue学习笔记

Vue

script中的写法

<script>

var app=new Vue({

  el:"#app",

  data:{

  msg:"Hello"

}

});

</script>

1、显示

<div>{{msg}}</div>

<div v-text="msg"></div>

<div v-html="msg"></div>

2、属性

<div v-bind:title="title">Hello</div>

3、事件

<div v-on:click="clickHandler"></div>

4、双向绑定

<input v-model="name" />

5、计算属性

computed:{

  cal:function{  

      return this.name+" "+this.age

    }

}

6、侦听器

watch:{

  cal:function(){

    this.number++;

  }

}

7、v-if="show"

v-show="show"

v-for="item of list"

8、组件

1) 外部组件

 <todo v-for="(item,index) of list" v-bind:content="item" v-bind:index="index" v-on:delete="handleDelete"></todo>

-------------------------------------

Vue.component("todo", {
props: ['content'],
template: '<li v-on:click="handleClick">{{content}}</li>',

methods: {
handleClick: function () {
this.$emit("delete", this.index);
}
}
});

--------------------

handleDelete: function (index) {
this.list.splice(index, 1);
}

posted @ 2018-07-21 12:37  lunawzh  阅读(103)  评论(0编辑  收藏  举报