<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入js，使用CDN方式--> <script src=" https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <!--{{ }} 用于输出对象属性和函数返回值--> <p>{{ message }}</p> <p>{{ myFun() }}</p> <!--v-html 指令用于输出 html 代码--> <div v-html="message"></div> <!--v-model数据绑定--> <input type="text" v-model="message"/> <!--v-bind 指令被用来响应地更新 HTML 属性--> <input type="text" v-bind:placeholder="message"/> <!--v-bind 缩写--> <input type="text" :placeholder="message"/> <!--v-if：指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素--> <p v-if="seen">seen的值为true</p> <p v-else="seen">seen的值为false</p> <!--v-show--> <h1 v-show="show">show Hello!</h1> <!-- v-on 指令，它用于监听 DOM 事件--> <button v-on:click="add">点我+1</button> <!-- v-on 缩写--> <button @click="sub">点我-1</button> <span>{{count}}</span> <!--v-for循环： site in sites --> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> <!--v-for循环对象--> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> <ul> <li v-for="n in 5"> {{ n }} </li> </ul> </div> <script> var vm = new Vue({//实例化 Vue el:‘#app‘,//el: DOM 元素中的 id data:{//data 用于定义属性 message:‘hello vue‘, seen: false, count:0, show:true, sites: [ { name: ‘Runoob‘ }, { name: ‘Google‘ }, { name: ‘Taobao‘ } ], object: { name: ‘菜鸟教程‘, url: ‘http://www.runoob.com‘, slogan: ‘学的不仅是技术，更是梦想！‘ } }, methods:{//methods 用于定义的函数，可以通过 return 来返回函数值 myFun:function () { return ‘function test‘; }, add:function () { return vm.count++; }, sub:function () { return vm.count--; } } }); console.log(vm.message);//vm.data对象中的属性 console.log(vm.$data);//vm.$data,Vue实例的属性data对象 console.log(vm.$el);//vm.$el,获取DOM </script> </body> </html>
原文：https://www.cnblogs.com/soul-wonder/p/9296020.html