当前阅读教程:Vue.JS入门教程 > 示例:Vue中变量的显示和自定义方法(函数)使用 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Vue.js起步 | 下一篇: 示例:data内容的另外一种定义方式 |
代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js 起步</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--显示变量site的值:“淘宝网”--> <h2>网站名称:{{site}}</h2> <!--显示变量url的值:“www.taobao.com”--> <h3>网站网址:{{url}}</h3> <!--显示函数details的返回值:“淘宝网 - 购物的天堂!”--> <h4>最终结果:{{details()}}</h4> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app', //app为前面div区块的id的值,通过"#"号绑定 //data区域定义属性/变量的值 data: { site: "淘宝网", //定义变量site的值 url: "www.taobao.com" //定义变量url的值 }, //methods区域里面定义自己所写的函数 methods: { //自定义了一个函数,名称为details details: function() { //调用该函数的时候,会返回下面的值 return this.site + " - 购物的天堂!"; } } }) </script> </body> </html> 效果图示例分析可以看到在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在上面实例中 id 为 app,在 div 元素中: <div id = "app"></div> 这意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。 接下来我们看看如何定义数据对象。 data 用于定义属性,实例中有二个属性分别为:site、url。 methods 用于定义的函数,可以通过 return 来返回函数值。 {{ }} 用于输出对象属性和函数返回值。 当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--显示变量site的值:“淘宝网”--> <h2>网站名称:{{site}}</h2> <!--显示变量url的值:“www.taobao.com”--> <h3>网站网址:{{url}}</h3> <!--显示函数details的返回值:“淘宝网 - 购物的天堂!”--> <h4>最终结果:{{details()}}</h4> </div> |
|
上一篇: Vue.js起步 | 下一篇: 示例:data内容的另外一种定义方式 |