一.Hellow Vue
el:属性可以挂载元素，data可以存储变量数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="first">{{msg}} </div> <script src="../vue.js" ></script><!--导入vue--> <script> //let是变量，const是常量 const app=new Vue({ el:'#first', data:{ msg:'Hellow Vue' } }) </script> </body> </html>二.Vue列表循环
v-for="items in list"该语句可以使得元素循环显示出列表中的所有元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="first">{{msg}} <ul> <li v-for="items in list">{{items}}</li> </ul> </div> <script src="../vue.js" ></script><!--导入vue--> <script> //let是变量，const是常量 const app=new Vue({ el:'#first', data:{ msg:'Hellow Vue', list:['艾弗森','库里','欧文','保罗','莫兰特'] } }) </script> </body> </html>三.Vue的方法定义
我们可以使用methods对象来定义Vue中需要操作的方法，使用v-on:click等为元素绑定相应的方法
有一点需要注意：注意vue对象中的data中存储的数据不能使用this.data.xxx来调用，直接this.xxx来调用
计数器案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></script> </head> <body> <div id="jishuqi"> <h2>当前计数：{{number}}</h2> <button v-on:click="add">+</button> <button v-on:click="sub">-</button> </div> <script> const app=new Vue({ el:'#jishuqi', data:{ number:0 }, methods:{ add:function(){ this.number++;//注意vue对象中的data中存储的数据不能使用this.data.xxx来调用，直接this.xxx来调用 }, sub:function(){ this.number--; } } }) </script> </body> </html>el可以传入一个字符串，也可以传入一个DOM选择器，它会根据传入的元素来选择之后管理哪一个DOM元素
data可以是一个Object，也可以是一个函数，在组件当中data必须是一个函数
