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);

}