学习vue.js 第一天
生活随笔
收集整理的這篇文章主要介紹了
学习vue.js 第一天
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
最近聽到很多人都在用Vue.js ,我也想湊湊熱鬧，來個入門 啥的 ，要不以后人家說，啥都不知道，多l(xiāng)ow
看到官網(wǎng) 是這樣介紹Vue.js
Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層。
在我第一天的學(xué)習(xí)后，我覺得它和angular.js 有點(diǎn)像，至于到底是不是這樣 還需要深入學(xué)習(xí)。
我的理解 這個框架 讓我在前端數(shù)據(jù)顯示方面很簡單 ，不用再寫一堆js “+=”? 什么的 ，這只是我目前淺層的理解 ，更深的以后會學(xué)習(xí)再說。
下面是我今天學(xué)習(xí)的代碼，里面有很多注釋 是我自己的理解，希望對有需要的人有幫助，不需要的人，自動略過，謝謝。
（一）
<!DOCTYPE> <html> <head><meta charset="utf-8"><title>vue01</title><script type="text/javascript" src="../vue.js"></script> </head> <body><!--聲明式渲染 將數(shù)據(jù)渲染進(jìn)DOM系統(tǒng)有一個特點(diǎn) 元素是響應(yīng)式的 在瀏覽器控制臺里改變 app.message的值 相應(yīng)頁面上的值也會改變--><div id="app">{{message}} <!-- 數(shù)據(jù) --></div> <script>var app = new Vue({el:"#app",//這個應(yīng)該就是包含data數(shù)據(jù)的元素的class或者id，我是這么理解的 data:{message:"Hello Vue!" // 渲染在頁面上的數(shù)據(jù) }}) </script> </body> </html>?
?
（二）
<body><!--條件判斷指令--><div id ="app"><p v-if="seen">我在呢</p><p v-if="noseen">我在呢</p></div><!-- 條件循環(huán)指令 在控制臺里輸入 app1.items.push({text:"第四條"}) 頁面會多加一條--><div id="app1"><ol><li v-for="item in items">{{item.text}}</li></ol></div> <script>var app = new Vue({el:"#app",//這個應(yīng)該就是包含data數(shù)據(jù)的元素的class或者id，我是這么理解的 data:{seen:true, // 渲染在頁面上的數(shù)據(jù) noseen:false}})var app1 = new Vue({el:"#app1",//這個應(yīng)該就是包含data數(shù)據(jù)的元素的class或者id，我是這么理解的 data:{items:[{text:"第一條"},{text:"第二條"},{text:"第三條"}]}}) </script> </body>?
?
（三）
<body><!--綁定事件 單擊事件v-on:click--><div id ="app"><p v-on:mouseenter="change">{{message}}</p><button v-on:click="reverse">reverse</button></div><script>var app = new Vue({el:"#app",//這個應(yīng)該就是包含data數(shù)據(jù)的元素的class或者id，我是這么理解的 data:{message:'Hello Vue.js!'},methods:{ //方法 reverse:function(){this.message = this.message.split("").reverse().join("")},change:function(){this.message = "你好嗎？";}}})</script> </body>?
?
（四）
<body><!--雙向數(shù)據(jù)綁定 用v-model 連接數(shù)據(jù)--><div id ="app"><p>{{message}}</p><input v-model="message"></div><script>var app = new Vue({el:"#app",//這個應(yīng)該就是包含data數(shù)據(jù)的元素的class或者id，我是這么理解的 data:{message:'Hello Vue.js!'},})</script></body>?
轉(zhuǎn)載于:https://www.cnblogs.com/wangwei-exits/p/6253370.html
總結(jié)
以上是生活随笔為你收集整理的学习vue.js 第一天的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 比亚迪高端硬派越野车内饰谍照流出：中控设
- 下一篇： html5倒计时秒杀怎么做,vue 设