vue2的基础指令

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

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

vue2里的核心特点--数据双向绑定【响应】
  v-model是双向数据绑定指令
  原理:基于Object.defineProperty()封装的

指令
1.v-model 默认只用于表单元素,数据双向绑定指令
2.v-text 渲染文本指令,和{{}}插值语法等同,唯一的区别就是过滤器只能用于插值不能用于指令
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是对值监听并且返回了一个新的值,被监听的值改变以后重新计算
3.watch里可以写异步操作,computed因为许哟啊立即return所以不能有异步操作
4.watch每次只能监听一个数据,computed可以一次监听多个数据,只要其中一个数据改变就会重新计算
5.语法不同:watch对于数组对象需要开启深度监听,如果只想监听对象的某个数据使用点语法,计算属性没有数据类型的限制,但是如果要对计算
属性的值重新赋值,需要写出对象的写法,使用get和set


自定义指令  directives
全局使用vue.directive
组件内使用directives
指令,都是给标签身上附加的高级功能
 bind  第一次绑定,执行一次
 inserted  元素挂载到页面,执行一次
 componentUpdated 元素更新
 
过滤器  filter
接收一个值返回一个新值,不对原始数据修改,使用管道符和数据隔开,多个过滤器使用过个管道符隔开


  
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值