Vue & vue 以及基础语法

Vue & vue

• Vue是构造函数
• vue是实例 创建vue实例对象,用来启动应用函数接收一个对象作为参数，这个对象可以称作选项对象(可以创建多个无数个vue实例，但不这么用)
• 创建vue实例来启动应用

选项对象

• el(element):"CSS选择器"；//大多数用ID
• data:应用的数据，任意数据类型,以键值对的形式。//是一个对象
• methods:写方法
• computed :计算属性
• template :组件 ···

小胡子语法（mustache）

• 语法：，插值表达式

双大括号 {{}}：小胡子语法/mustache语法 / 模板语法 / 插值表达式 将VUE的实例绑定到DOM上，有以下好处：

• 能解析变量，
• 计算
• 能使用js对象的方法

computed

computed:{
  msg(){
    console.log(this.msg + "123")
  }
}

watch

  // 监听
  watch：{
    msg:function(){
      console.log(oldval,newold)
    }
  }
  // 以下是深度监听
  watch: {
    "msg.name": function (oldval, newval) {
      console.log(oldval,newval )
    },
  },
  // 或者
  watch: {
    msg: {
      handler: function ( oldval,newval) {
        console.log(oldval.name,newval.name )
      },
      deep: true
    }
  },

• 区别
  • computed
    • 有缓存 ，
    • 有两个函数 set(){} get(){}
    • 同步代码
  • watch
    • 没有缓存，新旧值替换
    • 可以执行异步代码
    • 监听对象需要deep 且拿不到 oldval

$nextTick

原理 (opens new window)