日志
Vue.js 学习日志（一）
2019-07-11 09:09
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="../static/vue.min.js"></script> </head> <body> <div id="vue_data"> <h1>title : {{title}}</h1> <h1>url : {{url}}</h1> <h1>{{info()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_data', data: { title: "Vue.js", url: "https://cn.vuejs.org" }, methods: { info: function() { return this.title + " - 坚持学习！"; } } }) </script> </body> </html> 1、每个Vue应用都需要实例化Vue来实现 var vm = new Vue({ //******* }) 2、el参数 在上面实例中的id为vue_data，在div元素中： <div id="vue_data"></div> 意味着所有的改动均在这个id为vau_data的div中，外部不受影响。 3、定义数据对象 data用于定义属性，在上述实例中有2个属性，分别为：title、url。 methods用于定义函数，可以通过return来返回函数值。 {{ }}用于输出对象属性和函数返回值。 当一个Vue实例创建时，Vue的响应系统加入了data对象中能找到的所有属性。当这些属性的值发生改变时，html视图也会产生相应的变化。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="../static/vue.min.js"></script> </head> <body> <div id="vue_data"> <h1>title : {{title}}</h1> <h1>url : {{url}}</h1> </div> <script type="text/javascript"> //数据对象 var data = {title: "Vue.js",url: "https://cn.vuejs.org"} var vm = new Vue({ el: '#vue_data', data: data }) //设置属性会影响到原始数据 vm.title = "spring"; document.write(data.title + "<br>"); //同样 data.url = "https://spring.io"; document.write(vm.url); </script> </body> </html> Vue还提供了实例属性与方法，以前缀$与用户定义的属性区分开来。 document.write(vm.$data === data) // true 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。 标签: Vue.js 学习日志（一） 阅读全文 |
上一篇： 网站设计公司有哪些实用的小技巧？