18600329666

咨询技术专家

扫一扫
与技术专家在线沟通

Menu
前端软件开发技术VUE使用(第二部分)
上一部分《前端软件开发技术VUE使用》主要介绍了vue基础使用,本文主要讲解,属性值相关,以及组件,vue子实例与父实例的自定义事件监听,传值,及自定义组件
六、vue中的属性值的绑定和属性数据值的双向绑定
  • 1.html元素属性值使用data数据(插值表达式无法实现,插值表达式只实用与内容)v-bind:属性=“dataname”的使用,v-bind:tilte="tiltessss"或者:title="tiltessss",引号中的内容实际是js内容可以写js语句
<div id="root" ><div v-bind:tilte="tiltessss">dddd</div></div>
new vue ({
el:"#root"
data:{
tiltessss:"is ffffff"
}
})
  • 2.数据双向绑定v-model=“values”,是指html元素(如input)属性值改变vue data中的值改变,vue data中的值改变则html元素属性值,
<div id="root" >
<input v-model="content">
<div >{{content}}</div>
</div>
new vue ({
el:"#root"
data:{
content:"dddd"
}
})
七、计算属性(computed)与侦听器
1.计算属性,computed属性用于定义几个data中的数据计算后返回到模板中的一个数据,具体做法是通过定义变量名=方法(方法返回计算后的值),在模板中通过变量名调用,computed是计算后数据的集合,vue主要工作是处理前台数据问题,computed计算属性的值是具有缓存功能的,当参与计算的某个值发生变化是才重新计算,否则不进行重新计算
<div id="root" >
姓 <input v-model="firstname">
名 <input v-model="lastname">
<div >{{fullname}}</div>
<div >{{count}}</div>
</div>
new vue({
el:"#root"
data:{
firstname:"",
lastname:"",
count:0
},
computed:{
fullname:function(){
return firstname+" "+lastname;
}
},
watch:{
firstname:function(){
count++
}
}
})
2.侦听器,vue中监听data数据或"计算属性"变动的属性,使用watch属性,也可与用于计算属性值得监听
八,vue组件component的使用
1.全局组件
<div id="app">
<div></div>
<global_zj></global_zj>
<zj></zj>
</div>
vue.component("global_zj",{
template:"<li>ddddd</li>"
})
var zj = {
template:"<li>zjzjzjzjzz</li>"
}
app= new Vue({
el:"#app" ,
component:{
zj:zj
}
})
2.局部组件,如上,局部组件,需要在vue实例中注册
vue组件也是vue实例,是vue实例的子实例,组件也可以定义mehods方法属性等,子实例与父实例的属性与数据不能共用,必须通过发送事件信号的方式处理机
3.vue组件传值,在组件元素节点中使用定义属性的方式赋值,在组件中使用props数组的形式接收传来的参数,在组件模板中使用插值表达式显示输出
4.子实例(组件)与vue实例通信
1)子实例(组件中)绑定方法并发送自定义事件
this.$emit("zdyff",this.index).,zdyff自定义事件的名称,this.index为传值
2)在组件元素节点(如global_zj)中监听之(@zdyff=“xx”)
3)在父实例中定义xx方法并实现之
<div id="app5">
       <div></div>
  <global_zj v-for="(itm,index) of contents" :content="itm"  :index="index" @zdyff="zdyfffff"></global_zj>     
</div>
//全局组件
Vue.component("global_zj",{
     props:["content","index"],
     template:"<li  @click='ccclc'>{{content}}</li>",
methods:{
    ccclc:function(){
   this.$emit("zdyff",this.index)//发送自定义事件,在组件元素节点中监听之
}
}
})
app5 = new Vue({
el:"#app5",
data:{
   contents:["fffffffff","aaaaaaaa","bbbbbbbb","cccccccc"]
},
methods:{
  zdyfffff:function(index){
    this.contents.splice(index,1);
  }
}
})