前端框架：vue2
文章目錄
- 一、介紹
- vue:常用7個屬性
- 二、基礎語法
- 1.v-bind
- 2、條件與循環（if 和 for）
- 3.**for循環**
- 4、v-on 監聽事件：
- 5、v-model
- 三、組件
- 1.使用 Vue.component() 方法注冊組件：
- 四、Axios
- 五、計算屬性
- 六、插槽
- 七、拓展：Vue-Cli
- webpack
- 八、Vue Router路由
一、介紹
<div id="app">{{ message }} </div> var app = new Vue({el: '#app',data: {message: 'Hello Vue!'} })vue:常用7個屬性
- el屬性
用來指示vue編譯器從什么地方開始解析 vue的語法，可以說是一個占位符。 - data屬性
用來組織從view中抽象出來的屬性，可以說將視圖的數據抽象出來存放在data中。 - template屬性
用來設置模板，會替換頁面元素，包括占位符。 - methods屬性
放置頁面中的業務邏輯，js方法一般都放置在methods中 - render屬性
創建真正的Virtual Dom - computed屬性
用來計算
Vue.js 計算屬性，計算屬性在處理一些復雜邏輯時是很有用的 - watch屬性
Vue.js 監聽屬性 watch，我們可以通過 watch 來響應數據的變化
watch:function(new,old){} 監聽data中數據的變化 兩個參數，一個返回新值，一個返回舊值。
二、基礎語法
1.v-bind
<!-- 完整語法 --> <a v-bind:href="url">...</a><!-- 縮寫 --> <a :href="url">...</a><!-- 動態參數的縮寫 (2.6.0+) --> <a :[key]="url"> ... </a>2、條件與循環（if 和 for）
3.for循環
在控制臺里，輸入 app4.todos.push({ text: ‘新項目’ })，你會發現列表最后添加了一個新項目。
4、v-on 監聽事件：
事件有Vue的事件、和前端頁面本身的一些事件！我們這 click 是vue的事件，可以綁定到Vue中的methods 中的方法事件！
<!-- 完整語法 --> <a v-on:click="doSomething">...</a><!-- 縮寫 --> <a @click="doSomething">...</a><!-- 動態參數的縮寫 (2.6.0+) --> <a @[event]="doSomething"> ... </a>5、v-model
三、組件
組件是可復用的 Vue 實例，說白了就是一組可以重復使用的模板
- 使用 Vue.component() 方法注冊組件
1.使用 Vue.component() 方法注冊組件：
四、Axios
說明 :
五、計算屬性
計算屬性的主要特性就是為了將不經常變化的計算結果進行緩存，以節約我們的系統開銷;
- 計算出來的結果保存在屬性中，在內存中運行：虛擬Dom
計算屬性的重點突出在 屬性 兩個字上（屬性是名詞），首先它是個 屬性 其次這個屬性有 計算 的能力（計算是動詞），這里的 計算 就是個函數；簡單點說，它就是一個能夠將計算結果緩存起來的屬性（將行為轉化成了靜態的屬性），僅此而已；可以想象為緩存！
六、插槽
- 刪除
七、拓展：Vue-Cli
vue-cli 官方提供的一個腳手架,用于快速生成一個 vue 的項目模板 ;
預先定義好的目錄結構及基礎代碼，就好比咱們在創建 Maven 項目時可以選擇創建一個骨架項目，這個骨架項目就是腳手架,我們的開發更加的快速;
主要的功能 :
-統一的目錄結構
本地調試
熱部署
單元測試
集成打包上線
webpack
八、Vue Router路由
總結
- 上一篇： 快速入门JAVA单元测试——mock
- 下一篇： 前端框架Vue3