今天开始学习Vue.js啦，刚开始看起来，确实很难很难，但是经过一番“周折”，发现也就那样，没有想象的那么难。
下面是今天记录的代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <h1 v-text="number"></h1> <h1 v-html="number"></h1> <div v-html="info"></div> <div v-text="info"></div> </div> <div id="app-2"> </div> <div id="root"> <h1 v-on:click="handleClick">{{content}}</h1> <h1 @click="handleClick">{{content}}</h1> </div> <!-- 双向绑定 --> <div id="root1"> <!-- <div v-bind:title="'dell me '+title">hello word</div> --> <div :title="'dell me '+title">hello word</div> <input v-model="content" /> <div > {{content}} </div> </div> <!-- 计算属性 --> <div id="root3"> 姓：<input v-model="fistName" /> <br/> 名：<input v-model="lastName" /> <div>{{fullName}}</div> <!-- 侦听器,监听某一个数据的变化 --> <div>{{count}}</div> </div> <!-- v-if,v-show,v-for指令的用法 --> <div id="root4"> <div v-if="show"> hello word</div> <!-- <div v-show="show"> hello word</div> --> <button @click="headClick">toggle</button> <ul> <!-- <li v-for="item in list":keys="item">{{item}}</li> --> <li v-for="(item,index) in list":keys="index">{{item}}</li> </ul> </div> <script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ number:123, info:'<h1 style="color:red">这是信息</h1>' } }); var vm2 = new Vue({ el:'#app-2', template:'<h1>{{msg}}</h1>', data: { msg:'这是template的用法' } }) var vm3 = new Vue({ el:'#root', data: { content:'你好啊' }, methods:{ handleClick:function(){ this.content = 'word' } } }) var vm4 = new Vue({ el:'#root1', data: { title:"this is hello word", content:"this is content" } }) var vm5 = new Vue({ el:'#root3', data: { fistName:'', lastName:'', count:0 }, /* 计算属性 */ computed :{ fullName:function(){ return this.fistName+'-'+this.lastName; } }, /* 侦听器 */ watch:{ fistName:function(){ this.count++; }, lastName:function(){ this.count++; } } }) var vm6 = new Vue({ el:'#root4', data: { show:true, list:[1,2,3,4,5] }, methods:{ headClick:function(){ this.show =!this.show; } } }) </script> </body> </html>
