昨天看了vue基础：
{{msg}} v-text v-html
事件：@click
双向绑定 v-model
属性绑定title
计算属性：computed
侦听器：watch
v-if v-show v-for (key值)
局部样式（加scoped） 全局样式
组件间通信：
父组件-》子组件 父组件通过属性传给子组件，子组件通过props接受，
子组件-》 父组件 子组件通过this.$emit()发布订阅， 父组件采用监听的方式，
通过vue-cli写个todolist（只有增删功能）
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of lists"
:content="item"
:index="index"
:key="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from "./components/TodoItem.vue";
export default {
name: "app",
components: {
"todo-item": TodoItem
},
data() {
return {
inputValue: "",
lists: []
};
},
methods: {
handleSubmit() {
this.lists.push(this.inputValue);
this.inputValue = "";
},
handleDelete(index) {
this.lists = this.lists.filter(item => {
return item !== this.lists[index];
});
}
}
};
</script>
<template>
<li @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
props: ['content', 'index'],
methods: {
handleDelete: function(){
this.$emit('delete',this.index)
}
}
}
</script>
<style scoped>
</style>
