缺芯難解：AMD 第三季度營收 43.1 億美元同比增長 54%，預計 Q4 依然大幅增長
阿新 • • 發佈：2021-10-27
Vue基礎
VUE特點：頁面由資料生成，資料改變頁面會同步跟著改變
需要具有前端三劍客（HTML、CSS、JavaScript）以及AJAX的基礎
（開發版本有提示？）
快速入門程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html>
（建議掛載到div上，div一般無其它樣式）
程式碼示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{ message }} {{ man.name }} {{ language[0] }} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', man: { name: 'zwc', age: 22 }, language: ['java', "python"] } }) </script> </body> </html>
本地應用
v-text和v-html標籤：區別就在於前者不能解析HTML，後者可以。（Java Web中講過類似的屬性，不做過多贅述）
v-on：
v-on失效解決方法：WebStorm使用Vue.js “Namespace 'v-on' is not bound ”
v-show：
v-if：
v-bind:
測試程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="referrer" content="no-referrer" /> <style> .active{ border: 1px solid red; } </style> </head> <body> <div id="app"> <img v-bind:src="imgSrc" v-show="imgShow" :title="imgTitle" :class="{active:imgActive}"> <button @click="isShow">切換顯示</button> <button @click="isActive">切換樣式</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { imgSrc: 'https://pic.cnblogs.com/avatar/1721072/20211027133723.png', imgShow: true, imgTitle: '百度圖片', imgActive: false }, methods: { isShow: function () { this.imgShow = !this.imgShow; }, isActive: function () { this.imgActive = !this.imgActive; } } }) </script> </body> </html>