Vue基础概念

191 阅读2分钟

一  7个类的实例属性 和实例方法

  1.  el 指定当前viewmodel所管理的视图位置vue自动启动过程中需要依赖el手动启动 Vue.$mount("#***")
  2. deta :用来组织从view中抽象出来的数据模型(页面所以来数据) (状态属性)
  3.  methods:用来组织从view中抽象出来的方法(页面以来的方法)
  4.  temolate:和5号二选一(推荐使用此方法) 维护 有且只有一个根元素 Vue.createElement
  5.  render : 以Vnode方式来创建view 2(diff)3(compiler->dom - >el)
  6.  computed: (计算属性(data))针对data中的属性进行计算结果
  7.  watch 监听

二 8个hook方法

      1. 创建期berforeCreate created

      2.挂载期berforMount mounted

    以上四个方法在整个生命周期内只会执行一次

     3.更新期 berforUpdate updated(加载一个新的页面)

   以上两个方法在整个生命周期内当data中的值变化时就会调用 当执行了销毁期,

   以上两个方法就直接销毁

     4. 销毁期 berforDestroy destroyed 

   以上两个方法在整个生命周期内只执行一次

三  7个核心指令

  1.  v-if 条件渲染指令 根据其后表达式的bool值进行判断是否渲染该元素
  2. v-show 与v-if类似 只渲染其身后表达式为false的元素 而且会给这样的元素添加css代码 如:style="display:none"
  3.  v-else 必须跟在v-if/v-show指令后,不然不起作用如果v-if/v-show指令的表达式为true 则else元素不显示;如果v-if/v-show指令表达式为false 则else元素会显示在页面上
  4.  v-for 类似JS的遍历 用法为v-for="item in items" items是数组,item为数组中的数组元素
  5.  v-bind 这个指令用于响应的更新HTML特性, 比如绑定某个class元素或元素的style样式
  6.  v-on 用于监听指定元素的Dom事件 比如点击事件
   7.  v-model 用于表单元素,进行双向数据绑定

四 未知

注:后期待修改