-
属性绑定使用>v-bind:title=:title
查看全部 -
v-on:click=@click
查看全部 -
函数里改变data的值使用this.XXX
查看全部 -
给某标签绑定事件：v-on：click
查看全部 -
v-text不会转译
v-html会转译
查看全部 -
Vue挂载点，模板，实例之间的关系
查看全部 -
滴滴，美团都在使用vue.js开发
查看全部 -
scoped为组件增加作用域
查看全部 -
splice删除？查看全部
-
style scoped 的修饰符,只针对组件内容的样式进行作用
查看全部 -
v-for='(item,index) of list' item 是变量
this.$emit("delete",this.index) 子元素和父元素之间通信
查看全部 -
一个文件里就是一个完整的组件
查看全部 -
父组件通过属性如prop向子组件传值，子组件通过发布订阅模式$emit向父组件抛出触发事件名称delete和触发事件list索引值；
父组件通过鉴定对应事件名称@delete触发函数handleDelete,函数通过子组件抛出的索引值对应删除list
<div id="root">
<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>
<script type="text/javascript">
// 全局组件
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index)
}
}
})
// 局部组件
// var TodoItem={template:'<li>item</li>'}
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handleDelete:function(index){
this.list.splice(index,1)
}
}
})
</script>查看全部 -
使用<script>标签引入vue.js最好放在<head>内，防止抖屏。
使用vue.js编程不会有任何DOM的操作，而着重于数据的编写。
查看全部 -
每一个vue组件都是一个vue实例
vue由大量vue实例组成查看全部
举报