18600329666

咨询技术专家

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

Menu

前端软件开发技术VUE使用(第二部分)

来源：未知　时间：2018-41-21　浏览次数：105次

上一部分《前端软件开发技术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);
  }
}
})