vue补充

之前对vue只是有了一个大概的了解，项目中好多东西也没用上，所以，有空就对vue进行知识补充，记录一下零零碎碎

重要的:

    在使用过程中，有的时候要动态的更改VUE中的某些数据，当这个数据为对象类型时，发现使用vm.arr[1] = '啦啦啦'更改时，数据是改变了的，但是视图却没有更新，后来搜到vue的视图层是不能检测到这种方式的数据更新的，以下方法可更改

var vm = new Vue({
        el: "#wrap",
        data: {
            myData: ['a', 'b', 'c', 'd']
        }
})
mui('#wrap').on('tap', 'button', function() {
    vm.$set(vm.myData, 1, '啦啦');  //方法一     vm.$set(obj, index, newValue);

　　 Vue.set(vm.myData, 1, '啦啦'); //方法二      Vue.set(obj, index, newValue);

})

 

1:v-for

   v-for用来做循环渲染，最简单的就是

    <li v-for="site in sites"> {{ site.name }} </li> 

 但是我们有时候也要用到当前值的索引值或者键

可以提供第二个参数为键名，如下

<ul>
    <li v-for="(value, key) in object">  //切记，第一个参数是值，第二个参数是键名
    {{ key }} : {{ value }}
    </li>
</ul>

 可以提供第三个参数为索引

<ul>
    <li v-for="(value, key, index) in object">  //切记。第一个参宿是值。第二个参数是键，第三个参数是索引
     {{ index }}. {{ key }} : {{ value }}
    </li>
</ul>

 

2 计算属性

  计算属性在处理一些复杂逻辑时是很有用的。

  例如：要反转一个字符串，我们可以这么写

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

 虽然这样写也可以实现目的，但是这样使代码看起来让人难以理解，但是使用computed计算属性就轻松多了

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值

但是！！！

如果对计算属性进行了双向绑定的话就得注意了

计算属性由两部分组成：get和set，分别用来获取计算属性和设置计算属性。默认只有get，如果需要set，要自己添加。另外set设置属性，并不是直接修改计算属性，而是修改它的依赖。

所以我们平时默认只是写了个get函数，如果对计算属性进行了数据双向绑定（v-model）并且没有写set的话，是会报错的   [Vue warn]: Computed property "fullName" was assigned to but it has no setter.,加上set就好了

html:
<div>
      <input type="text" v-model="firstName">
      <input type="text" v-model="lastName">
 </div>
    <input type="text" v-model="fullName">

js:
 data() {
      return {
        firstName: 'su',
        lastName: 'tong'
      }
    },
  computed: {
      fullName: {
　　　　　// getter
        get: function () {
          return this.firstName + ' ' + this.lastName;
        },
　　　　 //setter
        set: function (newValue) {
          let value = newValue.split(' ');//set  如果fullName改变的话，它的依赖也会改变;如果不想改变依赖的值，也可以写成空函数
          this.firstName = value[0];
          this.lastName = value[1];
        }
      }
    }

 

 

3.监听属性

 监听属性在项目中经常用到，但是用的也不全面，这里只补充自己没用到过

//常规用法 
watch : {
    count:function(newValue,oldValue){   //第一个参数是count的新值，第二个参数是旧值
　　　　document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
   }
}
//使用 watch 的深度遍历和立即调用功能

　//使用 watch 来监听数据变化的时候除了常用到 handler 回调，其实其还有两个参数，便是：

　　　　//1.deep 设置为 true 用于监听对象内部值的变化

　　　　//2.immediate 设置为 true 将立即以表达式的当前值触发回调

//使用场景，监听数据中某个对象的变化的时候，如果不加deep，就只能监听到obj的改变，obj内部的属性如果改变了的话，就监听不到了；但是加上deep就可以监听到了。同时我们也添加了 immediate: true 配置，其会立即以 obj 的当前值触发回调。

watch: {

　　obj: {

　　　　handler: function (newVal, oldVal) {

　　　　　　console.log(newVal);

　　　　},

　　deep: true,

　　immediate: true

　　}

}

4.class的绑定

   自己经常忘了动态绑定是怎么写，然后又在网上找，很麻烦，在这里一并记录下来

<div id="app">
  <div v-bind:class="{ 'active': isActive }"></div>   //如果isActive为真，就绑定active类名。否则，就不绑定

　　 <div class="static" v-bind:class="{ 'active': isActive, 'text-danger': hasError }"> </div>  //多个之间用逗号隔开

</div>

  最常见的就是给第一个元素添加"active"或者其他的类名，第一个的索引为0，加上!代表真，之后的元素都为假，这样就可以达到给第一个元素绑定class的目的

<div class="mui-indicator" :class="{'mui-active':!index}" v-for="(item,index) in imgArr"></div>

 

5  v-bind和v-model

1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"

2:v-bind用于绑定属性和数据 ，其缩写为“ : ” 也就是v-bind:id  === :id  

3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

 

6：父子组件互相调用方法

    1：子组件调用父组件的方法：

　　在子组件写   ：this.$emit('触发事件名称'，参数);  //eg:this.$emit('changePreFn',10);

　  在父组件：    触发事件名称="父级事件"           //eg:@changePreFn="changeCount"