Vue组件及其嵌套（笔记）

自动聚焦的指令

Vue.directive(‘指令名’，配置项)

使用自定义指令的时候 v-指令名

inserted 被指令绑定的元素 插入到真实dom的时候自动执行

Vue.directive('xixi',{
   
  inserted(el,directive){
   
    console.log('元素插入',el,data)
    //el 被绑定的元素   directive 自定义指令对象
    el.focus()
  }
})

官网链接：钩子函数

自定义指令：全局自定义 和 局部自定义

1、通过Vue.directive 创建的指令就叫全局自定义指令

2、在所有的实例里都可以用

3、指令的创建要放到实例化的前方

1、通过实例配置项里的directives 创建的指令叫局部自定义指令

2、在哪个实例里创建在哪使用

组件

1、组件继承自实例 实例有的组件也有，会有一些变异

2、组件的目的是为了实现复用

组件的创建：

<script>
// 组件的创建
let xixi=Vue.extend({
    template:"<h1>这里是组件</h1>"})
// 注册一个组件 Vue.component('组件的名字',创建的组件)
Vue.component('Hehe',xixi)
// 把组件名当成标签名来使用 组件名不能和标签名一致

let vm = new Vue({
    
  el:'#app',
})
/*
1.组件继承自实例    实例有的组件也有，会有一些变异
2.组件的目的是为了实现复用
*/ 
</script>

全局组件创建的简写：参数1 组件名 参数2 组件的配置项

Vue.component('xixi',{
   template:'<h1>呵呵哒</h1>'})

通过Vue.component 注册的组件叫全局组件

全局组件在所有的实例里都可以使用

全局组件的注册要求也是写在实例的前方

局部组件和全局组件的创建方式是一致的 注册方式不一致

局部组件是在哪注册在哪使用

在实例的配置项里注册

局部组件注册在 实例里的配置项 components里

components:{
   
    'xixi':component,
    'hehe':{
   template:"<h1>这里是局部组件hehe</h1>"}
  }

extend???

组件的配置项 template 组件模板

最外层的template不会渲染到真实dom上

<!-- 组件模板 -->
  <template id='tp1'>
    <div class='tp1'>
      <p v-for='item in 10'>{
  {item}}</p>
    </div>
  </template>

组件配置项template
和实例里的 el 类似 关联dom元素

1. dom结构简单 直接使用字符串
2. dom复杂 template标签 该标签不会真正的渲染 该标签只允许有一个根元素

组件的配置项 data

组件正常情况下无法直接使用实例的数据 只能使用自己的数据

实例里的data 是一个对象

组件里的data是一个函数 返回一个对象 返回的对象就是我们的数据

为了保证每一个组件有单独的作用域

组件的配置项 methods

<script>


let vm1 = new Vue({
    
  el:'#app1',
  data:{
    
    name:'这里是实例'
  },
  components:{
    
    hehe:{
    
      template:'#tp1