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