在使用vue.js中的方法定义模板时,可以使用自定义的方式,还可以使用方法。下面利用一个实例说明如何使用自定义方式进行创建模板,操作如下:
工具/原料
1
Vue.js
2
HTML5
3
CSS3
4
JavaScript
5
HBuilderX
6
浏览器
7
截图工具
方法/步骤
1
第一步,在已打开的HBuilderX工具中新建静态页面,并引入对应的核心文件,如下图所示:
2
第二步,在body标签中插入一个div标签,设置id属性;然后再插入一个label和click-data,如下图所示:
3
第三步,使用vue.js中的component()方法,创建模板click-data,如下图所示:
4
第四步,再实例化vue对象,调用el和data,给cats进行赋值10,如下图所示:
5
第五步,保存代码并直接打开浏览器预览,发现绑定数据还是使用双大括号显示,如下图所示:
6
第六步,检查代码发现在使用el时,出现了双:;修改代码之后,再次预览效果,如下图所示:
注意事项
1
注意vue.js中的模板定义和使用
2
注意使用vue.js中的模板获取事件参数
上一篇:java 过滤特殊字符的办法
下一篇:英雄战魂——玩转职业,赚取金币