vue-1

vue 是什么？

• 尤雨溪 vue.js框架的作者
  • github-vue
• 2014年2月，开源了一个前端开发库Vue.js
• Vue.js 是一个JavaScript来编写的框架

前端框架有什么用

• 框架就是给了规则,并实现细节
  • 发者按照规则,去实现业务逻辑
• 帮助我们去节省DOM操作的实现细节;
  • 将数据与页面的元素挂钩
• 双向数据绑定
  • 页面改变影响内存;内存改变影响页面

启动vue

   
      
 
    
 
 
    new Vue(options)
 
    options(选项)
   
注释：
    el: 坑
    Vue将template属性结合data属性，将数据渲染到el指定的坑中
    {{可以使用过data中的属性}} 插值表达式 也可以调用函数 也可以三元表达式；
    v-model="data的属性"

• options

  • el (字符串 或 DOM对象)
  • template || render 选其一
    • template 字符串，页面视图V(view)
      • 只能有一个根节点;
      • 在Vue2中不能用body标签;
      • template中使用的变量 data一定要声明;
      • template中使用的函数 methods一定要声明;
    • render 渲染的内容，函数；
      • render: c=>c(app)
  • data 一个函数, return一个对象；数据(Model)
  • methods 一个对象 (功能)； key(函数名)，value(函数体)

常用指令 v-

• 双向数据绑定 v-model="变量名" (变量与页面的关系)
  • 必须要在data中声明(页面改变影响内存改变)
  • 在methods中 使用data的属性 this.xxx
  • 在template中 使用data的属性 直接用 xxx
• v-if v-else 是邻居，元素的插入和移除
• v-show 是隐藏与显示
• v-text 双标签、就是元素的innerText
• v-html 双标签、就是元素的innerHTML
• v-for 变量名 in 数据
  • 以数组为数据 v-for=key="index""(ele,index) in arr" :
  • 以对象为数据 v-for="(value,key,index) in obj" :key="index"
• v-on:原生事件="表达式 || 函数"
  • 简写 => @原生事件 如： @click= "del"
  • methods 和 v-on的使用
• v-bind:属性="表达式 || 函数"
  • 简写 => :属性
  • class 结合 v-bind使用
• 特殊属性key :key = "变量值"

组件（components）

• 全局组件

  • Vue.component(组件名,组件对象);

• 子组件

  • components 一个对象； key是组件名，value是组件对象

• props 一个数组，元素是字符串，

  • 作用：声明子组件接收参数的属性名

• filter 一个对象； key(过滤器名)，value(函数)

  • return最终显示结果
  • 调用方式：{{ 原数据 | 过滤器名(参数1...) }}

• watch 监视数据

  • 一个对象； key(过滤器名)，value(函数)

  • 默认监视基本数据类型的改变；

  • 复杂数据类型 (如：数组 | 对象)需深度监视

  • 深度监视(包含其属性)：'hero': {deep:true, handler:fn(){}}

  • 注意：
    watch和页面change事件区别：

    1. change只能监测页面输入后的改变
    2. watch监视的变量的值的改变：
       • 页面改变会影响内存变量值改变；
       • 通过js代码修改 可以直接改变变量值

• computed 是一个对象 (计算属性)

  • 增强版的watch，结合多个监视变量加入监视
  • key(计算属性的名称)；value(函数)
  • return(显示结果)

父子组件属性

• 父用子
  • 父： components: {组件名：组件对象}
  • 子接收父参数：props: ['属性名']
• 父传子
  • 子：props: ['属性名']
  • 父： 通过属性名传递参数
    • 常量 属性名= "值"
    • 变量 属性名= "变量名"
  • 总结：子的数据 = props(是父给你的数据) + data(是自己的数据)

子向父组件通讯

• 0- var vm = new Vue()
• 1- :vm.$on('事件名', 回调函数(形参1, 形参2))
• 2- :vm.$emit('事件名', 数据1, 数据2)
• 补充
  • $once('事件名',fn) 只触发一次
  • $off('事件名') 关闭事件

全局API

• 声明全局对象
  • Vue.components("组件名", "组件对象")
• 全局过滤器
  • Vue.fileter(过滤器名,function(v,argv1,argv2){return 显示内容})

过滤器 (filter)

• 对数据添油加醋，改变显示
• 组件内声明过滤器组件内有效
  • filters: { 过滤器名：function( v, argv1, argv2){ return 显示内容；} }
• 全局过滤器 (全局API有写到)
• 调用过滤器
  • {{数据 | 过滤器名(参数1, 参数2)}}
• 组件内过滤器与全局过滤器同名时，优先考虑组件内过滤器

组件生命周期

• 钩子就是事件 (平时听到的 丢一个钩子就是注册一个事件)
• beforeCreate 创建前（数据没有初始化，没有数据）
• created 创建后（可以操作数据；适合操作数据； v-if="true"）
• beforeMount 装载前（没有装载数据到页面）
• mounted 装载后 (数据已装载到页面；适合操作DOM)
• beforeUpdate 更新数据前 (进行二次更新；不建议)
• updated 更新数据后 (引起更新钩子函数触发；获取最新更新)
• activated 激活组件 (结合 keep-alive v-if="true")
• deactivated 组件停用 (结合 keep-alive v-if="false")
• beforeDestroy 销毁之前 (v-if="false")
• destroyed 销毁后 (v-if="false")
• 注：keep-alive组件: 目的是缓存组件，减少频繁的创建销毁组件
  • data/methods/components/filter

获取DOM元素

• 在元素上声明 ref= "xxx"
• 在js中使用 this.$refs.span
• js中能使用的地方是 mounted