vue2

131 阅读3分钟

vue2

项目创建的方式

  1. vue create name 命令行的方式
  2. vue ui 图形化方式创建

项目中的命令

  • 首先在cmd命令行窗口中确认是在项目的根目录中,才能正确的启动命令
  • 开发环境命令:npm run serve
  • 打包编译命令:npm run build

vue2里的核心特点--数据的双向绑定【响应】

  • v-model 是双向数据绑定指令
  • 原理:基于Object.defineProperty()封装的

指令

  1. v-model 默认只用于表单元素,数据双向绑定指令,基于:Object.defineProperty()封装
  2. v-text 渲染文本指令,和{{}}插值语法等同,唯一的区别就是过滤器只能用于插值不能用于指令,基于innerText
  3. v-html 渲染dom指令,包含v-text指令的功能,同时可以把字符串dom变成真的dom元素,基于innerHTML
  4. v-show 控制元素的css样式的display属性,对于元素的性能开销最小,如果频繁切换优先使用
  5. v-if 控制元素的加载与销毁,会频繁的触发元素的生命周期,性能开销大,一般不推荐使用
  6. v-for 循环渲染指令,可以渲染的值类型有:数组、数字、字符串还有对象
  7. v-bind: 属性绑定指令,原生属性绑定[样式,类名],自定义属性,缩写是::
  8. v-on: 事件绑定指令,原生事件绑定[click],自定义事件,缩写是:@
  9. v-pre:原格式输出值
  10. v-once:永远只渲染第一次的值
  11. v-cloak:防止闪烁

修饰符

指令修饰符

  • v-model有:trim去掉所有空格
  • number:把输入的值转成number
  • lazy: 实时触发变成失去焦点后触发

事件修饰符

  • stop:阻止事件冒泡
  • prevent:阻止默认行为
  • native:把vue事件转成原生事件,多用于自定义组件上绑定事件
  • capture:事件捕获

混入 mixins

  • 特点:组件瘦身,功能复用。
  • 如果组件里的属性和混入里的名字一样,会用组件内的替代混入文件里的,但是生命周期会保留

监听器

  • watch

计算属性

-computed

两者的相同点

  • 都可以对数据监听

不同点

  1. computed有缓存,watch没有
  2. watch是对值的监听,值发生改变watch就会触发,computed是对值监听并返回一个新值,被监听的值改变以后重新计算N,
  3. watch里可以写一步操作,computed因为需要立即return所有不能有异步操作
  4. watch每次只能监听一个数据,computed可以监听多个数据,只要期中一个数据改变就会重新计算
  5. 语法不同:watch对于数组对象需要开启深度监听,如果只想监听对象的某个数据使用点语法,计算属性没有数据类型的限制,但是如果要对计算属性的值重新赋值,需要写出对象的写法,使用get和set

自定义指令

  • 全局使用:vue.directive
  • 组件内使用:directive
  • 指令,都是给标签身上附加的高级功能
  • bind 第一次绑定,执行一次
  • inserted 元素挂载到页面,执行一次
  • componentUpdated 元素更新

过滤器 filter

  • 接收一个值返回一个新值,不对原始数据修改,使用管道符和数据隔开,多个过滤器使用过管道符隔开