日常
1、荣获vue教程一套
2、食堂可以吃了
3、ion-slides 添加分页
<ion-slides pager></ion-slides>
vue 基本语法
<div id="app">
<input type="text" v-model="value">
<button v-on:click="handleClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
var app = new Vue({
el: '#app',
data: {
content: 'hello',
list: [],
value: ''
},
methods: {
handleClick: function () {
this.list.push(this.value);
this.value = '';
}
}
})
vue组件间传值
<div id="app">
<input type="text" v-model="value">
<button @click="handleClick">提交</button>
<ul>
<todo-item :item="item" @delete-i="deleteItem1" :index="index" :key="index" v-for="(item,index) in list">
</todo-item>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
content: 'hello',
list: [],
value: ''
},
methods: {
handleClick: function () {
this.list.push(this.value);
this.value = '';
},
deleteItem1: function () {
console.log('收到')
this.list.splice(index, 1)
}
},
components: {
TodoItem: {
props: ['item', 'index'],
template: '<li @click="delete2">{{item}}</li>',
methods: {
delete2: function () {
console.log(this.index);
this.$emit('delete-i');
}
}
}
}
})
console.log(app.$data.content);
</script>
遇到问题
1、父组件监听事件不能驼峰,只能小写或者‘-’,
因为:HTML属性值不可以大写