入门笔记,vue老爹和儿子组件间传值

Vue和微信小程序的区别、比较

2018/08/04 · 基本功技艺 ·
Vue,
小程序

原著出处:
卖女孩的大火柴   

写了vue项目和小程序,发掘互相有过多同样之处,在此想计算一下两岸的共同点和界别。

vue init webpack-simple template

# vuejs tutorial

我们在用vue写后台项目时,分页功效往往是不可缺少的,找了漫长也未尝找到,所以就融洽写了一个,效果如下:

1、生命周期

先贴两张图:

cd template

![vue-logo](img/logo.png)

亚洲必赢官网 1

vue生命周期

亚洲必赢官网 2

npm i


要害代码如下

小程序生命周期

亚洲必赢官网 3

比较,小程序的钩子函数要简明得多。

vue的钩子函数在跳转新页面时,钩子函数都会接触,然而小程序的钩子函数,页面分裂的跳转格局,触发的钩并差别样。

  • onLoad: 页面加载
    二个页面只会调用1次,能够在 onLoad 中获得展开当前页面所调用的
    query 参数。
  • onShow: 页面呈现
    历次张开页面都会调用2回。
  • onReady: 页面初次渲染实现
    二个页面只会调用2遍,代表页面已经计划妥帖,能够和视图层举办交互。
    对分界面包车型大巴安装如wx.setNavigationBarTitle请在onReady随后设置。详见生命周期
  • onHide: 页面隐藏
    navigateTo或底层tab切换时调用。
  • onUnload: 页面卸载
    redirectTonavigateBack的时候调用。

npm run dev

## 搭建案例演示自动刷新意况

第3说下思路:

数量请求

在页面加载请求数据时,两者钩子的选拔有个别看似,vue相似会在created或者mounted中呼吁数据,而在小程序,会在onLoad或者onShow中呼吁数据。

1、子组件访问父组件的数码

成立二个 `package.josn` 文件:

一.建一个paper.vue的组件,用来存放分页成效

二、数据绑定

VUE:vue动态绑定一个变量的值为因素的某部属性的时候,会在变量前边加上冒号:,例:

<img :src=”imgSrc”/>

1
<img :src="imgSrc"/>

小程序:绑定有些变量的值为成分属性时,会用几个大括号括起来,即便不加括号,为被感到是字符串。例:

<image src=”{{imgSrc}}”></image>

1
<image src="{{imgSrc}}"></image>

 

方法一 :子组件直接待上访问父组件的数量

“`bash
npm init -y
“`

2.在代码里分为template部分,script部分,style部分

三、列表渲染

一直贴代码,两者还是略微相似
vue:

JavaScript

<ul id=”example-1″> <li v-for=”item in items”> {{
item.message }} </li> </ul> var example1 = new Vue({ el:
‘#example-1’, data: { items: [ { message: ‘Foo’ }, { message: ‘Bar’ }
] } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
 
var example1 = new Vue({
  el: ‘#example-1’,
  data: {
    items: [
      { message: ‘Foo’ },
      { message: ‘Bar’ }
    ]
  }
})

小程序:

JavaScript

Page({ data: { items: [ { message: ‘Foo’ }, { message: ‘Bar’ } ] } })
<text wx:for=”{{items}}”>{{item}}</text>

1
2
3
4
5
6
7
8
9
10
Page({
  data: {
    items: [
      { message: ‘Foo’ },
      { message: ‘Bar’ }
    ]
  }
})
 
<text wx:for="{{items}}">{{item}}</text>

 

父组件在调用子组件时,绑定想要获取的父组件中的数据

安装 `browser-sync`:

三.用到vue老爹和儿子组件传值,父组件通过prop传值个子组件,子组件通过$emit将分页index传送给父组件,在父组件中式点心击子组件的分页时,每便请求列表,利用子组件传回的index实行数量请求

④、显示与隐藏元素

vue中,使用v-ifv-show调整成分的来得和藏身

小程序中,使用wx-ifhidden支配成分的展现和隐身

 

在子组件内部,使用 props 选项证明获得的数据,即收取来自父组件中的数据

“`bash
# npm install –save-dev browser-sync
# 将 browser-sync 包保存到支付信赖中
# 就足以施行 npm install 的时候进入 –production 选项不安装那个包
npm i -D browser-sync
“`

四.现实分页操作都在paper.vue中开展操作

伍、事件管理

vue:使用v-on:event绑定事件,可能选择@event绑定事件,比方:

<button v-on:click=”counter += 1″>Add 一</button> <button
v-on:click.stop=”counter+=一”>Add一</button> //阻止事件冒泡

1
2
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button>  //阻止事件冒泡

小程序中,全用bindtap(bind+event),或者catchtap(catch+event)绑定事件,比如:

<button bindtap=”noWork”>今日不上班</button> <button
catchtap=”noWork”>后天不上班</button> //阻止事件冒泡

1
2
<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button>  //阻止事件冒泡

 

创造如下目录

在 package.json 文件中投入以下内容:

五.八个代码能够直接粘贴复制用,获取列表的数据依赖自身必要开始展览更换就能够

6、数据双向绑定

亚洲必赢官网 4

“`json
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″,
“start”: “browser-sync start –server –directory –files
\”code/*.html\””
}
“`

 

1.设置值

vue中,只必要再表单要素上助长v-model,然后再绑定data中对应的一个值,当表单成分内容发生变化时,data中对应的值也会相应改换,那是vue非常nice的一点。

JavaScript

<div id=”app”> <input v-model=”reason” placeholder=”填写理由”
class=’reason’/> </div> new Vue({ el: ‘#app’, data: {
reason:” } })

1
2
3
4
5
6
7
8
9
10
<div id="app">
    <input v-model="reason" placeholder="填写理由" class=’reason’/>
</div>
 
new Vue({
  el: ‘#app’,
  data: {
   reason:”
  }
})

但是在小程序中,却尚无这几个效果。那怎么做呢?

当表单内容发生变化时,会触公布单成分上绑定的方式,然后在该措施中,通过this.setData({key:value})来将表单上的值赋值给data中的对应值。

上面是代码,能够感受一下:

JavaScript

<input bindinput=”bindReason” placeholder=”填写理由” class=’reason’
value='{{reason}}’ name=”reason” /> Page({ data:{ reason:” },
bindReason(e) { this.setData({ reason: e.detail.value }) } })

1
2
3
4
5
6
7
8
9
10
11
12
<input bindinput="bindReason" placeholder="填写理由" class=’reason’ value='{{reason}}’ name="reason" />
 
Page({
data:{
    reason:”
},
bindReason(e) {
    this.setData({
      reason: e.detail.value
    })
  }
})

当页面表单元素许多的时候,更动值正是1件体力活了。和小程序一比较,vuev-model大概爽的不要不要的。

App.vue 中写入

开采终端,运营开拓预览服务:

——子组件代码———————————————–

2.取值

vue中,通过this.reason取值

小程序中,通过this.data.reason取值

亚洲必赢官网 5

 

<template>

“`bash
npm start
“`

<template>
<div class=”paper”>
<nav aria-label=”Page navigation”>
<ul class=”pagination”>
<li>
<span class=”pageInfo”>共{{allPage}}条数据</span>
</li>
<li>
<a href=”#” aria-label=”Previous” v-show=”current != 1″
@click=”current–&&jumpcurrent– && goto(current)” >
<span aria-hidden=”true”>上一页</span>
</a>
</li>
<li :class=”{‘active’:current == index}” v-for=”index in
pages”><a href=”#”
@click=”goto(index)”>{{index}}</a></li>
<li>
<a href=”#” aria-label=”Next” v-show=”total != current && total != 0
” @click=”current++ && jumpcurrent ++ && goto(current)”>
<span aria-hidden=”true”>下一页</span>
</a>
</li>
<li>
<a href=”#” style=”margin-left:10px;border:none;padding:2px
0;”>第</a>
<a href=”#” style=”padding:0;”>
<input class=”jumpPage” type=”text” v-model=”jumpcurrent”>
</a>
<a href=”#” style=”border:none;padding:2px 0;”>页</a>
</li>
<li>
<a href=”#”
style=”margin-left:10px;background:#337AB7;color:#fff;border-color:#337AB7;”
@click=”goto(jumpcurrent)”>跳转</a>
</li>
</ul>
</nav>
</div>
</template>

七、绑定事件传参

vue中,绑定事件传参挺简单,只须求在接触事件的措施中,把须求传递的多少作为形参传入就足以了,比如:

JavaScript

<button @click=”say(‘明日不上班’)”></button> new Vue({ el:
‘#app’, methods:{ say(arg){ consloe.log(arg) } } })

1
2
3
4
5
6
7
8
9
10
<button @click="say(‘明天不上班’)"></button>
 
new Vue({
  el: ‘#app’,
  methods:{
    say(arg){
    consloe.log(arg)
    }
  }
})

小程序中,不可能直接在绑定事件的法门中传播参数,必要将参数作为属性值,绑定到成分上的data-属性上,然后在格局中,通过e.currentTarget.dataset.*的方法获得,从而做到参数的传递,很麻烦有未有…

JavaScript

<view class=’tr’ bindtap=’toApprove’
data-id=”{{item.id}}”></view> Page({ data:{ reason:” },
toApprove(e) { let id = e.currentTarget.dataset.id; } })

1
2
3
4
5
6
7
8
9
<view class=’tr’ bindtap=’toApprove’ data-id="{{item.id}}"></view>
Page({
data:{
    reason:”
},
toApprove(e) {
    let id = e.currentTarget.dataset.id;
  }
})

亚洲必赢官网 6

 

    <div class=”hello”>


<script>
export default {
name: ‘paper’,
props:[‘total’,’allPage’],
data () {
return {
jumpcurrent:壹,//跳转页计数
current:一,//突显页计数
currentnum:伍,//导航总显得个数
}
},
watch:{
current:function(old,newVal){
}
},
computed:{
pages:function(){
var pag = [];
if( this.current < this.currentnum ){ //固然当前的激活的项
小于要彰显的条数
//总页数和要显示的条数这么些大就展现多少条
var i = Math.min(this.currentnum,this.total);
while(i){
pag.unshift(i–);
}
}else{ //当前页数大于展现页数了
var middle = this.current – Math.floor(this.currentnum / 二),//从何地开端
i = this.currentnum;
if( middle > (this.total – this.currentnum) ){
middle = (this.total – this.currentnum) + 1
}
while(i–){
pag.push( middle++ );
}
}
return pag
}
},
methods:{
goto:function(index){
if(this.jumpcurrent > this.total){
this.jumpcurrent = this.current;
swal({
title:”超出最大页码”,
text: “二秒后活动关闭。”,
icon:”error”,
timer: 2000,
buttons:false
});
return;
}else{
this.jumpcurrent = index;
this.current = index;
};
this.$emit(“change”,index);
}
}
}
</script>

捌、老爹和儿子组件通信

        <h3>我是 App 父组件</h3>

## vuejs 介绍

<style scoped>
.pagination {
margin: 0;
}
.pagination>li>a {
background: none;
/*background:rgba(211,220,230,.5);*/
color:#555;
padding: 2px 10px;
margin:0 2px;
border-color: #99A0A8;
border-radius: 0;
-webkit-border-radius:0;
-moz-border-radius:0;
}
/*.active {
background-color: #337AB7;
color:#fff;
}*/
.pagination>.active>a, .pagination>.active>a:focus,
.pagination>.active>a:hover, .pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover{
background-color: #337AB7;
color:#f8f8f8;
border-color: #337AB7;
}
.jumpPage {
width: 25px;
text-align: center;
background:none;
border:none;
padding:2px 0;
}
.pageInfo {
padding:2px 10px;
background:none ;
border:none;
color:#444;
}
.pageInfo:hover{
background:none;
border:none;
color:#444;
}
</style>

1.子零部件的选用

vue中,需要:

  1. 编写子组件
  2. 在必要选拔的父组件中通过import引入
  3. vuecomponents中注册
  4. 在模板中使用

 

//子组件 bar.vue <template> <div class=”search-box”> <div
@click=”say” :title=”title” class=”icon-dismiss”></div>
</div> </template> <script> export default{ props:{
title:{ type:String, default:” } } }, methods:{ say(){
console.log(‘今天不上班’); this.$emit(‘helloWorld’) } } </script>
// 父组件 foo.vue <template> <div class=”container”> <bar
:title=”title” @helloWorld=”helloWorld”></bar> </div>
</template> <script> import Bar from ‘./bar.vue’ export
default{ data:{ title:”作者是标题” }, methods:{ helloWorld(){
console.log(‘小编接受到子组件传递的事件了’) } }, components:{ Bar }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
//子组件 bar.vue
<template>
  <div class="search-box">
    <div @click="say" :title="title" class="icon-dismiss"></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:”
      }
    }
},
methods:{
    say(){
       console.log(‘明天不上班’);
       this.$emit(‘helloWorld’)
    }
}
</script>
 
// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title" @helloWorld="helloWorld"></bar>
  </div>
</template>
 
<script>
import Bar from ‘./bar.vue’
export default{
data:{
    title:"我是标题"
},
methods:{
    helloWorld(){
        console.log(‘我接收到子组件传递的事件了’)
    }
},
components:{
    Bar
}
</script>

小程序中,需要:

  1. 编写子组件
  2. 在子组件的json文件中,将该文件宣称为组件
{ "component": true }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146bfc908165305-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146bfc908165305-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146bfc908165305-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146bfc908165305-1" class="crayon-line">
{
</div>
<div id="crayon-5b8f6a1146bfc908165305-2" class="crayon-line crayon-striped-line">
  &quot;component&quot;: true
</div>
<div id="crayon-5b8f6a1146bfc908165305-3" class="crayon-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 在须要引进的父组件的json文件中,在usingComponents填写引进组件的零件名以及路线
"usingComponents": { "tab-bar": "../../components/tabBar/tabBar" }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146bff494634246-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146bff494634246-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146bff494634246-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146bff494634246-1" class="crayon-line">
&quot;usingComponents&quot;: {
</div>
<div id="crayon-5b8f6a1146bff494634246-2" class="crayon-line crayon-striped-line">
    &quot;tab-bar&quot;: &quot;../../components/tabBar/tabBar&quot;
</div>
<div id="crayon-5b8f6a1146bff494634246-3" class="crayon-line">
  }
</div>
</div></td>
</tr>
</tbody>
</table>
  1. 在父组件中,直接引进就能够
&lt;tab-bar currentpage="index"&gt;&lt;/tab-bar&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146c02109159426-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146c02109159426-1" class="crayon-line">
&lt;tab-bar currentpage=&quot;index&quot;&gt;&lt;/tab-bar&gt;
</div>
</div></td>
</tr>
</tbody>
</table>


具体代码:  


// 子组件 &lt;!--components/tabBar/tabBar.wxml--&gt; &lt;view
class='tabbar-wrapper'&gt; &lt;view class='left-bar
{{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'&gt;
&lt;text class='iconfont icon-shouye'&gt;&lt;/text&gt;
&lt;view&gt;首页&lt;/view&gt; &lt;/view&gt; &lt;view
class='right-bar {{currentpage==="setting"?"active":""}}'
bindtap='jumpToSetting'&gt; &lt;text class='iconfont
icon-shezhi'&gt;&lt;/text&gt; &lt;view&gt;设置&lt;/view&gt;
&lt;/view&gt; &lt;/view&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f6a1146c06935082908-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6a1146c06935082908-12">
12
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6a1146c06935082908-1" class="crayon-line">
// 子组件
</div>
<div id="crayon-5b8f6a1146c06935082908-2" class="crayon-line crayon-striped-line">
&lt;!--components/tabBar/tabBar.wxml--&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-3" class="crayon-line">
&lt;view class='tabbar-wrapper'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-4" class="crayon-line crayon-striped-line">
  &lt;view class='left-bar {{currentpage===&quot;index&quot;?&quot;active&quot;:&quot;&quot;}}' bindtap='jumpToIndex'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-5" class="crayon-line">
    &lt;text class='iconfont icon-shouye'&gt;&lt;/text&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-6" class="crayon-line crayon-striped-line">
    &lt;view&gt;首页&lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-7" class="crayon-line">
  &lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-8" class="crayon-line crayon-striped-line">
  &lt;view class='right-bar {{currentpage===&quot;setting&quot;?&quot;active&quot;:&quot;&quot;}}' bindtap='jumpToSetting'&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-9" class="crayon-line">
    &lt;text class='iconfont icon-shezhi'&gt;&lt;/text&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-10" class="crayon-line crayon-striped-line">
    &lt;view&gt;设置&lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-11" class="crayon-line">
  &lt;/view&gt;
</div>
<div id="crayon-5b8f6a1146c06935082908-12" class="crayon-line crayon-striped-line">
&lt;/view&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

       
<h4>访问本身的数量:{{msg}},{{name}},{{user.id}}</h四>


 

2.父亲和儿子组件间通讯

        <hr>

## 安装

 

vue

父组件向子组件传递数据,只须要在子组件通过v-bind盛传三个值,在子组件中,通过props接受,就可以到位多少的传递,示例:

// 父组件 foo.vue <template> <div class=”container”> <bar
:title=”title”></bar> </div> </template>
<script> import Bar from ‘./bar.vue’ export default{ data:{
title:”作者是题目” }, components:{ Bar } </script> // 子组件bar.vue
<template> <div class=”search-box”> <div :title=”title”
></div> </div> </template> <script> export
default{ props:{ title:{ type:String, default:” } } } </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 父组件 foo.vue
<template>
  <div class="container">
    <bar :title="title"></bar>
  </div>
</template>
<script>
import Bar from ‘./bar.vue’
export default{
data:{
    title:"我是标题"
},
components:{
    Bar
}
</script>
 
// 子组件bar.vue
<template>
  <div class="search-box">
    <div :title="title" ></div>
  </div>
</template>
<script>
export default{
props:{
    title:{
       type:String,
       default:”
      }
    }
}
</script>

子组件和父组件通讯能够经过this.$emit将艺术和数目传递给父组件。

        <!– 1. 在调用子组件时,绑定想要获取的父组件中的数据 –>

– Vue.js 不帮忙 IE捌 及其以下版本,因为 Vue.js 使用了 IE捌 不可能效仿的
ECMAScript 伍 天性

——父组件调用——————————————————————-

小程序

父组件向子组件通讯和vue类似,但是小程序尚无通过v-bind,而是直接将值赋值给二个变量,如下:

<tab-bar currentpage=”index”></tab-bar> 此处,
“index”就是要向子组件传递的值

1
2
3
<tab-bar currentpage="index"></tab-bar>
 
此处, “index”就是要向子组件传递的值

在子组件properties中,接收传递的值

properties: { // 弹窗标题 currentpage: { // 属性名 type: String, //
类型(必填),方今接受的品类包蕴:String, Number, Boolean, Object,
Array, null(表示大4档案的次序) value: ‘index’ //
属性开端值(可选),即便未内定则会依赖项目选择一个 } }

1
2
3
4
5
6
7
properties: {
    // 弹窗标题
    currentpage: {            // 属性名
      type: String,     // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: ‘index’     // 属性初始值(可选),如果未指定则会根据类型选择一个
    }
  }

子组件向父组件通讯和vue也很接近,代码如下:

//子组件中 methods: { // 传递给父组件 cancelBut: function (e) { var that
= this; var my伊芙ntDetail = { pickerShow: false, type: ‘cancel’ } //
detail对象,提须要事件监听函数 this.trigger伊芙nt(‘myevent’,
my伊芙ntDetail) //myevent自定义名称事件,父组件中运用 }, } //父组件中
<bar bind:myevent=”toggleToast”></bar> // 获取子组件信息toggleToast(e){ console.log(e.detail) }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//子组件中
methods: {  
    // 传递给父组件
    cancelBut: function (e) {
      var that = this;
      var myEventDetail = { pickerShow: false, type: ‘cancel’ } // detail对象,提供给事件监听函数
      this.triggerEvent(‘myevent’, myEventDetail) //myevent自定义名称事件,父组件中使用
    },
}
 
//父组件中
<bar bind:myevent="toggleToast"></bar>
 
// 获取子组件信息
toggleToast(e){
    console.log(e.detail)
}

        <Hello :message=”msg” :name=”name”
:user=”user”></Hello>

  • 各种版本的翻新日志见:
  • 独立 js 文件
  • 开辟版本(未压缩):
  • 生育版本(压缩):
  • CDN:
  • NPM: `npm install vue`
  • Bower: `bower install vue`
  • 兼容 AMD 规范
  • 独自下载版本或通过 Bower 安装的版本已用 UMD 包装,因而它们得以平素作为
    速龙 模块。

<template>

要是父组件想要调用子组件的法子

vue会给子组件增加1个ref属性,通过this.$refs.ref的值便足以获得到该子组件,然后便可以调用子组件中的任性方法,举例:

//子组件 <bar ref=”bar”></bar> //父组件
this.$ref.bar.子组件的格局

1
2
3
4
5
//子组件
<bar ref="bar"></bar>
 
//父组件
this.$ref.bar.子组件的方法

小程序是给子组件增多id或者class,然后通过this.selectComponent找到子组件,然后再调用子组件的主意,示例:

//子组件 <bar id=”bar”></bar> // 父组件
this.selectComponent(‘#id’).syaHello()

1
2
3
4
5
//子组件
<bar id="bar"></bar>
 
// 父组件
this.selectComponent(‘#id’).syaHello()

小程序和vue在这一点上太相像了,有木有。。。
亚洲必赢官网 7

 

    </div>


  <div class=”user”>

九、废话

还有大多地方没写,之后再逐月加上、精简。认为本人写的有些冗余,大佬勿喷!!!
壹旦认为有帮衬,希望支持点个赞和收藏

亚洲必赢官网 8

1 赞 2 收藏
评论

亚洲必赢官网 9

</template>

## Vue 实例

    <div class=”main BR”>

<script>

– 每种 Vue.js 应用都以通过构造函数 Vue 创建的

      <div class=”main-header”><img class=”main-angle”
src=”../../assetsngle.png” alt=””>用户管理</div>

// 引入 Hello 组件

  • 在实例化 Vue
    时,需求传入四个精选对象,它能够涵盖数据、模板、挂载成分、方法、生命周期钩子等选用
  • data: 属性数据
  • computed: 总括属性
  • methods: 方法
  • el: 挂载点
  • directives: 自定义指令
  • filters: 自定义过滤器
  • 整整摘取可以在 API 文书档案中查看:

      <div class=”mainTitle”><button type=”button” class=”btn
btn-primary addbtn” data-toggle=”modal”
data-target=”#addModal”>新扩充用户</button></div>

import Hello from ‘./assets/components/Hello.vue’

– 实例选项:data

      <div class=”tableWrap”>

export default {

  • [选项/数据 – data]()
  • [深深响应式原理]()
  • 效益:遵照视图抽象数据模型
  • 只顾:视图中接纳的多寡必须在 data 中起初化
  • 各种 VUe 实例都会代理其 data 对象里富有的性质
    * 也能够透过 vue 实例的 $data 属性访问 data 中的数码
    * 建议:借使要利用 vm 读取或涂改 data 中的数据,提议加上 vm.$data
    去做客
  • 唯有被开始代理的性质是响应式的
    * 假如是在实例成立之后增加新的质量到实例上,它不会触发视图更新
  • Vue 不允许在已经创办的实例上动态增进新的根级响应式属性
  • Vue 不可能检查测试到目标属性的动态增进或删除
  • 也便是说动态增进或删除的目标属性不是响应式的
  • 假设期望动态拉长和删除对象的天性是响应式的则要求经过:
    * `Vue.set( object, key, value )`
    * 或 `vm.$set( object, key, value )`
  • 万1剔除对象属性是响应式的:
    * `Vue.delete( object, key )`
    * 或 `vm.$delete( object, key )`

        <div class=”table-responsive”>

  data(){

– 实例选项:methods

          <table class=”table BR”>

    return {

  • 效益:为视图交互提供行为函数
  • 能够在作为函数中经过 `this` 访问 data 中的数据分子
  • 小心:methods 中的行为函数不要写箭头函数
    * 因为如此会转移内部 this 的针对性

            <thead>

      msg:’父组件’,

– 实例属性

              <tr>

      name:’tom’,

  • $data
    * Vue 实例观望的数量对象。Vue 实例代理了对其 data 对象属性的造访。
  • $el
    * Vue 实例使用的根 DOM 成分

                <th style=”width:60px;”>序号</th>

      age:’22’,

– 实例方法/数据

                <th>用户别名</th>

      user:{

  • $watch
  • $set Vue.set 的别名
  • $delete Vue.delete 的别名

                <th>手机号</th>

        id:1234,


                <th>用户剧中人物</th>

        userName:’Jack’

## 模板语法

                <th>用户景况</th>

      }

### 插值

                <th style=”width:200px;”>操作</th>

    }

#### 文本

              </tr>

  },

– 响应插值:

            </thead>

  // 注册 Hello 组件

  • `<span>Message: {{ msg }}</span>`
  • 留神: Mustache 语法不可能在 HTML 属性中央银行使,应利用 `v-bind` 指令
  • 2回性插值:
  • `<span v-once>This will never change: {{ msg
    }}</span>`
  • 留意:会潜移默化该节点及里面节点有所的绑定

            <tbody>

  components:{

#### 纯 HTML

              <tr v-for=”(item,index) in userList”>

    Hello

双大括号会将数听他们讲明为纯文本,而非 HTML 。为了输出真正的 HTML
,你供给动用 v-html 指令:

                <td scope=”row”>{{index+1}}</td>

  }

“`html
<div v-html=”rawHtml”></div>
“`

                <td>{{item.loginname}}</td>

}

– 为啥不直接出口 HTML

                <td>{{item.phone}}</td>

</script>

  • 什么是 XSS 攻击:跨站脚本攻击
  • 后天要么后后天补课

                <td>{{item.name}}</td>

Hello.vue 文件中写入

#### 属性

                <td>{{item.name}}</td>

<template>

**留意:Mustache 不可能在 HTML 属性中利用,应采纳 v-bind 指令:**

                <td>

    <div class=”hello”>

“`html
<div v-bind:id=”dynamicId”></div>
“`

                  <button type=”button” class=”btn btn-info tabBtn”
@click=”lookMain(item)” data-toggle=”modal”
data-target=”#lookModal”>详情</button>

        <h3>我是 hello 子组件</h3>

那对布尔值的性质也实惠 —— 假若基准被求值为 false 的话该属性会被移除:

                  <button type=”button” class=”btn btn-success
tabBtn”>编辑</button>

        <!– 在页面中一向渲染就可以 –>

“`html
<button
v-bind:disabled=”someDynamicCondition”>Button</button>
“`

                  <button type=”button” class=”btn btn-danger tabBtn”
@click=”deleteInfo(item)”>删除</button>

        <h肆>访问父组件中的数据:
{{message}},{{name}},{{user.id}}</h四>

#### 使用 JavaScript 表达式

                </td>

    </div>

Vue.js 都提供了截然的 JavaScript 表明式协理:

              </tr>

</template>

“`html
{{ number + 1 }}

            </tbody>

<script>

{{ ok ? ‘YES’ : ‘NO’ }}

          </table>

export default {

{{ message.split(”).reverse().join(”) }}

        </div>

    // 二. 在子组件内部,使用 props
选项注脚获得的数额,即采纳来自父组件中的数据

<div v-bind:id=”‘list-‘ + id”></div>
“`

      </div>

    props:[‘message’,’name’,’user’]

这几个表明式会在所属 Vue 实例的数量功能域下作为 JavaScript 被解析。
有个限制正是,种种绑定都只能分包单个表明式,所以下边包车型大巴例子都不会一蹴而就:

      <div class=”mainPage”>

}

“`html
<!– 那是话语,不是表明式 –>
{{ var a = 1 }}

        <Paper :total=”total” :allPage=”allpage”
v-on:change=”changePage”></Paper>

</script>

<!– 流动调查整也不会收效,请使用伊利表达式 –>
{{ if (ok) { return message } }}
“`

      </div>

末段效果:

### 指令

    </div>

亚洲必赢官网 10

### Vue 内置指令

 

打响访问到父组件的数额

– v-text

    <!–新扩展弹窗–>

方法二 :为组件的 prop 钦定 验证 规则,假使传入的数目不符合须求,Vue
会发出警示

  • 和 {{}} 效果是如出壹辙
  • 但是 {{}} 会闪烁
  • 化解方法正是选取 v-text 绑定数据
  • 倘诺又想用 {{}}} 还索要防止闪烁
  • 使用 v-cloak 处理
  • v-html
  • 暗中同意 {{}} 和 v-text 会把 html 格式字符串原样输出
  • 能够行使 v-html 将 html 格式字符串作为 HTML 渲染到节点中
  • v-show
  • 是还是不是出示和隐形
  • v-if
  • 是否渲染和移除
  • v-else
  • v-if 的 else 块
  • v-else-if
  • 是 v-if 的逻辑块
  • 如出壹辙的,也亟须紧跟着 v-if
  • v-for
  • 巡回遍历输出
  • v-on
  • DOM 成分的事件绑定
  • 例如:`v-on:click`、`v-on:blur`
  • v-bind
  • 动态绑定 HTML 属性
  • 例如:`v-bind:title`、`v-bind:class`
  • v-model
  • 和表单控件进行双向数据绑定
  • v-pre
  • 不管理钦赐节点及内部装有节点的 vue 规则
  • 举例能够用来显示原始的 Mustache 标签
  • 成效:跳过大批量并未指令的节点能够加快编写翻译速度
  • v-cloak
  • 入门笔记,vue老爹和儿子组件间传值。能够拍卖表明式闪烁的主题材料
  • v-once
  • 三遍性绑定,后续数据的创新不会响应

    <div class=”modal fade” id=”addModal” tabindex=”-1″ role=”dialog”
aria-labelledby=”myModalLabel”aria-hidden=”true”
data-backdrop=”static”>

父组件在调用子组件时,绑定想要获取的父组件中的数据

指令(Directives)是带有 `v-` 前缀的出格质量。
命令属性的值预期是纯净 JavaScript 表达式(除了
`v-for`,之后再谈谈)。指令的任务便是当其表明式的值改造时相应地将一些行为接纳到
DOM 上。

        <div class=”modal-dialog” role=”document”
style=”width:600px;”>

在 props 内以目的的情势写入校验规则

“`html
<p v-if=”seen”>Now you see me</p>
“`

          <div class=”modal-content”>

App.vue 中写入

此处, v-if 指令将遵照表达式 seen 的值的真伪来移除/插入 <p> 成分。

            <div class=”modal-header”>

<template>

#### 参数

              <button type=”button” class=”close”
data-dismiss=”modal” aria-label=”Close”><span
aria-hidden=”true”>×</span></button>

    <div class=”hello”>

一部分发令能承受1个“参数”,在命令后以冒号指明。
比方说, v-bind 指令被用来响应地换代 HTML 属性:

              <h4 class=”modal-title”
id=”myModalLabel”>新增加用户</h肆>

        <h3>我是 App 父组件</h3>

“`html
<a v-bind:href=”url”></a>
“`

            </div>

       
<h四>访问自身的数码:{{msg}},{{name}},{{user.id}}</h四>

在这里 `href` 是参数,告知 `v-bind` 指令将该因素的 `href`
属性与表明式 `url` 的值绑定。

            <div class=”modal-body” style=”height:
250px;overflow-y:auto;”>

        <hr>

另一个例子是 v-on 指令,它用于监听 DOM 事件:

                <div class=”col-md-8″>

        <!– 一. 在调用子组件时,绑定想要获取的父组件中的数据 –>

“`html
<a v-on:click=”doSomething”>
“`

                  <div class=”form-group”>

        <Hello :message=”msg” :name=”name” :age=”age”  :user=”user”
:money=”money”></Hello>

在那里参数是监听的风云名:`click`。

                    <label class=”col-md-2
control-label”>昵称</label>

    </div>

#### 修饰符

                    <div class=”col-md-10″>

</template>

修饰符(Modifiers)是以半角句号 .
指明的格外后缀,用于建议3个限令应该以特别措施绑定。
譬如说,.prevent 修饰符告诉 v-on 指令对于触发的事件调用
event.preventDefault():

                      <input type=”text” v-model=”addForm.userName”
class=”form-control” id=”inputEmail三” placeholder=”请输入别名”>

<script>

“`html
<div>
<input type=”text” v-on:keyup.enter=”xxx”>
</div>
“`

                    </div>

// 引入 Hello 组件

“`html
<form v-on:submit.prevent=”onSubmit”></form>
<input type=”text” v-on:keyup.enter=”addTodo”>
“`

                  </div>

import Hello from ‘./assets/components/Hello.vue’

### 过滤器

                  <div class=”form-group”>

export default {

> 注意:Vue 贰.x 中,过滤器只可以在 mustache 绑定和 v-bind 表明式(从
2.一.0 开首支持)中动用,
>
因为过滤器设计目标正是用来文书转变。为了在另外指令中落成更扑朔迷离的多寡调换,你应当使用
**测算属性**。

                    <label class=”col-md-2
control-label”>手机号</label>

  data(){

– Vue.js 允许你自定义过滤器,可被当做一些大面积的文本格式化

                    <div class=”col-md-10″>

    return {

  • 过滤器能够用在七个地方:`mustache 插值` 和 `v-bind 表达式`

                      <input type=”number”
v-model=”addForm.userPhone” class=”form-control” id=”inputEmail3″
placeholder=”请输出手提式有线电话机号”>

      msg:’父组件’,

全局过滤器:

                    </div>

      name:’tom’,

“`js
Vue.filter(‘capitalize’, function (value) {
if (!value) return ”
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
“`

                  </div>

      age:’22’,

某个过滤器:

                  <div class=”form-group”>

      user:{

“`js
new Vue({
// …
filters: {
capitalize: function (value) {
if (!value) return ”
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
“`

                    <label class=”col-md-2
control-label”>密码</label>

        id:9876,

过滤器使用格式:

                    <div class=”col-md-10″>

        userName:’Jack’

“`html
<!– in mustaches –>
{{ message | capitalize }}

                      <input type=”password”
v-model=”addForm.userPwd” class=”form-control” id=”userPwd”
placeholder=”请输入密码” data-dismiss=”alert” aria-label=”Close”>

      },

<!– in v-bind –>
<div v-bind:id=”rawId | formatId”></div>
“`

                    </div>

      money:’123′

过滤器能够串联:

                    <!– <div  class=”alert alert-danger”
role=”alert”>…</div> –>

    }

“`html
{{ message | filterA | filterB }}
“`

                  </div>

  },

过滤器是 JavaScript 函数,由此得以接受参数:

                  <div class=”form-group”>

  // 注册 Hello 组件

“`html
{{ message | filterA(‘arg1’, arg2) }}
“`

                    <label class=”col-md-二control-label”>用户角色</label>

  components:{

此处,字符串 ‘arg壹’ 将传给过滤器作为第二个参数,arg二表明式的值将被求值然后传给过滤器作为第四个参数。

                    <div class=”col-md-10″>

    Hello

### 缩写

                      <input type=”text” v-model=”addForm.userRole”
class=”form-control” id=”inputEmail3″ placeholder=”暂无”>

  }

#### v-bind 缩写

                    </div>

}

“`html
<!– 完整语法 –>
<a v-bind:href=”url”></a>
<!– 缩写 –>
<a :href=”url”></a>
“`

                  </div>

</script>

#### v-on 缩写

                </div>

Hello.vue 中写入

“`html
<!– 完整语法 –>
<a v-on:click=”doSomething”></a>
<!– 缩写 –>
<a @click=”doSomething”></a>
“`

                <div class=”col-md-4″>

<template>


                    <div class=”userUpImg BR”>

    <div class=”hello”>

## 总括属性

                      <img id=”uploadImg”
src=”../../assetsnullImg.jpg” alt=””>

        <h3>我是 hello 子组件</h3>

模板内的表达式是可怜方便的,可是它们其实只用于轻松的演算。
在模板中放入太多的逻辑会让模板过重且难以维护。举个例子:

                    </div>

        <!– 在页面中一贯渲染就能够 –>

“`html
<div id=”example”>
{{ message.split(”).reverse().join(”) }}
</div>
“`

                </div>

        <h肆>访问父组件中的数据:

在那种情况下,模板不再轻易和清晰。
那正是对于其他复杂逻辑,你都应当利用总括属性的来头。

            </div>

            {{message}} <br>

#### 基础例子:反转字符串

            <div class=”modal-footer”>

            {{name}}<br>

“`js
var vm = new Vue({
el: ‘#example’,
data: {
message: ‘Hello’
},
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split(”).reverse().join(”)
}
}
})
“`

              <button type=”button” class=”btn btn-primary”
@click=”addSave”>确定</button>

            {{user.id}}<br>

您能够像绑定普通属性同样在模板中绑定计算属性。
Vue 知道 `vm.reversedMessage` 依赖于 `vm.message` ,
因此当 `vm.message` 产生转移时,全数信赖于 `vm.reversedMessage`
的绑定也会被再一次计算举办创新。

              <button type=”button” class=”btn btn-default”
data-dismiss=”modal”>取消</button>

            {{user.userName}}<br>


            </div>

            {{age}}<br>

## Class 与 Style 绑定

          </div>

            {{ageOne}}<br>

在 `v-bind` 用于 `class` 和 `style` 时, Vue.js 专门加强了它。
表明式的结果类型除了 **字符串** 之外,还是可以够是 **对象** 或
**数组** 。

        </div>

            {{money}}<br>

### 绑定 HTML Class

      </div>

        </h4>

#### 对象语法

 

    </div>

“`html
<div v-bind:class=”{ active: isActive }”></div>

     <!–查看弹窗–>

</template>

<!– v-bind:class 指令能够与平时的 class 属性共存 –>
<div class=”static”
v-bind:class=”{ active: isActive, ‘text-danger’: hasError }”>
</div>
“`

    <div class=”modal fade” id=”lookModal” tabindex=”-1″
role=”dialog” aria-labelledby=”myModalLabel”aria-hidden=”true”
data-backdrop=”static”>

<script>

也足以一贯绑定数据里的3个目的:

        <div class=”modal-dialog” role=”document”
style=”width:600px;”>

export default {

“`html
<div v-bind:class=”classObject”></div>
<script>
new Vue({
data: {
classObject: {
active: true,
‘text-danger’: false
}
}
})
</script>
“`

          <div class=”modal-content”>

    props:{

#### 数组语法

            <div class=”modal-header”>

        // 基础项目检查测试 (`null` 指允许任何项目)

“`html
<!– 能够把二个数组传给 v-bind:class ,以利用1个 class 列表 –>
<div v-bind:class=”[activeClass, errorClass]”>

              <button type=”button” class=”close”
data-dismiss=”modal” aria-label=”Close”><span
aria-hidden=”true”>×</span></button>

        message:String,

data: {
activeClass: ‘active’,
errorClass: ‘text-danger’
}

              <h四 class=”modal-title”
id=”myModalLabel”>新添用户</h肆>

        // 只怕是陆类别型

<!– 依据条件切换列表中的 class ,能够用三元表明式: –>
<div v-bind:class=”[isActive ? activeClass : ”, errorClass]”>

            </div>

        name:[String,Number],

<!– 能够在数组语法中采纳对象语法: –>
<div v-bind:class=”[{ active: isActive }, errorClass]”>
“`

            <div class=”modal-body” style=”height:
250px;overflow-y:auto;”>

        // 必传且是字符串

### 绑定内联样式

                <div class=”col-md-8″>

        age:{

“`html
<!– CSS 属性名能够用驼峰式(camelCase)或名短横分隔命(kebab-case)
–>
<div v-bind:style=”{ color: activeColor, ‘font-size’: fontSize + ‘px’
}”></div>

                  <div class=”form-group”>

            type:String,

data: {
activeColor: ‘red’,
fontSize: 30
}

                    <label class=”col-md-2
control-label”>昵称</label>

            required:true

<!– 直接绑定到1个体裁对象 –>
<div v-bind:style=”styleObject”></div>
data: {
styleObject: {
color: ‘red’,
fontSize: ’13px’
}
}

                    <div class=”col-md-10″>

        },

<!– v-bind:style 的数组语法能够将七个样式对象应用到叁个要素上
–>
<div v-bind:style=”[baseStyles, overridingStyles]”>
“`

                      <input type=”text” v-model=”lookForm.userName”
class=”form-control” id=”inputEmail3″ readonly>

        // 数值且有暗中认可值  纵然父组件中从未该数量绑定,显示以下的暗许值


                    </div>

        ageOne:{

## 条件渲染

                  </div>

            type: Number,

### v-if-else-elseif

                  <div class=”form-group”>

            default: 10

“`html
<!– 基本用法 –>
<h1 v-if=”ok”>Yes</h1>

                    <label class=”col-md-2
control-label”>手机号</label>

        },

<!–
透过 template 包装三个成分,渲染结果不含有 template
v-else 成分必须紧跟在 v-if 或许 v-else-if
成分的前面——不然它将不会被识别。
–>
<template v-if=”ok”>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>

                    <div class=”col-md-10″>

        // 数组/对象的暗中认可值应当由三个厂子函数重临

<!– 使用 v-else 指令来表示 v-if 的“else 块” –>
<div v-if=”Math.random() > 0.5″>
Now you see me
</div>
<div v-else>
Now you don’t
</div>

                      <input type=”number”
v-model=”lookForm.userPhone” class=”form-control” id=”inputEmail3″
readonly>

        user:{

<!–
v-else-if,顾名思义,充当 v-if 的“else-if 块”。能够链式地使用频仍:
v-else,,v-else-if 必须紧跟在 v-if 大概 v-else-if 成分之后
–>
<div v-if=”type === ‘A'”>
A
</div>
<div v-else-if=”type === ‘B'”>
B
</div>
<div v-else-if=”type === ‘C'”>
C
</div>
<div v-else>
Not A/B/C
</div>
“`

                    </div>

            type:Object,


                  </div>

            default:function(){

## 列表渲染

                  <div class=”form-group”>

                return {


                    <label class=”col-md-2
control-label”>密码</label>

                    userName: ‘Doctor’

## 事件管理器

                    <div class=”col-md-10″>

                }


                      <input type=”password”
v-model=”lookForm.userPwd” class=”form-control” id=”userPwd” readonly
data-dismiss=”alert” aria-label=”Close”>

            }

## 表单控件绑定

                    </div>

        },


                    <!– <div  class=”alert alert-danger”
role=”alert”>…</div> –>

        // 自定义表达函数

## 组件

                  </div>

        money:{

组件是 Vue.js 最有力的效益,组件能够扩展自定义 HTML
成分,封装可采用代码。

                  <div class=”form-group”>

            validator:function(value){

### 组件的命名

                    <label class=”col-md-二control-label”>用户剧中人物</label>

                return value > 100

– 假诺一个单词就只写八个单词就可以

                    <div class=”col-md-10″>

            }

  • 设如果多少个单词组成的名字
  • 建议采纳短横杠的方法
  • 假定利用的是驼峰命名
  • 则在 DOM 模板中必须将 驼峰命名的零部件名改为短横杠的法门
  • 在 字符串模板中,无论是驼峰依然短横杠都行

                      <input type=”text” v-model=”lookForm.userRole”
class=”form-control” id=”inputEmail3″ readonly>

        }

### 组件基础

                    </div>

    }

– 注册全局组件

                  </div>

}

  • 注册局地组件
  • 零件的模板
  • 组件的 data

                </div>

</script>

#### 注册全局组件:`Vue.component(tagName, options)`

                <div class=”col-md-4″>

作用如下

注册:

                    <div class=”userUpImg BR”>

亚洲必赢官网 11

“`js
Vue.component(‘my-component’, {
template: ‘<div>A custom component!</div>’
})
“`

                      <img id=”uploadImg”
src=”/static/img/nullImg.jpg” alt=””>

只顾:Prop
是单向绑定的:当父组件的属性别变化化时,将传输给子组件,不过转头不会。那是为了幸免子组件无意间修改了父组件的意况,来制止接纳的数额流变得难以知晓。

使用:

                    </div>

除此以外,每便父组件更新时,子组件的兼具 prop
都会更新为新型值。那表示你不该在子组件内部改造 prop。

“`html
<div id=”example”>
<my-component></my-component>
</div>
“`

                </div>

2、父组件访问子组件的多寡

渲染为:

            </div>

在子组件中选取 $emit(事件名,数据) 触发二个自定义事件发送数据

“`html
<div id=”example”>
<div>A custom component!</div>
</div>
“`

          </div>

在父组件在使用子组件的竹签内监听子组件的触发事件,并在父组件中定义方法用来获取数据

#### 组件的 template

        </div>

在 Hello.vue 中写入

零件的 template 必须持有二个根节点,不然,模板编写翻译报错。

      </div> 

<template>

– 能够是内联模板

  </div>

    <div class=”hello”>

  • 能够是 script 标签模板
  • 可以是 .vue 模板

</template>

        <h3>我是 hello 子组件</h3>

#### 局地注册组件:实例选项的 `components`

 

        <h四>访问自身的多少:

不必在全局注册每一个组件。
经过行使组件实例选项注册,能够使组件仅在另3个实例/组件的效能域中可用:

<script>

            {{msg}} <br>

“`html
<body>
<div id=”app”>
<!– 渲染为 <div>局地组件</div> –>
<my-component></my-component>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
new Vue({
el: ‘#app’,
components: {
‘my-component’: {
template: ‘<div>局地组件</div>’
}
},
data: {
},
})
</script>
</body>
“`

import Paper from “@/components/publicComponent/paper”

            {{name}}

#### 在 DOM 模板中选取组件注意事项

 

        </h4>

当使用 DOM 作为模版时(举个例子,将 `el` 选项挂载到一个已存在的成分上),
你相会临 HTML 的一些范围,
因为 Vue 唯有在浏览器解析和标准 HTML 后才具获得模版内容。
愈来愈像这么些要素 `<ul>` , `<ol>`, `<table>` ,
`<select>` 限制了能被它包裹的要素,
`<option>` 只好冒出在其余成分内部。

export default {

        <!– 触发 send 事件 ,发送数据 –>

在自定义组件中动用这个受限制的成分时会导致一些主题素材,比方:

  name: ‘user’,

        <button
@click=”send”>将子组件中的数据发送给父组件</button>

“`html
<table>
<my-row>…</my-row>
</table>
“`

  components:{

    </div>

自定义组件 `<my-row>`
被认为是低效的始末,因而在渲染的时候会导致错误。
变动的方案是行使异乎平常的 `is` 属性:

    Paper

</template>

“`html
<table>
<tr is=”my-row”></tr>
</table>
“`

  },

<script>

**应当注意,若是你使用来源以下来源之一的字符串模板,那些限制将不适用:**

  data () {

export default {

– `<script type=”text/x-template”>`

    return {

    data(){

  • JavaScript内联模版字符串
  • `.vue` 组件

      loginData:””,

        return {

故此,推荐应用字符串模板。

      userList:[],

            msg:’子组件’,

#### 组件的 `data` 必须是函数

      addForm:[],

            name:’tom’

在组件中,data 必须是函数,上边是谬误的艺术:

      lookForm:[],

        }

“`js
Vue.component(‘my-component’, {
template: ‘<span>{{ message }}</span>’,
data: {
message: ‘hello’
}
})
“`

      editForm:[],

    },

准确的情势:

      allpage:0,//总记录数

    methods:{

“`js
data: function () {
return {
message: ‘组件的 data 必须是函数再次回到3个json字面量对象’
}
}
“`

      size:10,//每页突显个数

        // 在那边定义事件,用来发送数据,也可一向写到 mounted 内自动发送

### 组件通讯

      current:一,//当前展现页

        send(){

– 使用 prop 传递数据

      total:0//总数

            // 此处的 this 表示当前子组件的实例

  • props 命名规则
  • camelCase 和 kebab-case
  • 动态 prop
  • v-bind
  • 字面量语法 vs 动态语法
  • 单向数据流

    }

            this.$emit(‘hello’,this.msg,this.name)

组件意味着协同职业,平时父亲和儿子组件会是如此的关系:组件 A
在它的模版中选拔了组件 B 。
它们之间必然要求相互通讯:

  },

        }

– 父组件要给子组件传递数据

  created:function (){//钩子函数,在页面加载实现前推行

    }

  • 子组件供给将它此中爆发的事体告诉给父组件

    this.jumpLogin();

}

只是,在二个得天独厚定义的接口中尽量将老爹和儿子组件解耦是很首要的。
那保证了各类组件能够在相对隔开的境遇中书写和理解,也小幅升高了组件的可维护性和可重用性。

    this.loginData = JSON.parse(sessionStorage.loginData);

</script>

在 Vue.js 中,老爹和儿子组件的关系足以计算为 `props down, events up`:

    this.getList();

在 App.vue 中写入

– 父组件通过 `props` 向下传递数据给子组件

  },

<template>

  • 子组件通过 `events` 给父组件发送音信

  methods:{

    <div class=”hello”>

![img/props-events.png](img/props-events.png)

    //发轫判别有未有token,未有的话跳转登入页

        <h3>我是 App 父组件</h3>

#### 使用 prop 传递数据

    jumpLogin:function(){

        <!– 陆. 在页面中渲染 –>

零件实例的作用域是孤立的。
这象征无法(也不应当)在子组件的模板内直接引用父组件的数额。
要让子组件使用父组件的数据,大家须要通过子组件的props选项。

      if(!sessionStorage.loginData){this.$router.push({ path: ‘/’ });}

        <h四>访问子组件的数额:{{msg}},{{name}}</h4>

子组件要显式地用 `props` 选项注解它仰望收获的数目:

    },

        <hr>

“`js
Vue.component(‘child’, {
// 声明 props
props: [‘message’],
// 就像 data 一样,prop 能够用在模板内
// 同样也得以在 vm 实例中像 “this.message” 这样使用
template: ‘<span>{{ message }}</span>’
})
“`

    //获取用户列表

        <!– 子组件 –>

下一场大家能够那样向它传播一个常常字符串:

    getList:function(){

        <!– 3. 在子组件标签内监听子组件事件的触发 –>

“`html
<child message=”hello!”></child>
“`

      this.$http({

        <Hello @hello=”getData”></Hello>

#### camelCase 和 kabab-case 命名规则

            url: global.url+’/robomb/user/getUserList’,

    </div>

#### 动态 prop

            method: ‘POST’,

</template>

#### 字面量语法 vs 动态语法

            emulateJSON:true,

<script>

#### 单向数据流

            body: {

// 引入 Hello 组件

prop 是单向绑定的:

              token:this.loginData.token,

import Hello from ‘./assets/components/Hello.vue’

– 当父组件的性质爆发变化时,将传输给子组件

              pageSize:this.current,

export default {

  • 子组件动态绑定的 prop,当父组件更新,子组件全数的 prop 都会赢得更新
  • 可是不会反过来
  • 也等于说,在子组件内部修改 prop 数据
    * 子组件内部会响应更新
    * 更新不会传导给父组件
    * 同时 Vue 会在调整台发出警示
    * 对象和数组除此之外
    * 借使 prop 是1个目的或数组,在子组件内部修改它会影响父组件的事态
    * 倘若一向给 prop
    中的对象或数组类型数据重复赋值,父组件也不会获得更新
  • 那是为了幸免子组件无意间修改了父组件的景观
  • 那会让数据流的走向变得乱柒八糟而麻烦知晓

              recordSize:this.size

  data(){

怎么我们会有涂改 prop 中数据的冲动呢?

            },

    return {

  1. prop 作为开端值传入后,子组件想要把它看成局部数据来用
  2. prop 作为起先值传入后,由子组件管理成其余数据输出

            headers: {“Content-Type”:
“application/x-www-form-urlencoded;charset=UTF-8”}

      // 肆. 伊始化数据对象

对于这二种原因,正确的方法是:

        }).then(function(response) {

      msg:”,

  1. 概念贰个局地变量,并用 prop 的值起先化它

            var data = response.body;

      name:”,

“`js
props: [‘initialCounter’],
data: function () {
return {
counter: this.initialCounter
}
}
“`

            if(data.returncode == 0){

    }

  1. 概念四个乘除属性,管理 prop 的值并赶回

              swal({ 

  },

“`js
props: [‘size’],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
“`

                  title:”数据加载错误”, 

  methods:{

#### Prop 验证

                  text: “2秒后活动关闭。”, 

    // 5. 接收子组件传过来的数量

大家可认为组件的 props 钦命验证规格。
若是传入的多寡不符合标准,Vue 会发出警告。
当组件给其余人使用时,那就很有用了。

                  icon:”error”,

    getData(msg,name){

要钦点验证规格,必要使用对象的情势,而无法用字符串数组:

                  timer: 2000, 

      this.msg = msg,

“`js
Vue.component(‘example’, {
props: {
// 基础项目检查评定 (`null` 意思是其它项目都足以)
propA: Number,
// 多样类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字,有私下认可值
propD: {
type: Number,
default: 100
},
// 数组/对象的暗中同意值应当由叁个工厂函数再次来到
propE: {
type: Object,
default: function () {
return { message: ‘hello’ }
}
},
// 自定义表达函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
“`

                  buttons:false

      this.name = name

`type` 能够是下面原生的数据类型:

                });

    }

– String

            }else if(data.returncode == 1){

  },

  • Number
  • Boolean
  • Function
  • Object
  • Array

                this.userList = data.data.userList;

  // 注册 Hello 组件

`type` 也得以是3个自定义构造器函数(举例 Person),
Vue 会使用 `instanceof` 对数据开展检查评定。

                this.allpage = data.size;

  components:{

当 prop 验证战败,Vue会在抛出警告 (假诺应用的是付出版本)。

                //总页数

    Hello

### 自定义事件(老爹和儿子通讯)

                this.total = Math.floor((data.size + this.size) / 10);

  }

– 使用 v-on 绑定自定义事件

            }else{

}

  • 行使自定义事件的表单输入组件
  • 非父子组件通信

              swal({ 

</script>

父组件是行使 props 传递数据给子组件,
但若是实组件要把数据传递回去,应该怎么样做?
那正是自定义事件!

                  title:”数据加载错误”, 

效果图:

#### 使用 v-on 绑定自定义事件

                  text: “二秒后活动关闭。”, 

亚洲必赢官网 12

各个 Vue 实例都完成了风浪接口:

                  icon:”error”,

       
由此可见,作为二个技士,大家要持续提升协和的专门的学业知识素养,学习更新的东西,那样我们才具使协调更强有力。

– 使用 $on(eventName) 监听事件

                  timer: 2000, 

  • 行使 $emit(eventName) 触发事件

                  buttons:false

父组件能够在使用子组件的地点直接使用 `v-on` 监听子组件发射的轩然大波。
留神:不能够动用 `$on` 侦听子组件抛出的事件,而必须在模板里平素利用
`v-on` 绑定。

                });

“`html
<body>
<div id=”app”>
<p>{{ total }}</p>
<child v-on:increment=”incrementTotal”></child>
<child v-on:increment=”incrementTotal”></child>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
Vue.component(‘child’, {
template: `
<div>
<span>{{ counter }}</span>
<button @click=”increment”>increment</button>
</div>`,
data () {
return {
counter: 0
}
},
methods: {
increment () {
this.counter += 1
this.$emit(‘increment’)
}
}
})
new Vue({
el: ‘#app’,
data: {
total: 0
},
methods: {
incrementTotal () {
this.total += 1
}
}
})
</script>
</body>
“`

            };

在本示例中,子组件已经和它表面完全解耦了。
它所做的只是报告本人的里边事件,至于父组件是不是关切则与它非亲非故。

        }, function(response) {

突发性,恐怕想要在有个别组件的根成分上绑定一个原惹祸件。
能够运用 `.native` 修饰 `v-on`。例如:

              

“`html
<my-component
v-on:click.native=”doTheThing”></my-component>
“`

        });

#### 非父亲和儿子组件通讯

    },

突发性多个零件也必要通信(非父子关系)。
在轻松的情形下,能够采纳三个空的 Vue 实例作为中心事件总线:

    //新增添用户

“`html
<body>
<div id=”app”>
<child-a></child-a>
<child-b></child-b>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
const bus = new Vue()
Vue.component(‘child-a’, {
template: `
<div>
<p>组件 child A</p>
<button @click=”emitDataToB”>发射数量到</button>
</div>
`,
methods: {
emitDataToB() {
// 在组件 A 中通过 $emit 发射 data 事件,组件 B 中的钩子监听了 data
事件
bus.$emit(‘data’, ‘组件a传递过来的数据’)
}
}
})
Vue.component(‘child-b’, {
template: `
<div>
<p>组件 child B</p>
<p>{{ message }}</p>
</div>
`,
created() {
const vm = this
// 在组件 B 的钩中通过 bud 的 $on 监听事件
bus.$on(‘data’, function (data) {
vm.message = data
})
},
data() {
return {
message: ‘hello child b’
}
}
})
new Vue({
el: ‘#app’,
data: {},
})
</script>
</body>
“`

    addSave:function(){

### 使用 Slot 分发内容

      console.log(11);

– 编写翻译成效域

      console.log(this.addForm);

  • 单个 Slot
  • 具名 Slot
  • 效能域插槽

      $(‘#element’).tooltip(‘destroy’)

在利用组件的时候,我们平时要像那样组合它们:

      if(!this.addForm.userPwd){

“`html
<app>
<app-header></app-header>
<app-footer></app-footer>
</app>
“`

        // $(‘#userPwd’).popover(‘show’);

留神两点:

        $().alert();

  1. `<app>` 组件不精晓它的挂载点会有何内容。挂载点的始末是由
    `<app>` 的父组件决定的
  2. `<app>` 组件很也许有它协调的模板

      }

为了让组件能够结合,我们须要一种方法来混合父组件的剧情和子组件本人的模版。
本条进度被誉为 **内容分发**(或 “transclusion”)。

      this.$http({

Vue.js 完结了三个剧情分发 API,参照了近期 Web 组件标准草案,
利用特殊的 `<slot>` 成分作为原有内容的插槽。

            url: global.url+’/robomb/user/addUser’,

#### 编译功用域

            method: ‘POST’,

#### 单个 Slot

            emulateJSON:true,

– 如若实组件未有 `<slot>` 插口,不然父组件的内容会被丢掉

            body: {

  • 当子组件模板唯有3个并未有品质的 slot 时
  • 父组件全副内容片段都将插入到 slot 所在的 DOM 地方
  • 并替换掉 slot 标签本身
  • 在 slot 标签中的任何内容都被视为 备用内容
  • 备用内容在子组件的效率域内编写翻译
  • 而且唯有宿主成分为空的时候,备用内容才会被编写翻译展现出来

              token:this.loginData.token,

以身作则如下:

              loginname:this.addForm.userName,

“`html
<body>
<div id=”app”>
<bs-panel title=”面板1″>
面板1的内容
</bs-panel>
<bs-panel title=”面板2″>
面板2的内容
</bs-panel>
<bs-panel title=”未有散发内容的面板”>
</bs-panel>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
Vue.component(‘bs-panel’, {
template: `
<div class=”panel panel-default”>
<div class=”panel-heading”>
<h3 class=”panel-title”>{{ title }}</h3>
</div>
<div class=”panel-body”>
<slot>
只有才未有散发的剧情时才会来得
</slot>
</div>
</div>
`,
props: {
title: { type: String, required: true }
}
})
new Vue({
el: ‘#app’,
data: {},
})
</script>
</body>
“`

              password:this.addForm.userPwd,

#### 具名 slot

              name:this.addForm.userName,

– 在结合组件时,内容分发 API 是分外实用的建制

              userrole:”2″,

  • `<slot>` 成分能够用一个差别常常的属性 `name`
    来配置哪些分发内容
  • 多个 slot 能够有例外的名字。
  • 具名 slot 将合营内容片段中有对应 slot 本性的成分
  • 还是能有1个无名氏 slot,它是暗中同意 slot
  • 作为找不到相当的剧情片段的备用插槽
  • 即便未有暗中同意的 slot,那些找不到插槽的始末片段将被扬弃

              phone:this.addForm.userPhone,

“`html
<body>
<div id=”app”>
<app-layout>
<h1 slot=”header”>顶部</h1>
<p>内容段落</p>
<p>内容段落</p>
<p slot=”footer”>尾部音讯</p>
</app-layout>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
Vue.component(‘app-layout’, {
template: `
<div class=”container”>
<header>
<slot name=”header”></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name=”footer”></slot>
</footer>
</div>
`
})
new Vue({
el: ‘#app’,
data: {},
})
</script>
</body>
“`

              photo:””

#### 功效域插槽

            },

– 目标:效能域插槽的目标正是能够将子组件内部的数码传递到表面

            headers: {“Content-Type”:
“application/x-www-form-urlencoded;charset=UTF-8”}

  • 在子组件中,在 `slot` 标签上通过质量的章程将 prop 数据传递到表面
  • 在父组件中,通过全部特有属性 `scope` 的 `<template>`
    成分,表示它是功能域插槽的沙盘
  • `scope` 的值对应一个一时半刻变量名
  • 该变量接收来自子组件中通过 `slot` 成分属性传递的 prop 数据

        }).then(function(response) {

以身作则如下:

            var data = response.body;

“`html
<body>
<div id=”app”>
<child>
<template scope=”props”>
<p>hello from parent</p>
<p>{{ props.text }}</p>
<p>{{ props.message }}</p>
</template>
</child>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
Vue.component(‘child’, {
template: `
<div class=”child”>
<input v-model=”message” />
<slot text=”hello from child” :message=”message”></slot>
</div>
`,
data () {
return {
message: ‘child message’
}
}
})
new Vue({
el: ‘#app’,
data: {
},
})
</script>
</body>
“`

            console.log(data);

效用域插槽更具代表性的用例是列表组件,允许组件自定义应该如何渲染列表每一种:

            if(data.returncode == 0){

“`html
<body>
<div id=”app”>
<my-awesome-list :todos=”todos”>
<template slot=”item” scope=”props”>
<li class=”my-fancy-item”>{{ props.text }}</li>
</template>
</my-awesome-list>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
Vue.component(‘my-awesome-list’, {
props: [‘todos’],
template: `
<ul>
<slot name=”item”
v-for=”item in todos”
:text=”item.title”>
<!– fallback content here –>
</slot>
</ul>
`
})
new Vue({
el: ‘#app’,
data: {
todos: [
{ id: 1, title: ‘吃饭’ },
{ id: 2, title: ‘睡觉’ },
{ id: 3, title: ‘打豆豆’ },
]
},
})
</script>
</body>
“`

              swal({ 

### 动态组件

                  title:”数据加载错误”, 

经过保留的 `<component>` 成分,动态的绑定到它的 is 个性,
作者们让多个零件能够动用同3个挂载点:

                  text: “二秒后自动关闭。”, 

简短示例

                  icon:”error”,

“`html
<body>
<div id=”app”>
<select v-model=”currentView”>
<option value=”home”>home</option>
<option value=”posts”>posts</option>
<option value=”archive”>archive</option>
</select>
<component v-bind:is=”currentView”></component>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
new Vue({
el: ‘#app’,
data: {
currentView: ‘home’
},
components: {
home: {
template: ‘<div>home</div>’,
},
posts: {
template: ‘<div>posts</div>’,
},
archive: {
template: ‘<div>archive</div>’,
}
}
})
</script>
</body>
“`

                  timer: 2000, 

登入注册示例:

                  buttons:false

“`html
<body>
<div id=”app”>
<ul>
<li><a href=”JavaScript:void(0)” @click=”defaultView =
‘register'”>注册</a></li>
<li><a href=”JavaScript:void(0)” @click=”defaultView =
‘login'”>登陆</a></li>
</ul>
<div>
<component :is=”defaultView”></component>
</div>
<hr><hr><hr><hr>
<div>
<!– 能够选用 keep-alive 保持组件状态 –>
<keep-alive>
<component :is=”defaultView”></component>
</keep-alive>
</div>
</div>
<script src=”../node_modules/vue/dist/vue.js”></script>
<script>
new Vue({
el: ‘#app’,
components: {
login: {
template: `
<form action=””>
<div>
<label for=””>用户名</label>
<input type=”text” />
</div>
<div>
<label for=””>密码</label>
<input type=”password” />
</div>
<div>
<input type=”submit” value=”点击登入” />
</div>
</form>
`
},
register: {
template: `
<form action=””>
<div>
<label for=””>用户名</label>
<input type=”text” />
</div>
<div>
<label for=””>密码</label>
<input type=”password” />
</div>
<div>
<label for=””>确认密码</label>
<input type=”password” />
</div>
<div>
<label for=””>验证码</label>
<input type=”password” />
</div>
<div>
<input type=”submit” value=”点击注册” />
</div>
</form>
`
}
},
data: {
亚洲必赢官网 ,defaultView: ‘login’
},
})
</script>
</body>
“`

                });

 

            }else if(data.returncode == 1){

 

                console.log(data);

 

                $(‘#addModal’).modal(‘hide’); 

 

                this.getList();

 

            }else{

 

              swal({ 

 

                  title:”数据加载错误”, 


                  text: “二秒后自行关闭。”, 

## 使用 Vue 的部分经历

                  icon:”error”,

### 调试 Vue

                  timer: 2000, 

                  buttons:false

                });

### 化解表明式闪烁

            };

  1. 将所有 `{{}}` 通过 `v-text` 替换
  2. 使用 `v-cloak` 解决

        }, function(response) {

先是,在要渲染管理的 DOM 节点上加多2个指令 `v-cloak`:

              

“`html
<div id=”app” ng-cloak>
{{ message }}
</div>
“`

        });

第二,在 style 中投入两脾质量选用器样式:

    },

“`css
[v-cloak] {
display: none;
}
“`

    //查看用户

其3,解析施行机制:

    lookMain:function(info){

  1. 当浏览器解析处理到加多了 `v-cloak`
    属性的节点的时候,属性样式被作用上来,约等于说暗许这么些容器就是隐藏着的
  2. 接下来当 Vue 程序解析渲染完HTML模板的时候,自动将容器上的 `v-cloak`
    属性移除

      console.log(info);

 

      this.lookForm.userName = info.name;

      this.lookForm.userPwd = info.password;

      this.lookForm.userPhone = info.phone;

     
this.lookForm.userRole==一?”App”:this.lookForm.userRole==二?”普通用户”:”未知”;

    },

    //删除用户

    deleteInfo:function(info){

      swal({

        title: “分明删除?”,

        text: “”,

        icon: “warning”,

        dangerMode: true,

        buttons: [“取消”, “确定”]

      })

      .then(willDelete => {

        if (willDelete) {

          this.$http({

            url: global.url+’/robomb/user/deleteUserById’,

            method: ‘POST’,

            emulateJSON:true,

            body: {

              token:this.loginData.token,

              id:info.id

            },

            headers: {“Content-Type”:
“application/x-www-form-urlencoded;charset=UTF-8”}

        }).then(function(response) {

            var data = response.body;

            console.log(data);

            if(data.returncode == 0){

              swal({ 

                  title:”数据加载错误”, 

                  text: “二秒后活动关闭。”, 

                  icon:”error”,

                  timer: 2000, 

                  buttons:false

                });

            }else if(data.returncode == 1){

                 swal(“删除成功”, “”, “success”);

                 this.getList();

            }else{

              swal({ 

                  title:”数据加载错误”, 

                  text: “2秒后自行关闭。”, 

                  icon:”error”,

                  timer: 2000, 

                  buttons:false

                });

            };

        }, function(response) {

              

        });

        }

      });

    },

    changePage:function(index){

      this.current = index;

      this.getList();

    }

  }

}

</script>

 

<style scoped>

.form-group {

  overflow: hidden;

}

.control-label {

  padding-left: 0;

  padding-right: 0;

}

</style>

网站地图xml地图