前言
這是Vue框架的第一篇，也不說多重要，掌握的必要性這些了，懂的都懂，直接乾貨懟起來！
Vue簡介如上圖是Vue的圖示，官網上介紹Vue是一套用於構建使用者介面的漸進式框架，解釋來說Vue其實是一個JavaScript框架，相比於jQuery這些庫框架的功能更為強大，如果要使用需要遵守Vue的一整套規則，再者可以簡化DOM操作，頁面根據資料變化而變化。
第一個Vue程式 1、引入Vue的js檔案 2、編寫HTML結構 3、渲染資料Vue有兩套JS檔案，一套為開發環境版本，該版本警告提示比較全，適合除錯，另一套為生產環境版本，檔案較小執行速度較快，建議開發時使用開發環境版本，上線時切換為生產環境版本
注意Vue中使用的資料定義在data中data中可以寫複雜的資料型別渲染複雜資料型別時，遵守js的語法即可Vue指令v-text作用設定標籤的文字值（textContent）
程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> 歡迎來到：<span v-text="message"></span> <br> 今日學習：<span v-text="course"></span> <h3>v-text，比較霸道將原資料統統覆蓋掉</h3> <p v-text="info">我是自帶的資料</p> <h3>{{}}表示式和原資料和平共處</h3> <p>{{ info }}我是自帶的資料</p> <h3>表示式拼接字串</h3> <p v-text="course + '課程'"></p> <p>{{message + '真好玩'}}</p> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ message:"酉時Coding課堂", course:"前端Vue框架", info:"我是指令填充資料" } }) </script> </html> 設定標籤的innerHTML
總結v-html指令的作用是設定元素的innerHTML內容中如果有html標籤則會被解析成標籤，而v-text則不會解析成標籤v-on作用為元素繫結事件
語法格式 <div id="app"> <input type="button" value="事件繫結" v-on:click="fn1"/> <input type="button" value="事件繫結" @click="fn1"/> </div> var app = new Vue({ el:"#app", methods:{ fn1(){ //TODO } } }) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <button type="button" v-on:click="fn1()">快點我</button> <button type="button" @dblclick="fn1()">我得挨兩頓</button> <button type="button" @mousemove="change()">放上來啊</button> <p>{{msg}}</p> </div> </body> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ msg:"還沒上來" }, //使用methods塊寫方法，加s明顯可以寫多個方法 methods:{ fn1:function(){ alert("哎呀我被點了") }, change:function(){ this.msg="上來了" } } }) </script> </html>
最新評論