VUE框架 详解入门
目錄
?
一、VUE框架原理
1. 了解VUE框架
2. VUE框架原理
3. MVC設(shè)計模式
4. MVVM設(shè)計模式
二、引入VUE框架
1. 本地引入
2. 網(wǎng)絡(luò)引入
三、安裝Vue插件
四、使用方式
1. 文本相關(guān)
2. 屬性綁定
3.?雙向綁定
4. 事件綁定
5. 遍歷
6. 判斷
一、VUE框架原理
1. 了解VUE框架
????????vue 框架 是基于MVVM設(shè)計模式的前端框架，其中的Vue對象是MVVM設(shè)計模式中的VM視圖模型。
2. VUE框架原理
????????Vue對象將頁面中 要改變的元素 和 data中變量 進行綁定，綁定后它會一直監(jiān)聽data中變量值的改變，當值發(fā)生改變時，會自動找到與其綁定的元素并且讓元素跟著發(fā)生改變，改變元素的過程不需要人工干預，提高了開發(fā)效率，而且這個過程不需要像 JavaScript 那樣頻繁DOM操作去改變頁面結(jié)構(gòu)，只是監(jiān)聽一片區(qū)域，提高了執(zhí)行效率。
3. MVC設(shè)計模式
把一個業(yè)務(wù)實現(xiàn)分成三部分：
Model：模型，數(shù)據(jù)模型 是服務(wù)器獲取到數(shù)據(jù)的部分代碼
View：視圖，頁面部分代碼
Controller：控制器，把數(shù)據(jù)模型中的數(shù)據(jù)，通過實現(xiàn) 展示到頁面中
????????有一個缺點，需要頻繁DOM操作，對文檔對象模型，頻繁全部掃描，如果頁面內(nèi)容多，掃描效率低
4. MVVM設(shè)計模式
Model：模型，數(shù)據(jù)模型 是服務(wù)器獲取到數(shù)據(jù)的部分代碼
View：視圖，頁面部分代碼
VM：視圖模型，它會將頁面可能發(fā)生改變的元素和變量進行綁定，當變量改變時 元素的值也會改變，不需要頻繁掃描，提高了效率和用戶體驗。
二、引入VUE框架
1. 本地引入
把框架文件下載到本地 通過 JS外部引入中用本地連接 導入實現(xiàn)。
<script src="js/vue.min.js"></script>?
2. 網(wǎng)絡(luò)引入
從服務(wù)器直接引入項目，通過 JS外部引入中用網(wǎng)絡(luò)路徑 導入實現(xiàn)
<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框架 完成開發(fā)工作了。
四、使用方式
1. 文本相關(guān)
{{變量}}：插值，定義在標簽里，讓此處文本內(nèi)容和變量進行綁定
v-text="變量" ：定義在標簽中，讓元素的文本內(nèi)容和變量進行綁定
v-html="變量"：定義在標簽中，讓元素的標簽內(nèi)容和變量進行綁定
<body> <div><!--{{變量}}:插值,讓此處顯示的文本和變量進行綁定-->{{info}}<b>{{info}}</b><h1>{{info}}</h1><!--v-text 讓元素的文本內(nèi)容和變量進行綁定,必須依賴某個標簽--><p v-text="info"></p><!--v-html讓元素的標簽內(nèi)容和變量進行綁定--><p v-html="info"></p> </div> <script src="vue.min.js"></script> <script>new Vue({el:"div",data:{info:"文本<b>加粗</b>"}}) </script> </body>2. 屬性綁定
讓元素 屬性的值 和 變量進行 單向綁定，當屬性值發(fā)生變化 變量也發(fā)生改變
結(jié)構(gòu)：
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> <!--引入網(wǎng)絡(luò)版的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值和變量進行雙向綁定,變量影響頁面 同時頁面的改動也會影響變
結(jié)構(gòu)：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. 事件綁定
綁定元素的事件，當條件滿足觸發(fā)時，會觸發(fā)方法
如：
點擊事件(鼠標點擊時觸發(fā))：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. 遍歷
讓元素顯示數(shù)量和數(shù)組進行綁定，變量數(shù)組中每一個對象
結(jié)構(gòu)：v-for="(變量,i) in 數(shù)組變量" --- 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. 判斷
讓元素的顯示狀態(tài)和變量進行綁定，結(jié)果為 true顯示，false不顯示
結(jié)構(gòu)：v-if = ”變量“ 和 v-else
<body> <div><!--v-if="變量" 讓元素是否顯示和變量進行綁定, true顯示 false不顯示(刪除了元素)--><h1 v-if="isVisible">劉德華</h1><!--v-else和v-if結(jié)合使用 和上面條件取反--><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>?基本信息就這些，可以進行簡單使用了
總結(jié)
以上是生活随笔為你收集整理的VUE框架 详解入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 工具分享（5）：用H5开发一个合租记账A
- 下一篇： VMWare不使用简易安装，手动安装IS