一
HelloWorld 工程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test Your First Vue Program</title> <style> .bg{ color: red; } </style> <script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script> </head> <body> <div class="bg"> Hello,Vue! {{msg}} </div> <script> new Vue({ el: '.bg', data:{ msg:'Messages in Vue Para' } }) </script> </body> </html>
输出
Hello,Vue! Messages in Vue Para
二 模板语法
<div id="app"> Hello,App! {{msg}}<br> {{count}}<br/> <a v-bind:href="url">百度</a> <div v-html="template"> </div> <button type="button" v-on:click="submit()">MyButton</button> </div> <script> new Vue({ el: '#app', data: { msg: 'Messages in Vue Para', count:0, url:'http://www.baidu.com', template: '<div>Hello,Template</div>' }, methods:{ submit:function () { this.count++; } } }) </script>
输出
三 监听数据
<div id="app"> Hello,App! {{msg}}<br> </div> <script> var app=new Vue({ el: '#app', data: { msg: 'Messages in Vue Para', }, watch:{ msg:function (newVal,oldVal) { console.log('newval is :' + newVal); console.log('oldval is :'+oldVal) } } }) </script>
Chrome 按F12，控制台 修改app.msg的值，页面渲染显示新的msg值，同时触发相关函数。
四 条件渲染
<div id="app"> <div v-if="count>0"> 判断1:大于0 </div> <div v-else-if="count<0"> 判断2：小于0 </div> <div v-else> 判断3：等于0 </div> Hello,App! {{msg}}<br> </div>
当Vue对象中的count值变化时，会相应渲染“判断1,”或者“判断2”，“判断3”。
五。列表渲染
<div id="app"> <div v-for="item in register_list"> {{item.name}} </div> Hello,App! {{msg}}<br> </div> <script> var app=new Vue({ el: '#app', data: { msg: 'Messages in Vue Para', register_list:[ {name:"John", age: 20} ,{ name:"Hans", age:23 } ] } }) </script>
输出
John
Hans
Hello,App! Messages in Vue Para
打的