查看“第一个Vue程序”的源代码
←
第一个Vue程序
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==案例1== ===引入vue文件=== <nowiki> <head> <meta charset="utf-8"> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head></nowiki> ===视图层=== <nowiki> <div id="app"> {{ message }} </div></nowiki> ===脚本=== 创建一个叫app的Vue对象, 绑定元素app ,赋值message 'Hello Vue' <nowiki> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script></nowiki> ===全部代码=== <nowiki> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head> <body> <div id="app"> {{ message }} </div> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> </nowiki> ==案例2== 段代码不难理解,我们的Model就是data变量,而ViewModel就是这里的new Vue()得到的对象。这里两个最简单的属性相信大家一看就能明白。 *el:表示绑定的Dom元素,此例子中表示的是父级的Dom元素。 *data:需要绑定的数据Model。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" type="text/javascript" charset="utf-8"> </script> <title></title> </head> <body> <div id="app"> <h1>姓名:{{ Name }}</h1> <h1>年龄:{{ Age }}</h1> <h1>学校:{{ School }}</h1> </div> <script src="Content/vue/dist/vue.js"></script> <script type="text/javascript"> //Model var data = { Name: '小明', Age: 18, School:'光明小学', } //ViewModel var vue = new Vue({ el: '#app', data: data, }); </script> </body> </html></nowiki>
返回至
第一个Vue程序
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息