-
v-on:=@
查看全部 -
v-on:click="handleClick"
methods:{
handleClick:function(){
alert(123)
}
}
查看全部 -
v-on:click="handleClick"
methods:{
handleClick:function(){
this.content="world"
}
}
查看全部 -
vue-cli中data是一个具有返回值的函数，在html中使用是一个属性值
查看全部 -
父组件像子组件传值使用定义属性的方式，子组件向父组件传值使用发布订阅的方式。
查看全部 -
不定义模板template，则会从挂载点加载模板
查看全部 -
没一个component 都是一个Vue实例，包含所有属性
查看全部 -
实现todolist的删除功能：
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
<ul>
<todo-item
v-for="(item,index) of list"
:key="index"
:msg="item"//父组件通过属性传值给子组件
:index="index"//传参，数据下标值
@delete="handleDelete"//订阅delete方法(监听delete方法)，触发时执行父组件handleDelete方法
></todo-item>
</ul>
</div>
</div>
实例：
var TODOITEM = {//每个组件都是一个实例
props:['msg','index'],//接收参数
template:"<li @click='handleClick'>{{msg}}</li>",//使用参数
methods:{
handleClick:function(){
this.$emit('delete',this.index)//发布delete方法，通知父组件删除本实例，传参：本实例在父组件的下标值
}
}
}
new Vue({
el:"#root",
components:{//局部组件需要先在实例注册才能在实例中使用
"todo-item":TODOITEM
},
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete:function(index){//父组件删除子组件想删除的数据
this.list.splice(index,1)
}
}
})
查看全部 -
组件与实例的关系：
var TODOITEM = {//每个组件都是一个实例
props:['msg'],//接收参数
template:"<li @click='handleClick'>{{msg}}</li>",//使用参数
methods:{
handleClick:function(){
alert("hello")
}
}
}
查看全部 -
TODOLIST组件拆分:
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
<ul>
<todo-item//组件名称
v-for="(item,index) of list"
:key="index"
:msg="item"//传参，参数名msg，值item
></todo-item>
</ul>
</div>
</div>
实例：
/*Vue.component("todo-item",{//全局组件，定义好了就可以在任意模板直接用
props:['msg'],//接收参数
template:"<li>{{msg}}</li>"//使用参数
})*/
var TODOITEM = {//定义局部组件
props:['msg'],//接收参数
template:"<li>{{msg}}</li>"//使用参数
}
new Vue({
el:"#root",
components:{//局部组件需要先在实例注册才能在实例中使用
"todo-item":TODOITEM
},
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
查看全部 -
TODOLIST
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
</div>
实例：
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
查看全部 -
点击显示当前内容
查看全部 -
<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"
>
</todo-item>
</ul>
</div>
<script src="vue.js"></script>
<script>
Vue.component('todo-item',{
props:['content'],
template:'<li>{{content}}</li>'
})
new Vue({
el:'#root',
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function() {
this.list.push(this.inputValue);
this.inputValue=''
}
}
})
</script>
查看全部 -
v-if,v-show,v-for：
<div id="root">
<div v-if="vif">hello world</div>//v-if控制dom存在与否,false则直接从dom树移除
<div v-show="show">this is vue</div>//v-show控制dom显示与否，false则display=none，但还在dom树上
<button @click="handlerClick">{{msg}}</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>//v-for循环展示数据，表示遍历list，将value放到item，下标放到index，key是为了提升性能
</div>
实例：
new Vue({
el:"#root",
data:{
msg:"cilck",
vif:true,
show:false,
list:[1,2,3]
},
methods:{
handlerClick:function(){
this.vif=!this.vif;//值取反
this.show=!this.show;//值取反
}
}
})
查看全部 -
计算属性与侦听器：
<div id="root">
姓：<input v-model="firstName">//v-model双向数据绑定
名：<input v-model="lastName">//v-model双向数据绑定
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
实例：
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{//计算属性，只有数据发生变化才会重新计算，未发生变化用之前计算结果的缓存值来展示
fullName:function(){
return this.firstName+' '+this.lastName
}
},
watch:{//侦听器，侦听数据是否发生变化
fullName:function(){
this.count++
}
}
})
查看全部
举报