-
vue.js引用放在head上可以防止页面渲染时出现抖屏的情况
查看全部 -
样式增加scoped修饰符后作用于当前文件
查看全部 -
node -v 7.10.1
npm -v 5.5.1
查看全部 -
子组件通知父组件事件处理
查看全部 -
父组件处理事件
查看全部 -
自义定事件
查看全部 -
参入索引下标
查看全部 -
每一个也是一个实例 每一个页面由许许多多的实例组成
查看全部 -
组件可以通过传参的方式
来给组件赋值
通过props来接收值
查看全部 -
注释部分为全局组件
对象里为局部组件
查看全部 -
定义一个组件
查看全部 -
实现todo-list删除功能：
<body>
<div id="app">
<div>
<input v-model="inputValue"/>
<button @click="handleSumbit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
//创建一个小的组件todo-item
Vue.component('todo-item', {
props: ['content', 'index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
//子组件的删除
this.$emit('delete',this.index);
}
}
});
new Vue({
el: '#app',
data: {
inputValue:'',
list:[]
},
methods:{
handleSumbit:function(){
this.list.push(this.inputValue);
this.inputValue='';
},
handleDelete:function(index){
alert('要删除吗？');
this.list.splice(index,1);
}
}
});
</script>
</body>
查看全部 -
组件与实例的关系，
每个组件就是一个Vue的实例，每个Vue实例就是由多个组件组成的
<body>
<div id="app">
<div>
<input v-model="inputValue"/>
<button @click="handleSumbit">提交</button>
</div>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:content="item"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props:['content'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
alert('我爱你......')
}
}
}
);
new Vue({
el: '#app',
data: {
inputValue:'',
list:[]
},
methods:{
handleSumbit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
})
</script>
</body>
查看全部 -
写JQ是操作DOM, 而VUE是操作数据
查看全部 -
v-module数据的双向绑定
查看全部
举报