菜单

js_脚本之家,vue2中的基本操作

2020年3月21日 - www.2138.com
js_脚本之家,vue2中的基本操作

Vue是叁个轻量级的渐进式框架,对于它的片段特征和优点在那就不做赘述。下边通过本文给我们享用Vue中父组件向子组件通讯的法子,具体内容实际情况如下所示:

一、自定义组件

1、创制组件vue

www.2138.com 1

image.png

<!--公用button-->
<template>
  <div class="btn">
    <button type="button">{{btnText}}</button>
  </div>
</template>
<script>
export default {
</script>
<style lang="less" scoped>
</style>

js_脚本之家,vue2中的基本操作。2、父级引进组件并定义运用

html:
  <btn :btn-text="btnText" @touchstart.native="toPay()"></btn>
js:
import btn from '../common/btn.vue';
export default {
  components: {
    btn
  },
}

3、二个组件的v-for
在自定义组件里,你能够像别的一般成分相像用 v-for 。

<my-component v-for="item in items" :key="item.id"></my-component>

2.2.0+ 的本子里,当在组件中使用 v-for 时,key 今后是必得的。

4、组件的prop
在 Vue 中,老爹和儿子组件的关联得以总计为 prop
向下传递,事件向上传递。父组件通过 prop
给子组件下发数据,子组件通过事件给父组件发送音讯

5、HTML 性格是不区分朗朗上口写的。所以,当使用的不是字符串模板时,camelCase
(驼峰式命名State of Qatar 的 prop 需求转移为相对应的 kebab-case (短横线分隔式命名卡塔尔国:

Vue.component('child', {
  // 在 JavaScript 中使用 camelCase
  props: ['myMessage'],
  template: '{{ myMessage }}'  //没有写在html的为字符串模板
})

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child> //写在html的为非字符串模板需要:相对应的 kebab-case (短横线分隔式命名)

假设您使用字符串模板,则并未那几个节制。

props

二、组件父传子数据

1、父级绑定要传输的数目

  <btn :btn-text="btnText" @touchstart.native="toPay()"></btn>

2、子组件选择并引述(props验证type写法State of Qatar

www.2138.com 2

image.png

3、借使您想把一个目的的具有属性作为 prop
举行传递,能够使用不带任何参数的 v-bind (即用 v-bind 并非v-bind:prop-name卡塔尔。举例,已知三个 todo 对象:

todo: {
  text: 'Learn Vue',
  isComplete: false
}

<todo-item v-bind="todo"></todo-item>

将等价于:

<todo-item
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"
></todo-item>

4、
单向数据流

组件实例的作用域是孤立的。子组件的模版中是力不能及直接调用父组件的数据。

三、组件子传父数据( 自定义事件)

1、

// 子组件通过$emit发射数据
 methods: {
    popHide() {
      this.$emit('popHide', false);
    },
  },

// 父级通过v-on:popHide接收数据
 <gained v-show="isPopShow" :currentData = "currentData" v-on:popHide="popHide" v-if="gained"></gained>

2、应用自定义事件的表单输入组件

3、非父亲和儿子组件的通讯

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

能够采用props将父组件的多少传给子组件。子组件在接纳多少时要显得声明props

四、父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自个儿的click的话,要求增添native修饰符,故写法就如下边那样。( 给组件绑定原滋事件)

<btn :btn-text="btnText" v-on:click.native="setPhone"></btn>

假如将click的native去掉,思路如下:
www.2138.com,子组件监听父组件给的click事件,
子组件内部管理click事件然后向外发送click事件:$emit(“click”.fnState of Qatar
改建后的代码如下(亲测可用卡塔尔(قطر‎:

<template>
  <button class="disable-hover button ion-button" @click="_click"
          :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">

      <slot></slot>

    <div class="button-effect"></div>
  </button>
</template>

<script type="text/babel">
export default{
    ....
    ....
    methods: {
      _click: function () {
        this.$emit('click', function () {
          alert('inner')
        })
      }
    }
}
</script>

父组件中如此使用:

<ion-button @click="primary()" color="primary">primary</ion-button>
  Vue.component('panda',{ props:['here'], template:`&lt;div&gt;panda from {{here}}&lt;/div&gt;` }) new Vue

五,filters用法

  <p>本期学习计划开启日期为{{time | dateTransform}}</p>
  filters: {
    dateTransform(time) {
      let reg =/(d{4})-(d{2})-(d{2})/;
      return time.replace(reg, "$1年$2月$3日");
    }
  },

页面上出示的是 panda from China

六,获取dom方法

//html
<div ref='outBox' class="out-box">
//js中获取
     let box = this.$refs.box;
      let outBox = this.$refs.outBox;

管理属性中带’-‘的标题

七、设置全局变量

main.js中写入

Vue.prototype.globalBadges = []; // 徽章全局变量用于储存临时徽章弹出

内需选取之处:

 this.globalBadges

一经急需的数据量一点都不小得用vuex来管理数据了;

Vue是不援救带杠的写法的。

八、keep-alive的运用;

设若上述的here形成from-here。要求如此写

1.主导用法

vue2.0提供了叁个keep-alive组件
用来缓存组件,幸免频仍加载相应的零器件,收缩品质消耗

<keep-alive>
   <component>
     <!-- 组件将被缓存 -->
   </component>
</keep-alive>

有的时候候 或者须要缓存整个站点的兼具页面,而页面平常一走入都要接触乞求的
在利用keep-alive的意况下

<keep-alive><router-view></router-view></keep-alive>

将第一遍接触央浼写在created钩子函数中,就能够贯彻缓存,
诸如列表页,去了实际情况页 回来,依然在原来的页面

  Vue.component('panda',{ props:['fromHere'], template:`&lt;div&gt;panda from {{fromHere}}&lt;/div&gt;` }) new Vue
2.缓存局地页面或许零器件

(1)使用router. meta属性

// 这是目前用的比较多的方式
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

router设置

  routes: [
    { path: '/', redirect: '/index',  component: Index, meta: { keepAlive: true }},
    {
      path: '/common',
      component: TestParent,
      children: [
        { path: '/test2', component: Test2, meta: { keepAlive: true } } 
      ]
    }
    // 表示index和test2都使用keep-alive

(2卡塔尔(قطر‎.使用新扩充属性inlcude/exclude
2.1.0后提供了include/exclude三个属性 能够针对缓存相应的组件

<!-- comma-delimited string -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- regex (use v-bind) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

//在那之中a,b是组件的name
只顾:这种方法都是预先领会组件的名指标

(2卡塔尔国动态推断

<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

includedComponents动态设置就可以

一经急需动态绑定,必要用到v-bind

九、关于v-bind、v-on、v-model

       Vue.component('panda',{ props:['here'], template:`&lt;div&gt;panda from {{here}}&lt;/div&gt;` }) new Vue({ el: '#app', data:{ msg:'China' } }) 
v-bind

那标准组件就展现出了父组件的消息。並且是动态绑定的。当父组件的data.msg产生变化的时候。子组件里面的剧情也会相应的爆发变化。

v-on

注意:props默许是单向绑定:当父组件的天性别变化化时,将传输给子组件,不过反过来不会。那是为了幸免子组件无意改良了父组件的动静

v-model

也足以绑定数据,不过她是用在表单控件上的,用于落实双向数据绑定,所以一旦你用在除了表单控件以外的竹签是从未其他意义的。
v-model 会忽视全数表单成分的 value、checked、selected
天性的初阶值而接二连三将 Vue 实例的数码作为数据来源于。你应有通过 JavaScript
在组件的 data 选项中声称开始值。

上述所述是小编给我们介绍的Vue中父组件向子组件通讯的法子,希望对我们具备助于,如若我们有其余疑问请给本人留言,作者会及时过来大家的。在那也特别谢谢大家对剧本之家网址的帮忙!

.lazy

在暗中认可情形下,v-model 在每次 input
事件触发后将输入框的值与数码实行同步
(除了上述输入法结合文字时卡塔尔(قطر‎。你能够增添
lazy 修饰符,进而转换为利用 change 事件进行联合:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

.number

譬如想自行将客户的输入值转为数值类型,可以给 v-model 添加 number
修饰符:

<input v-model.number="age" type="number">

这经常很有用,因为固然在 type="number" 时,HTML
输入成分的值也总会回来字符串。

.trim

假设要活动过滤客户输入的来踪去迹空白字符,能够给 v-model 添加 trim
修饰符:

<input v-model.trim="msg">

十、总结属性和监听器

<template>
    <div>
        <input type="text" name="" v-model="myVal"><br/>
        {{ myValueWithoutNum }}<br/>
        {{ getMyValueWithoutNum() }}<br/>
         <input type="text" name="" v-model="myVal1"><br/>
    </div>
</template>
<script>
 export default {
    data () {
      return {
        myVal: '',
        myVal1:''
      }
    },
    computed: { //计算属性
      myValueWithoutNum () {
        return this.myVal.replace(/d/g, '')
      }
    },
    methods: {// 方法
      getMyValueWithoutNum () {
        return this.myVal.replace(/d/g, '')
      }
    },
     watch: { //监听器
      myVal1 (val, oldval) {
        console.log(val, oldval)
      }
    }
  }
</script>

连锁文档请看:https://cn.vuejs.org/v2/guide/computed.html

十四、数组更新检查实验——变异方法

变异方法

Vue
包蕴一组观察数组的变成方法,所以它们也将会触发视图更新。那些措施如下:

您打开调整台,然后用前边例子的 items
数组调用多变方法:example1.items.push({ message: 'Baz' })

轮番数组

变异方法 (mutation
method卡塔尔,以偏概全,会变动被那些点子调用的原始数组。比较之下,也会有非变异
(non-mutating method卡塔尔(قطر‎ 方法,举个例子:filter(), concat()slice()
。这一个不会改换原始数组,但连接回到一个新数组。当使用非变异方法时,能够用新数组替换旧数组:

example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})

你或者以为这将形成 Vue 吐弃现成 DOM
一视同仁新渲染整个列表。幸运的是,事实并非那样。Vue 为了使得 DOM
成分得到最大面积的录用而实现了一些智能的、启示式的不二秘籍,所以用三个包蕴相仿成分的数组去替换原本的数组是老大急忙的操作。

注意事项

出于 JavaScript 的约束,Vue 不能检查实验以下更动的数组:

  1. 当您选拔索引直接设置一个项时,举个例子:vm.items[indexOfItem] = newValue
  2. 当您改改数组的长短时,比如:vm.items.length = newLength

为了缓慢解决第一类难点,以下二种办法都能够兑现和
vm.items[indexOfItem] = newValue 相符的功能,同不经常间也将触及状态更新:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了消亡第二类主题素材,你能够运用 splice

example1.items.splice(newLength)

举例:

<template>
    <div>
        <ul id="example-1">
          <li v-for="item in items">
            {{ item }}
          </li>
        </ul>
    </div>
</template>
<script>
 export default {
    data () {
      return {
        items: [
        '11111',
        '22222',
        '33333'
        ]
      }
    },
    mounted(){
      //this.items[0] = 'aaaaa'; 这种赋值方法视图不更新数据
      this.items.splice(0, 1, 'aaaaa') // 视图更新数据
    },
  }
</script>
十二、 动用插槽分发内容
十三、this.$nextTick

在组件Nelly用 vm.$nextTick(卡塔尔(قطر‎ 实例方法特别有益,因为它没有必要全局 Vue
,况且回调函数中的 this 将活动绑定到方今的 Vue 实例上:

Vue.component('example', {
  template: '{{ message }}',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      console.log(this.$el.textContent) // => '没有更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})
十七、生命周期函数的接受

www.2138.com 3

3346068135-580822cd52898_articlex.png

beforecreate : 举个栗子:能够在此加个loading事件
created :在此结束loading,还做一些早先化,达成函数自实施
mounted : 在这里发起后端诉求,拿回数据,协作路由钩子做一些业务
beforeDestory: 你认可删除XX吗? destoryed
:当前组件已被去除,清空相关内容

十五、 非父亲和儿子组件的通讯

不时,非老爹和儿子关系的三个零件之间也亟需通讯。在简短的现象下,能够动用八个空的
Vue 实例作为事件总线:

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

在纷纭的图景下,咱们相应考虑动用非常的气象管理形式。
一篇关于Vue2.0子同级组件之间数据人机联作小说:http://blog.csdn.net/wang_meiwei/article/details/75948844

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图