Vue.js详细说明一下extend的使用+$mount

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

文章目录

• 前言
• 一、extend是什么？
• 二、使用的两种方法
  • 1.第一种单页面直接使用extend
  • 2.第二种：运行js文件
• 总结

 

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue.js详细说明一下extend的使用+$mount

   Vue.extend 属于 Vue 的全局 API，在实际运用中很少使用，因为相比常用的 component组件写法使用 extend步骤要麻烦很多。但是在某些情况，Vue.extend + $mount 这对组合 还是需要去关注的。

二、两种使用方式

1.第一种单页面直接使用extend

代码如下（示例）：

<template>
   <div id="app"></div>  //这是实例要挂载的节点
</template>


<script>
import Vue from "vue/dist/vue";  //通过from "vue"引入vue可能会报错
let instans=Vue.extend({
    template:"<p>{{doa}{{name}}</p>",  //这里是网页里展示的模板
    data(){
       return{
          doa:"I Love ",
          name:"jsx",
         } 
    }
})


export default{
    mounted:{
      new instans().$mount("#app"); //创建实例，在页面加载后挂载到页面的app节点上
    }，
    methods:{
      //也可以在方法事件里挂载
    }
}
</script>


//以上步骤就完成了一个简单的单页面使用

2.第二种：运行js文件

代码如下（示例 ）：

//新建一个js文件，文件名随意,我的文件名就叫index.js吧
//接下来在js文件中写代码
import Vue from "vue/dist/vue";
export default function index( node ){  //写一个方法，然后export导出此方法
                                        //传入一个参数，也可以传多个，你喜欢就好
   const instans=Vue.extend({
          template：`<p>{{doa}}{{name}}</p>`,
          data(){
               return {
                  doa:"I Love",
                  name:"jsx"
                 }
           }
      })
    new instans().$mount( node );
    //创建实例，挂载到node节点，node是形参，调用时在传入实参
}
//以上都是js文间里的代码，接下来是组件里的代码，任意组件都行

<template>
   <div id="app"></div>  //将要挂载的节点
</template>

<script>
  import creat from "./views/index.js" //这里是js文件的路径
   //      ↑  
 //导入名字为creat，也可以自定义任意名字
  export default{
     mounted(){
        creat("#app");
        //直接以导入的名字，调用js里的方法，并传入获取节点的参数
     }
  }
</script>//以上就是js文件写的代码，仔细琢磨一下，其实很简单

 

---

总结

我的总结：
例如：以上就是今天要讲的内容，本文简单介绍了extend的简单用法，还请读者继续扩展。看起来很难，其实和component的用法差不多，多用就熟练了。