Vue

vue2中的基本操作

2018-01-05  本文已影响68人  BULL_DEBUG

一、自定义组件

1、创建组件vue


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

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 (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：

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

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

如果你使用字符串模板，则没有这些限制。

二、组件父传子数据

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

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

2、子组件接收并引用(props验证type写法)


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) {
  // ...
})

四、父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符，故写法就像下面这样。（ 给组件绑定原生事件）

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

如果将click的native去掉，思路如下：
子组件监听父组件给的click事件，
子组件内部处理click事件然后向外发送click事件：$emit("click".fn)
改造后的代码如下(亲测可用)：

<template>
  <button class="disable-hover button ion-button" @click="_click"
          :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]">
    <span class="button-inner">
      <slot></slot>
    </span>
    <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>

五，filters用法

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

六，获取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来处理数据了；

八、keep-alive的运用；

1.基本用法

vue2.0提供了一个keep-alive组件
用来缓存组件,避免多次加载相应的组件,减少性能消耗

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

有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
在使用keep-alive的情况下

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

将首次触发请求写在created钩子函数中,就能实现缓存,
比如列表页,去了详情页 回来,还是在原来的页面

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-on、v-model

v-bind
v-on
v-model

也可以绑定数据，但是他是用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

.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
官方文档解释如下：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

我理解的官方文档的这句话的侧重点在最后那半句获取更新后的DOM，获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题，所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码，比如Swiper扩展包的

var swiper = new Swiper('.swiper-container', {
                    pagination: '.swiper-pagination',
                    nextButton: '.swiper-button-next',
                    prevButton: '.swiper-button-prev',
                    paginationClickable: true,
                    spaceBetween: 30,
                    centeredSlides: true,
                    autoplay: 2500,
                    autoplayDisableOnInteraction: false
                });
什么时候需要用的Vue.nextTick()

1、你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

2、在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

十四、生命周期函数的运用
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

上一篇下一篇

猜你喜欢

热点阅读