查看“Vue从入门到实战:Vue实例”的源代码
←
Vue从入门到实战:Vue实例
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
在一个使用Vue.js的框架的页面应用程序中,至少要创建一个Vue实例,语法为new Vue( ). Vue实例充当了MVVM模式中的ViewModel. 在选项对象中,通过el属性绑定要渲染的View, data属性指定一个Model ,所有的数据都在该数据对象中定义。 <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello Vue.js</title> </head> <body> <!--View--> <div id="app"> <!--简单的文本插值--> <p>{{message}}</p> <!--使用 JavaScript 表达式--> <p>{{message.toUpperCase()}}</p> <!--HTML代码将以普通文本的方式输出--> <p>{{spanHtml}}</p> <!--输出HTML代码--> <p v-html="spanHtml"></p> <!--使用v-bind指令对HTML元素的属性进行绑定--> <a v-bind:href="url">新浪网</a> </div> <script src="vue.js"></script> <script> var vm = new Vue({ el: '#app', data: { message: "Hello Vue.js", url: "http://www.sina.com.cn/", spanHtml: "<span style='color: red'>HTML元素,以红色字体显示</span>", } }) // vm.$mount("#app"); </script> </body> </html></nowiki>
返回至
Vue从入门到实战:Vue实例
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息