-
<!--计算属性和侦听器-->
<div id="root">
姓<input type="text" v-model="firstName"/>
名<input type="text" v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
//计算属性
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName + '' +this.lastName
}
},
//侦听器 是监听某一个数据的变换，一旦数据发生过变换
watch:{
//第一种方法 firstName lastName
// firstName:function(){
// this.count ++
// //就可以在在侦听器里边去做业务逻辑
// },
// lastName:function(){
// this.count ++
// }
//第二种方法 以fullName 更加简洁
fullName:function(){
this.count ++
}
}
})
</script>
查看全部 -
在Vue里 ，每一个Vue组件，都是一个Vue实例
Vue实例有的功能，Vue组件都同样拥有
查看全部 -
<!--属性绑定和双向数据绑定-->
<div id="root">
<!--属性绑定-->
<!--v-bind:简写成：-->
<div v-bind:title="title">heillo world</div>
<!--双向数据绑定-->
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world",
content:"this is content"
}
})
</script>
查看全部 -
<!--属性绑定和双向数据绑定-->
<div id="root">
<!--v-bind:简写成：-->
<div v-bind:title="title">heillo world</div>
</div>
<script>
new Vue({
el:"#root",
data:{
title:"this is hello world"
}
})
</script>
查看全部 -
v-html 不会进行转义，v-text会进行转义
v-on指令可以绑定事件比如（click），可简写为@click，方法写在vue实例中的methods方法里面
<!--给元素绑定事件 v-on：简写@-->
<div @click="handleClick">{{content}}</div>
new Vue({
el:"#root",
data:{
content:"hello"
},
//时间触发后方法写在vue实例里边的methods方法里边
methods:{
handleClick:function(){
//通过content去改变实例里边的数据
this.content = "world"
}
}
})
查看全部 -
handleClick：function（）{
}
结构要记好，handleClick
查看全部 -
v-if="" : 控制DOM存在与否；
v-show="" : 控制DOM显示与否；
v-for="（item, index）of list" ：key="index": 控制循环列表的输出；
（ 意为把 list 数组下的每一个元素赋值给变量名 item ,并把每个元素的下标存到对应的 index 中。PS : key 的值不可重复）
查看全部 -
vue里每一个组建都是实例，反过来，每一个实例也都是一个组建
查看全部 -
v-on 简写 @ 事件绑定
v-bind 简写 : 单向绑定
v-model 双向绑定
查看全部 -
刚刚
查看全部 -
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
查看全部 -
父组件向子组件传值通过属性的形式进行值的传递
子组件向父组件传值：$emit触发事件，当子组件定义了一个事件被父组件监听到，那么父组件就会执行他的方法事件。
查看全部 -
如果一个vue实例里面没有定义template，那么这个实例会把它对应的挂载点下的所有内容当作模板
每一个组件就是一个vue的实例
查看全部 -
组件可以分为全局组件和局部组件
全局组件定义之后可以在模板里的任何地方调用
局部组件需要通过components在实例里进行注册才能使用，vue模板里的属性使用必须要通过props来接收
查看全部 -
父组件向子组件传数据：通过属性的方式
<todo-item :content="item" :index="index"></todo-item>
Vue.component('todo-item',{
props:['content', 'index'],
})
子组件向父组件传数据：如同发布订阅的方式
<todo-item @delete="handleDelete"提前订阅了dalete事件 执行handleDelete方法>
</todo-item>
Vue.component('todo-item',{
methods:{
handlClick:function(){
//向外发布了名为'delete'的事件和list的索引值
this.$emit('delete',this.index)
}
}
})
查看全部
举报