vue基础知识

属性与方法

• 每个vue实例都会代理其data对象里所有的属性
• vue实例暴露了一些有用的实例属性与方法，这些属性与方法都有前缀$，以便与代理的data属性区分

实例生命周期

• created钩子------在实例被创建后被调用
• mounted----当编译好的HTML被挂载到对应的位置,这个操作完成后触发
• updated----当data中的数据改变,并且虚拟DOM重新渲染完成后触发
• destroyed
• 概要: 钩子的this 指向调用它的实例

指令

• v-bind
  • 原有： <a v-bind:href="url"></a> 缩写： <a :href="url"></a>
• v-on
  • 原有：<button v-on:click="doSomeThing"></button>
  • 缩写：<button @click="doSomeThing"></button>
    • .stop 阻止单击事件冒泡 <a v-on:click.stop="doThis"></a>
    • .prevent 提交事件不再重载页面
    • .capture 添加事件侦听器时使用时间捕获模式
    • .self 只当事件在该元素本身（而不是子元素）触发时触发回调
• v-if
• v-for（特殊）

计算属性

• 计算缓存vs方法(Methods)

  • 计算属性computed具有缓存，而methods无缓存

• Computed属性vs 侦听器(Watch属性)

  • watch方法--观察Vue实例上的数据变动,只要指定的数据改变就会执行预定的函数

计算setter 和getter

• get和set,顾名思义,一个是获得,一个是设置,常规上来讲,计算属性中都是有get和set方法的,默认是只有getter方法,如果需要的话,自然,你也可以写一个setter方法

v-show（其只是简单的切换display属性）

• v-show不支持template语法
• v-show不支持v-else

v-if VS v-show

• v-if
  • 当条件不成立时不会渲染
  • 切换开销较大，适合不太可能变化的场景
• v-show
  • 无论成不成立都会渲染
  • 首次渲染开销较大，但切换开销小，因此适合经常变化的场景

列表渲染

v-for

• 基本用法
  • 简单例子
  • 带有index参数
  • 使用of 替代 in
• template v-for
  • 简单例子
• 对象迭代 v-for
  • 基础用法
  • 带其他参数用法
• 整数迭代 v-for
  • 例子
• 组件和v-for
  • 包含所有类型的例子

key

• 用v-for更新已渲染过的列表时，它默认采用的是“就地复用”的原则，也就是如果数据项顺序发生了改变，vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处的元素。如果想跟踪每个节点的身份，从而重用或重新排列现有元素，可使用key。（key还可用在v-if中）

数组更新检测

• 变异方法（会改变原有数组）

  • push（）
  • pop（）
  • shift（）
  • unshift（）
  • splice（）
  • sort（）
  • reverse（）

• 重塑数组

  • filter（）
  • concat（）
  • slice（）

Prop（子组件从父组件获得数据）

• 使用prop传递数据

• 注意事项

  • 一般情况下是数组形式，如果要想规定props的数据类型（后面用中括号 [ ]）。默认值等（见props验证），则是对象了（后面用花括号 { }）
  • 关于命名:要不然全小写,要不然kebabCase（驼峰式),kebab-case（短横线隔开式）Vue 能够正确识别出小驼峰和下划线命名法混用的变量

• 动态Prop（使用v-bind）:在模板中，要动态地绑定父组件的数据到子组件模板的 props，和绑定 Html 标签特性一样，使用v-bind绑定

  • 局部注册组件
  • 全局注册组件

• 字面量语法vs动态语法

• 单向数据流

  • 解释

    • 父组件数据更新后，子组件的所有prop都会更新为最新值，但是反过来就不会。（注意 ：如果prop为数组或对象时，子组件改变prop，父组件的状态也会受到影响，因为数组或对象是引用类型，他们指向同一个内存空间。）如果子组件的prop值被修改，则vue会给出警告。

特殊情况应对方法

• prop作为初始值传入后，可能子组件想把它当做局部数据来用的情况

  • 方法：定义一个局部变量，并用prop的值初始化它

• prop作为初始值传入，可能子组件处理成其他数据输出的情况,比如处理成去空格并大写

  • 方法：定义一个计算属性，处理prop的值并返回

自定义事件（子组件将数据传回父组件）

• 使用v-on绑定自定义事件

  • 给组件绑定自定义事件例子（用v-on来监听子组件触发的事件）
  • 给组件绑定原生事件例子--使用native修饰符

• .sync修饰符（vue 2.3）

  • 目的：使父子组件实现prop类似“双向数据绑定”（默认子组件无法更改prop的值，上边已经说到了,但是使用sync后子组件可以改变prop 的值，并传回父组件）