Vue.js中的extend方法绑定节点并显示

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

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

第二步，在标签中调用Vue.extend()，设置模板和数据，如下图：

第三步，使用new关键字调用$mount()，将创建的类挂载到div元素上，如下图：

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

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

第六步，调整模板标签属性嵌套，去掉多层标签元素，只留下一个div标签；去掉class前面的“:”，如下图：

最近发表

猜你喜欢

相关文章