vue系列基础01

1,vue常用指令

• v-text
• v-html
• v-show 控制显示隐藏，最好用v-show
• v-if v-else-if v-esle
• v-for 遍历数组、对象 v-for ="(item,index) in arr"
  v-for =“(item,key,index) in obj” 对象通过Object.keys()
  需要添加 :key （动态绑定） ，可以从缓存中取，节约性能，推荐不使用index ，最好用item
• v-on v-on:click @click
• v-bind
• v-model
  • v-model.number 指定数据类型,转换数据类型
  • v-model.trim 去掉字符串两端空格
  • v-model.lazy 在输入框光标离开，change时才回变化
• v-pre 不解析
• v-cloak 在html写vue代码，在vue代码没有加载完成的时候，给vue代码加上隐藏样式
• v-once 在这里面的代码只执行一次，可以用在静态资源，节约性能

2.vue组件
1）定义组件

• 全局定义
• 局部定义，调用
  
  2）定义组件data，通过funciton 返回，这样组件之间就不会相互影响
  3）定义props
  3.vue组件继承
  1）直接从vue中继承
  
  2）从另外一个组件继承，并覆盖内容
  
  可以达到组件扩展功能
• 给组件指定parent

4.vue组件双向绑定
v-mode

5.vue插槽
1）默认插槽
首先组件定义时，添加插槽

然后调用即可使用

2）具名插槽
首先组件定义时，添加name属性

然后调用时，添加slot属性即可

3）作用域插槽
一般情况，插槽得值，取所在位置的值

我们可以在定义组件的时候，传递一个值

然后在调用组件的时候，可以通过slot-scopt获取这个对象，不过也依然可以获取当前的值

*给组件添加ref
在使用组件的时候，可以通过ref访问到组件的属性和方法，尽量不这么使用

4）子组件
可以在组件里使用组件

在子组件里，可以通过$parent 访问到子组件的上级

组件之间跨级传值
在祖父组件中定义 provide 属性

然后再孙子组件中，通过inject 属性获取祖父组件的值

注：provide 默认不提供vue的动态属性的，祖父的值变化，不会引起inject中的值变化
这时候在定义provide()时通过Object.defineProperty() 来实现动态响应

然后在使用时，通过data.value获取值