vue例項成員
阿新 • • 發佈：2020-12-16
Vue 例項成員
一. 什麼是Vue
可以獨立完成前後端分離時 Web專案的JavaScript框架
二.為什麼學Vue
前端三大主流框架：Angular React Vue Vue結合了其他框架優點、輕量級、中文API、資料驅動、雙向繫結、MVVM設計模式、元件化開發、單頁面應用 # vue是js漸進式框架 # 根據開發需求，可以決定vue框架控制專案的具體方位：可以為一個標籤，也可以為一個頁面，甚至可以為整個專案
# 補充:與jq對比,每個頁面都要匯入jq,才能在頁面中使用,而且jq控制的是整個頁面html,不能區域性控制
三.如何使用Vue
-
開發版本：vue.js
-
生產版本：vue.min.js
vue的匯入: <!--方式一: 本地--> <script src="js/vue.js"></script> <!--方式二: cdn--> <script src="https://cn.vuejs.org/js/vue.min.js"></script>
插值表示式: <div id="app"> <!-- {{ }} 是插值表示式,中間的info是變數,可通過vue例項成員data賦值 --> <!-- 注意:插值表示式中可以寫基礎型別的資料,只有寫變數時才能被data賦值--> {{ info }} {{ 'info' }} 渲染到頁面是: info </div>
<1>Vue例項:
<script> new Vue({ // 例項成員 }) </script> <!-- 例項與頁面掛載點(標籤)一一對應 一個頁面中可以出現多個例項對應多個掛載點 例項只操作掛載點內部內容 -->
<2>例項成員:
- 掛載點 | el
使vue與html頁面結構建立關聯
<body> <div id="app">
</div>
<div class='app01'>
</div>
</body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app' // 掛載點(此處通過ID掛載) 控制了ID為app的標籤 })
new Vue({
el: '.app01' //也可以通過class掛載, 控制了class為app01的標籤
}) </script>
注意:
1) html標籤與body標籤不能作為掛載點
2) 一個Vue例項物件只掛載一個匹配標籤，所以掛載點一般用id標識
- 資料 | data
<body> <div id="app"> {{ info }} {{ 'info' }} <p>{{ num }}</p> <p>{{ result }}</p> <p>{{ arr }}</p> <p>{{ dic }}</p> </div> </body> <script src="js/vue.js"></script> <script> let app = new Vue({ el: '#app', data: { info: 'message', num:100, result: true, arr: [1, 2, 3, 4, 5], dic: { name: 'xionger', age: 20 } } }) </script> <script> console.log(app); // vue物件 console.log(app.$data.info); // message console.log(app.info); // message </script>
1) data為vue環境(被掛載的標籤內部)提供資料，採用字典{變數名:值}形式 2) 在插值表示式{{}}中，直接書寫資料的key(變數名)來訪問資料(值) 3) 在外部通過接收例項的變數app，訪問例項成員(例項成員都用$開頭)，間接訪問到資料 app.$data.info 4) 在外部也可以通過例項變數app直接訪問資料 app.info 5) 在vue例項內部的方法methods中，使用變數，this.info (this其實就是等是app物件)
- 過濾器 | filters
<!-- 1) 過濾器本身就是處理資料的函式，可以將插值表示式中的資料作為引數傳入過濾器函式進行處理，得到的函式返回值就是處理後的結果 2) 過濾器使用語法 {{ ...變數 | 過濾器(...變數) }} 3) 過濾器在例項中用filters成員提供 4) 引數多傳不處理,少傳返回NaN -->
<body> <div id="app"> <!-- 插值表示式可以直接做簡單的運算 --> <p>{{ num + 3.5 }}</p> <!--<p>{{ msg.split('')[5] }}</p>--> 支援[]形式的索引取值
<!-- 插值表示式複雜的邏輯藉助Vue例項中filters內部函式實現 --> <p>{{ num | f1 }}</p> <p>{{ 10, 20 | f2(50, 80) }}</p> <p>{{ 10, 20,30 | f2(50, 80) }}</p> <p>{{ 10 | f2(50, 80) }}</p> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data:{ num: 100, msg: 'xionger'
}, filters:{
// 定義函式,對插值表示式內的資料做操作 f1:function (num) { return num*2 },
// 支援多個引數 f2:function (a,b,c,d) { return a+b+c+d } } }) </script>
- 方法 | methods
<!-- methods為事件提供實現體(函式) 與事件指令配合使用 -->
v-on:為事件繫結的指令
methods為事件提供實現體
<style> .box { background-color: orange } </style> <div id='app'> <p class="box" v-on:click="pClick">測試</p> <p class="box" v-on:mouseover="pOver">測試</p> </div> <script> var app = new Vue({ el: '#app', methods: { pClick () { // 點選測試 }, pOver () { // 懸浮測試 } } }) </script>
- js物件(即字典)補充
let b = 20; let dic = { a: 10, // 字典本身就是物件，key都是字串形式可以省略引號 b // 值為變數時，且與key同名，可以簡寫 }; console.log(dic)
- 插值表示式轉義 | delimters
<!-- 防止django的模板渲染語法與插值表示式衝突,前端通常會轉義插值表示式的{{ }} -->
<div id="app"> {{ msg }} {[ msg ]} </div> <script> new Vue({ el: '#app', data: { msg: '12345' }, // delimiters: ['{{', '}}'], delimiters: ['{[', ']}'], }) </script>
一個變數的值依賴多個變數(多變一)，且依賴的任意一個變數發生改變，該變數都會改變
<!-- 1) computed是用來宣告 方法屬性(偽裝成變數的方法) 的 2) 宣告的方法屬性不能在data中出現 3) 方法屬性必須在頁面中渲染使用，才會對該方法內部出現的所有變數進行監聽 4) 計算屬性的值來源於監聽方法的返回值 -->
<div id="app"> 姓：<input type="text" v-model="fName"> 名：<input type="text" v-model="lName"> 姓名：<b>{{ flName }}</b> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { fName: '', lName: '', }, computed: { // flName 要在頁面渲染 flName(){ // this.fName和this.lName是被監聽的變數 // 變數flName的值由函式的返回值決定 return this.fName + this.lName; } } }) </script>
- 監聽屬性 | watch
多個變數的值依賴一個變數(一變多)，該變數發生改變，所有依賴變數都會改變
<!-- 1) watch是用來宣告 方法屬性 的 2) watch為data中已存在的屬性設定監聽事件 3) 監聽的屬性值發生改變，就會觸發監聽事件 4) 監聽事件的方法返回值沒有任何意義 -->
<body> <div id="app"> 姓名：<input type="text" v-model="fullName"> 姓：<b>{{ firstName }}</b> 名：<b>{{ lastName }}</b> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data:{ fullName:'', firstName:'', lastName:'', }, watch:{ fullName(){ // 從data中拿到fullname進行操作 namearr = this.fullName.split(''); // 給data中的firstname和lastName賦值,渲染到插值表示式中 this.firstName = namearr[0]; this.lastName = namearr[1]; // return 的值沒有任何意義 } } }) </script>