2017.12.21 学习vue的新得

Posted 2020-10-18 shengnan_2017

温故而知新，这句话说的真的有道理。每次回顾vue总会学到不一样的知识点，我就在想，我第一遍到底看了什么？

废话不多说，简要记录今天的所得：

1.v-if 与 v-show

   同：都是条件渲染

  异：渲染的机制不一样

　　v-if  是“真正”的渲染， 通过事件监听、子组件的销毁与重建

　　v-show  是通过css来 改变视觉上的渲染 通过display属性的改变来营造出一种假象 “display : ‘none‘ ”

2.v-for 列表渲染

 　　v-for = "item in items "  

　　遍历数组  可以接受第二个参数  index

　　v-for = "（item，index） in items "

　　遍历对象 可以接受三个参数  第二个为 key  第三个为 index

    　v-for = "（item，key，index） in items "

3.数组的 splice（）方法  可以删除、替换、添加数据

　　Array.splice(index, num )　　删除数据  

　　　　index: 开始的位置

　　　　num：要删除的数据的个数

　　　　var fruits = ["Banana", "Orange", "Apple", "Mango"];
　　　　fruits.splice(2,2);

　　　　// Banana,Orange

　　Array.splice(index, 0 ,insertValue) 添加数据

　　　　index: 开始的位置

　　　　0：不删除任何数据

　　　　insertValue：要添加的数据

　　　　var fruits = ["Banana", "Orange", "Apple", "Mango"];
　　　　fruits.splice(2,0,"Lemon","Kiwi");

　　　　//  Banana,Orange,Lemon,Kiwi,Apple,Mango

　　Array.splice(index, num ,insertValue) 替换数据

　　   　 index: 开始的位置

　　　　num：要删除的数据的个数

　　　　insertValue：要替换的的数据

　　var fruits = ["Banana", "Orange", "Apple", "Mango"];

　　fruits.splice(2,1,"Lemon","Kiwi");

　　//  Banana,Orange,Lemon,Kiwi,Mango

4. v-for 在数组中使用，key 是必须的

5.每个组件都有自己的作用域，任何数据都不会自动进入到组件中，需要使用prop 来传递数据

6. 在一些特定元素中，要使用 is 特性来挂载组件

7. 如果想把异个对象的所有数据都作为prop进行传递 ，可以使用不带参数的v-bind

　　

todo: {
    text: "Hello 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>

8.字面量法与动态语法

这是常常犯错误之一

这是字符串“1” String

<my-component some-prop="1"></my-component>

这是数字“1”  Number

<my-component v-bind:some-prop="1"></my-component>

9.prop 验证

如果需要验证规则，则需要使用对象的形式来定义prop

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