生活随笔
收集整理的這篇文章主要介紹了
Vue.js基础体验（一）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
今天開始學(xué)習(xí)Vue.js啦，剛開始看起來，確實(shí)很難很難，但是經(jīng)過一番“周折”，發(fā)現(xiàn)也就那樣，沒有想象的那么難。
下面是今天記錄的代碼：
<!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 :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><div id="root4"><div v-if="show"> hello word
</div><button @click="headClick">toggle
</button><ul><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>
總結(jié)
以上是生活随笔為你收集整理的Vue.js基础体验（一）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
