Vue2.5入门-3

安装和使用

全局安装vue

npm install --global vue-cli

创建基于webpack模板的新项目

vue init webpack my-project

安装依赖

cd my-project
npm run dev

测试代码

父组件可以通过属性的方式向子组件传值，:content

App.vue

<template>
<div>
 <div>
   <input v-model="inputValue"/>
   <button @click="handleSubmit">提交</button>
 </div>
 <ul>
   <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="handleDelete"></todo-item>
 </ul>
</div>
</template>

<script>
import TodoItem from './components/TodoItem.vue'
export default {
components: {
 'todo-item': TodoItem
},
data () {
 return {
   inputValue: '',
   list: []
 }
},
methods: {
 handleSubmit () {
   this.list.push(this.inputValue)
   this.inputValue = ''
 },
 handleDelete (e) {
   // delete this.list[e]
   this.list.splice(e, 1)
 }
}
}
</script>

<style>

</style>

components/TodoList.vue，子组件可以通过this.$emit向父组件传递事件

<template>
<div @click="handleClick">{{content}}</div>
</template>

<script>
export default {
props: ['content', 'index'],
methods: {
 handleClick () {
   this.$emit('delete', this.index)
 }
}
}
</script>

<style scoped>

</style>

全局样式与局部样式

scoped起限制作用域的作用