<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--添加类名:对象语法--> <div id="my_vue">{{message}}</div> <div id="app" v-bind:class="{'a':aa,'b':bb}"> <!--添加类名:数组语法--> <p v-bind:class="[x,y]"></p> <!--添加html--> <p v-html="xm"></p> <!--添加css样式--> <p v-bind:style="{color:my_color,fontSize:my_font}">你是傻逼</p> <!--直接绑定到一个样式对象--> <p v-bind:style="my_style">啊，你再说一次</p> <!--数组语法可以将多个样式对象应用到一个元素上--> <p v-bind:style="[my_style,my_style2]">你还是傻逼</p> <!--不会渲染--> <h1 v-if="ok">{{name}}</h1> <!--会渲染--> <h2 v-show="show">{{name}}</h2> <!--遍历json--> <p v-for="item in da"> {{item}} </p> <!--带有索引--> <p v-for="(items,index) in arr"> {{items}}---{{index}} </p> <!--绑定事件--> <p v-on:click="click">单击我</p> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> <!--内联 JavaScript 语句--> <p v-on:click="say('我是第一次')">我是第一次，被点</p> <p v-on:click="say('我是第二次')">我是第二次，被点</p> <!--计算属性：computed方法--> <p>{{bgg}} {{my_computed}}</p> <!--计算属性：methods方法--> <p>{{bgg}}:{{my_computeds()}}</p> </div> <script src="js/vue.js" type="text/javascript"> </script> <script type="text/javascript"> var x=document.getElementById('my_vue') var my_vue=new Vue({ data:{ message:'jay' } }) my_vue.$mount(x); var app_div = document.getElementById('app'); var vue = new Vue({ data: { x:'a', y:'b', bgg: '123', aa: true, bb: true, name: 'jay', ok: true, show: false, da: { 'name': 'bgg', 'age': 12, 'sex': '女' }, arr: [11, 12, 13, 14, 15, 16, 71], xm:'<div>我是插入的div</div>', my_color:'red', my_font:20+'px', my_style:{ color:'yellow', fontSize:25+'px' }, my_style2:{ background:'red' }, counter:0 }, methods: { click: function() { alert('霸气的55开') }, say:function(x){ alert(x); } }, //返回的数据放在my_computed，存在依赖关系 computed:{ my_computed:function(){ return parseInt(this.$data.bgg)+1000 } }, methods:{ my_computeds:(function(){ return parseInt(this.$data.bgg)+100 }) } }) vue.$mount(app_div); </script> </body> </html>