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起限制作用域的作用