Vue中的 el 和 mount 挂载

在vue对象中绑定块元素两种方式(菜鸟教程测试):
1.经过 vue 对象中声明 el 属性绑定操做块元素选择器vue

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

<script>
new Vue({
  el :'#app'
  data: {
    message: 'Hello Vue.js!',
      good:'this ia a el test'
  }
})
</script>

展现结果
2.经过在vue对象后面.$mount('选择器')绑定操做块元素app

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

<script>
new Vue({
  data: {
    message: 'Hello Vue.js!',
      good:'this ia a mount test'
  }
}).$mount('#app')
</script>

展现结果

两者从使用效果上没有区别,目的都是将vue实例化的对象挂载到DOM元素上;指定el,在模板渲染的时候会将对象渲染到模板中,若是未指定,vue对象属于‘未挂载’状态,须要手动指定挂载,在对象后面 .$mount()加上dom元素。dom

3.后面挂上Vue生命周期图:
Vue中的 el 和 mount 挂载ide

注意别和钩子mounted搞混淆了,mount至关于选择器的挂载,mounted是在vue对象加载DOM文件以前须要干的事情写在里面.测试

相关文章
相关标签/搜索