vue中el什么时候挂载的 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue中el属性在实例挂载到页面上时进行挂载。

当创建一个Vue实例时，会通过el属性指定实例要挂载的元素。Vue会自动将el指定的元素作为挂载点，将实例的模板内容渲染到该元素中展示出来。

具体的挂载时机有以下几种情况：

在创建实例时直接指定el属性，如：
```
new Vue({
  el: '#app',
  // ...
})
```
这种情况下，实例会立即将自身挂载到id为app的元素上。
在实例创建后，通过$mount函数手动挂载，如：
```
const app = new Vue({
  // ...
})
app.$mount('#app')
```
这种情况下，实例会在调用$mount函数时，将自身挂载到id为app的元素上。
在组件中使用时，通过父组件的template或者render函数进行挂载，如：
```
Vue.component('my-component', {
  template: '<div>Hello Vue!</div>'
})
```
这种情况下，组件在父组件中使用时，会根据父组件的模板将自身渲染并挂载到父组件的相应位置上。

需要注意的是，如果没有显式指定el属性，Vue实例会在挂载之前先进行编译，然后再将生成的DOM片段替换掉el指定的元素。这意味着即使没有指定el属性，也可以通过手动调用$mount函数进行挂载。

总结起来，Vue中el属性会在Vue实例挂载时指定实例要挂载的元素，可以在创建实例时直接指定el属性，也可以在实例创建后手动调用$mount函数进行挂载。同时，组件的挂载是通过父组件的template或render函数进行的。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，el属性是一个实例的挂载元素。它指定了Vue实例应该挂载到哪个DOM元素上。Vue实例会在挂载之后，将模板编译成渲染函数，并替换挂载元素的内容。

el属性的挂载时机取决于Vue实例的创建方式和配置项的不同。以下是几种常见的情况：

创建Vue实例时指定el属性：当创建一个Vue实例时，可以通过传入一个el属性，来指定实例的挂载元素。这时，Vue实例会在创建后立即自动进行挂载。例如：

new Vue({
  el: '#app'
})

这会将Vue实例挂载到id为app的DOM元素上。

手动挂载Vue实例：有时候，需要手动控制Vue实例的挂载时机。可以使用$mount方法来手动挂载Vue实例。例如：

new Vue().$mount('#app')

这会将Vue实例挂载到id为app的DOM元素上。

Vue组件的挂载：在使用Vue组件时，组件实例会在父组件中进行挂载。当父组件的模板中使用了子组件的标签，Vue会自动为每个子组件创建一个实例，并且将其挂载到指定的DOM元素上。
动态挂载：通过Vue的动态组件功能，可以实现根据条件来挂载不同的组件。这样，实际挂载的DOM元素会根据条件的变化而变化。

需要注意的是，el属性在Vue实例中只能指定一次，一旦挂载后就不能再修改。如果想要挂载到不同的元素上，需要创建一个新的Vue实例。

总而言之，el属性的挂载时机取决于创建实例时的配置项和手动挂载的方式。根据不同的情况，Vue实例可以在创建后立即挂载，或者在特定条件下进行动态挂载。

1年前 0条评论

worktile

Worktile官方账号

在Vue中，el属性是用来指定Vue实例中要挂载的元素。当创建一个Vue实例时，el属性可以在实例的选项中进行设置。

el的挂载时机主要有以下几种情况：

在HTML中声明Vue实例：
当在HTML中直接声明一个Vue实例时，可以通过el选项指定要挂载的元素。例如：

<div id="app">
  {{ message }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

在这个例子中，将Vue实例绑定到id为"app"的元素上。Vue实例将会控制id为"app"的元素内部的内容，并将数据绑定到该元素上。

在JavaScript中手动挂载：
除了在HTML中声明Vue实例，还可以通过手动挂载的方式将Vue实例绑定到一个元素上。例如：

<div id="app"></div>

<script>
  new Vue({
    data: {
      message: 'Hello Vue!'
    }
  }).$mount('#app')
</script>

通过调用Vue实例的$mount方法并传入要挂载的元素选择器，来手动绑定Vue实例。在这个例子中，Vue实例会将数据绑定到id为"app"的元素。

在组件中挂载：
在组件中也可以使用el属性进行挂载。在组件的实例中，el属性可以指定要挂载的父元素。例如：

<div id="app">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: '<div>{{ message }}</div>',
    data: function() {
      return {
        message: 'Hello Component!'
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>

在这个例子中，通过Vue.component方法创建了一个名为"my-component"的组件，然后在Vue实例中通过el属性将组件挂载到id为"app"的元素上。

总结：
在Vue中，el属性用于指定Vue实例要挂载的元素。可以在HTML中声明Vue实例、在JavaScript中手动挂载或在组件中挂载。根据不同的使用场景，选择相应的挂载方式。

1年前 0条评论