VUE框架 详解入门
目錄
?
一、VUE框架原理
1. 了解VUE框架
2. VUE框架原理
3. MVC設計模式
4. MVVM設計模式
二、引入VUE框架
1. 本地引入
2. 網絡引入
三、安裝Vue插件
四、使用方式
1. 文本相關
2. 屬性綁定
3.?雙向綁定
4. 事件綁定
5. 遍歷
6. 判斷
一、VUE框架原理
1. 了解VUE框架
????????vue 框架 是基于MVVM設計模式的前端框架，其中的Vue對象是MVVM設計模式中的VM視圖模型。
2. VUE框架原理
????????Vue對象將頁面中 要改變的元素 和 data中變量 進行綁定，綁定后它會一直監聽data中變量值的改變，當值發生改變時，會自動找到與其綁定的元素并且讓元素跟著發生改變，改變元素的過程不需要人工干預，提高了開發效率，而且這個過程不需要像 JavaScript 那樣頻繁DOM操作去改變頁面結構，只是監聽一片區域，提高了執行效率。
3. MVC設計模式
把一個業務實現分成三部分：
Model：模型，數據模型 是服務器獲取到數據的部分代碼
View：視圖，頁面部分代碼
Controller：控制器，把數據模型中的數據，通過實現 展示到頁面中
????????有一個缺點，需要頻繁DOM操作，對文檔對象模型，頻繁全部掃描，如果頁面內容多，掃描效率低
4. MVVM設計模式
Model：模型，數據模型 是服務器獲取到數據的部分代碼
View：視圖，頁面部分代碼
VM：視圖模型，它會將頁面可能發生改變的元素和變量進行綁定，當變量改變時 元素的值也會改變，不需要頻繁掃描，提高了效率和用戶體驗。
二、引入VUE框架
1. 本地引入
把框架文件下載到本地 通過 JS外部引入中用本地連接 導入實現。
<script src="js/vue.min.js"></script>?
2. 網絡引入
從服務器直接引入項目，通過 JS外部引入中用網絡路徑 導入實現
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>三、安裝Vue插件
File -> Settings -> Plugins 搜索Vue ，安裝完之后重啟idea
完成上面準備工作就可以用Vue框架 完成開發工作了。
四、使用方式
1. 文本相關
{{變量}}：插值，定義在標簽里，讓此處文本內容和變量進行綁定
v-text="變量" ：定義在標簽中，讓元素的文本內容和變量進行綁定
v-html="變量"：定義在標簽中，讓元素的標簽內容和變量進行綁定
<body> <div><!--{{變量}}:插值,讓此處顯示的文本和變量進行綁定-->{{info}}<b>{{info}}</b><h1>{{info}}</h1><!--v-text 讓元素的文本內容和變量進行綁定,必須依賴某個標簽--><p v-text="info"></p><!--v-html讓元素的標簽內容和變量進行綁定--><p v-html="info"></p> </div> <script src="vue.min.js"></script> <script>new Vue({el:"div",data:{info:"文本<b>加粗</b>"}}) </script> </body>2. 屬性綁定
讓元素 屬性的值 和 變量進行 單向綁定，當屬性值發生變化 變量也發生改變
結構：
v-bind:屬性名=“變量”;
或 :屬性名="變量";
<body> <div><!--:屬性名=變量 讓元素的屬性和變量進行綁定--><input type="text" :value="info"><input type="text" v-bind:value="info"><a :href="url">超鏈接</a><img :src="imageName" alt=""> </div> <!--引入網絡版的Vue框架 Vue插件才會正常工作--> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script> <script>new Vue({el: "div",data: {info: "屬性綁定",url:"http://www.baidu.com",imageName:"head.jpg"}}) </script> </body>3.?雙向綁定
定義在標簽中，讓控件的value值和變量進行雙向綁定,變量影響頁面 同時頁面的改動也會影響變
結構：v-model="變量"
<body> <div><!--v-model="變量"讓控件的value值和變量進行雙向綁定,變量影響頁面 同時頁面的改動也會影響變量--><input type="text" v-model="info">{{info}}<h1>注冊表單</h1><form action="">用戶名:<input type="text" v-model="user.username"><br>密碼:<input type="password" v-model="user.password"><br></form> </div> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script> <script>let v = new Vue({el: "div",data: {info: "雙向綁定",user:{username: "",password: ""}}}) </script> </body>4. 事件綁定
綁定元素的事件，當條件滿足觸發時，會觸發方法
如：
點擊事件(鼠標點擊時觸發)：v-on:click="方法" 或 @click="方法"
<div><input type="button" value="按鈕1" @click="f()"><input type="button" value="按鈕2" v-on:click="f()"> </div> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script> <script>let v = new Vue({el: "div",data: {},methods: {f: function () {console.log("按鈕點擊了");}}}) </script> </body>5. 遍歷
讓元素顯示數量和數組進行綁定，變量數組中每一個對象
結構：v-for="(變量,i) in 數組變量" --- i 是下標
<body> <table border="1"><caption>汽車列表</caption><tr><th>編號</th><th>品牌名稱</th><th>售價</th><th>類型</th></tr><tr v-for="(car,i) in arr"><td>{{i+1}}</td><td>{{car.name}}</td><td>{{car.price}}</td><td>{{car.type}}</td></tr> </table> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script> <script>let v = new Vue({el:"table",data:{arr:[{name:"比亞迪漢",price:250000,type:"轎車"},{name:"特斯拉m3",price:230000,type:"轎車"},{name:"蔚來ES8",price:550000,type:"SUV"}]}}) </script> </body>6. 判斷
讓元素的顯示狀態和變量進行綁定，結果為 true顯示，false不顯示
結構：v-if = ”變量“ 和 v-else
<body> <div><!--v-if="變量" 讓元素是否顯示和變量進行綁定, true顯示 false不顯示(刪除了元素)--><h1 v-if="isVisible">劉德華</h1><!--v-else和v-if結合使用 和上面條件取反--><h1 v-else>張學友</h1> </div> <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script> <script>let v = new Vue({el:"div",data:{isVisible:true}}) </script> </body>?基本信息就這些，可以進行簡單使用了
總結
以上是生活随笔為你收集整理的VUE框架 详解入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 工具分享（5）：用H5开发一个合租记账A
- 下一篇： VMWare不使用简易安装，手动安装IS