使用Vue.js时，可以使用Vue.extend()方法创建一个子类，传入的参数包含一个对象。其中，extend中的数据写入不同于vue实例化对象中的数据写入。以下示例用于说明如下操作：

第一步：创建静态页面，导入vue.js文件，在main元素的标签中插入div，设置id属性，如下图所示：

其次，在script/script标签中调用Vue.extend()设置模板和数据，如下图所示：

步骤3:使用new关键字调用$mount()，并将创建的类挂载到div元素上，如下图所示：

第四步：为了显示变量的字体和其他样式，需要添加相关的样式属性。这里，使用：class，如下图所示：

第五步：保存代码，打开浏览器预览界面效果，但控制台出现错误警告，如下图所示：

第六步，调整模板标签属性的嵌套，去掉多层标签元素，只留下一个div标签；删除了类前面的：如下图所示：