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: 页面显示
    每便展开页面都会调用三次。
  • onReady: 页面初次渲染完毕
    一个页面只会调用1遍,代表页面已经筹算稳妥,能够和视图层举行互相。
    对分界面包车型客车设置如wx.setNavigationBarTitle请在onReady事后设置。详见生命周期
  • onHide: 页面隐藏
    navigateTo或底层tab切换时调用。
  • onUnload: 页面卸载
    redirectTonavigateBack的时候调用。

npm run dev

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

第叁说下思路:

数据请求

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

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

创办2个 `package.josn` 文件:

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

2、数据绑定

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

<img :src=”imgSrc”/>

1
<img :src="imgSrc"/>

小程序:绑定某些变量的值为因素属性时,会用多个大括号括起来,假设不加括号,为被以为是字符串。例:

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

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

 

办法一 :子组件间接访问父组件的数据

“`bash
npm init -y
“`

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

3、列表渲染

直白贴代码,两者照旧有点相似
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 += 一”>Add 1</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 文件中出席以下内容:

五.多个代码能够直接粘贴复制用,获取列表的多少依靠本身必要开始展览转移就可以

陆、数据双向绑定

美高梅开户网址 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
    })
  }
})

当页面表单成分大多的时候,退换值就是一件体力活了。和小程序一比较,vuev-model几乎爽的决不不要的。

App.vue 中写入

开发终端,运维开荒预览服务:

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>

7、绑定事件传参

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 / 2),//从哪儿开端
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: “2秒后自动关闭。”,
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>

一.子零件的选拔

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>

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


 

二.老爹和儿子组件间通讯

        <hr>

## 安装

 

vue

父组件向子组件传递数据,只须要在子组件通过v-bind传扬1个值,在子组件中,通过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将艺术和数据传递给父组件。

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

– 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>

1经父组件想要调用子组件的措施

vue会给子组件增加多少个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 )`
  • 就算剔除对象属性是响应式的:
    * `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` 指令
  • 一遍性插值:
  • `<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>

        <h4>访问父组件中的数据:
{{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
会发出警示

  • 和 {{}} 效果是千篇1律
  • 但是 {{}} 会闪烁
  • 减轻形式正是选择 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
  • 可以拍卖表明式闪烁的标题
  • 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”>

有的指令能承受2个“参数”,在指令后以冒号指明。
例如, v-bind 指令被用来响应地换代 HTML 属性:

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

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

“`美高梅开户网址 ,html
<a v-bind:href=”url”></a>
“`

            </div>

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

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

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

        <hr>

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

                      <input type=”text” v-model=”addForm.userName”
class=”form-control” id=”inputEmail3″ 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壹’ 将传给过滤器作为第一个参数,arg2表明式的值将被求值然后传给过滤器作为第四个参数。

                    <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>

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

在那种场馆下,模板不再轻易和明晰。
那就是对于别的复杂逻辑,你都应当利用总结属性的由来。

            </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>

也得以直接绑定数据里的一个对象:

        <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 ,以应用二个 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’
}

              <h4 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

<!– 直接绑定到3个样式对象 –>
<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>

二、父组件访问子组件的数目

渲染为:

            </div>

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

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

          </div>

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

#### 组件的 template

        </div>

在 Hello.vue 中写入

零件的 template 必须具备1个根节点,不然,模板编写翻译报错。

      </div> 

<template>

– 能够是内联模板

  </div>

    <div class=”hello”>

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

</template>

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

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

 

        <h4>访问自个儿的数据:

无须在全局注册种种组件。
经过行使组件实例选项注册,可以使组件仅在另贰个实例/组件的效用域中可用:

<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 的1对范围,
因为 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>

**有道是注意,倘使你使用来源以下来源之1的字符串模板,这几个限制将不适用:**

  data () {

export default {

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

    return {

    data(){

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

      loginData:””,

        return {

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

      userList:[],

            msg:’子组件’,

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

      addForm:[],

            name:’tom’

在组件中,data 必须是函数,下边是荒唐的不2秘技:

      lookForm:[],

        }

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

      editForm:[],

    },

不错的方法:

      allpage:0,//总记录数

    methods:{

“`js
data: function () {
return {
message: ‘组件的 data 必须是函数重返二个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();

}

而是,在2个绝妙定义的接口中尽量将父子组件解耦是很入眼的。
这保险了每一种组件能够在相对隔断的碰到中书写和透亮,也小幅提升了组件的可维护性和可重用性。

    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,未有的话跳转登6页

        <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(){

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

“`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
    中的对象或数组类型数据再一次赋值,父组件也不会取得更新
  • 那是为了幸免子组件无意间修改了父组件的情状
  • 那会让数据流的走向变得乱7八糟而麻烦驾驭

              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: “二秒后自行关闭。”, 

    // 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` 也得以是一个自定义构造器函数(举例 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>` 组件十分的大概有它本身的模板

      }

为了让组件能够整合,大家必要一种艺术来混合父组件的剧情和子组件本人的沙盘。
其1进度被号称 **故事情节分发**(或 “transclusion”)。

      this.$http({

Vue.js 落成了2个剧情分发 API,参照了当前 Web 组件标准草案,
运用格外的 `<slot>` 元素作为原有内容的插槽。

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

#### 编写翻译作用域

            method: ‘POST’,

#### 单个 Slot

            emulateJSON:true,

– 假如实组件没有 `<slot>` 插口,不然父组件的内容会被舍弃

            body: {

  • 当子组件模板只有二个不曾质量的 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
  • 用作找不到10分的内容片段的备用插槽
  • 若是未有暗中同意的 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` 的值对应1个一时半刻变量名
  • 该变量接收来自子组件中通过 `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);

功用域插槽更具代表性的用例是列表组件,允许组件自定义应该怎么渲染列表每1项:

            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 性子,
我们让多个零部件能够动用同四个挂载点:

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

简单易行示例

                  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) {

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

              

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

        });

其次,在 style 中到场伍特本性拔取器样式:

    },

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

    //查看用户

其三,解析实施机制:

    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: “二秒后自动关闭。”, 

                  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地图