2.1vue实例属性：el和name属性

最新推荐文章于 2024-04-23 09:40:10 发布

堵车了

最新推荐文章于 2024-04-23 09:40:10 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45660035/article/details/111120924

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

2.1vue实例属性：el和name属性

el属性

el被限制使用在创建vue实例时使用，它的主要作用是去挂载一个页面上存在的DOM元素，简单点说就是和页面的一个元素绑定，然后对该元素能够进行操作，和jquery操作元素差不多，只是换了一个形式。

1.代码展示

<style>
  .colorStyle {
    color:red;
  }
</style>

<body>
  <div id='app'>
    <p :class="{colorStyle: isShow}">{{message}}</p>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '绑定app元素，对其进行操作',
        isShow: true
      }
    });
  </script>

</body>

2.过程分解

在这里插入图片描述

name属性

name属性被限制在使用组件里面，组件是不需要去挂载DOM元素，name属性只是给组件取一个名字，主要是好辨别是哪个组件。

1.代码展示

<body>
  <div id='app'>
    <cpn></cpn>
  </div>

  <template id='cpn'>
    <div>
      这是组件里面的数据
    </div>
  </template>

  <script>
    const cpn = {
      name: 'test',
      template: '#cpn',
    }
    const app = new Vue({
      el: '#app',
      components: {
        cpn,
      }
    });
  </script>

</body>

堵车了

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
2.1vue实例属性：el和name属性

2.1vue实例属性：el和name属性el属性el被限制使用在创建vue实例时使用，它的主要作用是去挂载一个页面上存在的DOM元素，简单点说就是和页面的一个元素绑定，然后对该元素能够进行操作，和jquery操作元素差不多，只是换了一个形式。1.代码展示<style> .colorStyle { color:red; }</style><body> <div id='app'> <p :class="{color
复制链接

扫一扫