4 / 2 说说你对vue的extend(构造器)的理解,它主要是用来做什么的?

前面的话

前端日问,巩固基础,不打烊!!!每天花20分钟巩固,思考总结。

解答

我们所创建的实例都是通过new Vue()的形式创建出来的。在一些特殊情况下,我们要动态的去创建Vue实例,Vue提供了Vue.extend$mount两个方法来手动挂载一个实例。

Vue.extend(options)是基础Vue构造器,创建一个“子类”,参数是一个包含组件选项的对象。

简单举例
 <body>

    <!-- <div id="users"></div> -->
    <!-- 或者 -->
     <users></users>
</body>
 
 
<script>
    // 使用Vue.extend编写一个扩展实例
    var users = Vue.extend({
     
        template: '
Hello:{ {name}}
'
, data: function() { return { name: 'xiaoqi' } } }); // 手动挂载: // new users().$mount('#users'); // 或者 new users().$mount('users'); </script>

如果Vue实例在实例化时没有收到el选项,它就处于未挂载 状态。我们可以手动使用$mount挂载一个未挂载的实例。

如果在html中对应两种方法调用:

  • 自定义标签
  • 普通标签
使用propsData
// 使用Vue.extend编写一个扩展实例
    var users = Vue.extend({
     
        template: '

{ {author}} & { {name}}

'
, props: ['name'], data: function() { return { author: '作者:', url: `https://blog.csdn.net/qq_41257129` } } }); new users({ propsData: { name:"xiaoqi"}}).$mount('users');

使用propsData可以传递数据。
4 / 2 说说你对vue的extend(构造器)的理解,它主要是用来做什么的?_第1张图片

你可能感兴趣的:(#,Vue,vue)