摘要:Vue的导入是和jq一样的方式 创建一个Vue的实例 computed是在HTML DOM加载后马上执行的, 如赋值;而methods则必须要有一定的触发条件才能执行,如点击事件 <!doctype html> <html lang="en"> <head> <
Vue的导入是和jq一样的方式 创建一个Vue的实例 computed是在HTML DOM加载后马上执行的, 如赋值;而methods则必须要有一定的触发条件才能执行,如点击事件 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>VueJS实例:两个数相加</title> <script src="js/Vue.js"></script> </head> <body> <div id="test"> <input type="text" v-model="first"> <input type="text" v-model="second"> <p>{{first}}+{{second}}={{inputNum}}</p> </div> <script> //Vue的导入是和jq一样的方式 // 创建一个Vue的实例 // computed是在HTML DOM加载后马上执行的, // 如赋值;而methods则必须要有一定的触发条件才能执行,如点击事件; // watch用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。 // 所以他们的执行顺序为:默认加载的时候先computed再watch,不执行methods;等触发某一事件后,则是:先methods再watch。 new Vue({ el: '#test', data:{ first:1, second:2, }, computed:{ inputNum:function(){ return parseInt(this.first)+parseInt(this.second) } } }); </script> </body> </html>
批改老师:韦小宝批改时间:2019-01-11 15:27:06
老师总结:写的很不错 很完整 vue还是很强大的吧 课后记得没事多练习哦