今天开始学习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>
