1. 首頁 > 生活百科 > >

Vue前端框架基礎+Element的使用

生活百科

前置內容：
  • AJAX基礎+Axios快速入門+JSON使用
目錄
  • vue" rel="external nofollow noreferrer">1、VUE
    • 1.1 概述
    • 1.2 快速入門
    • vue指令" rel="external nofollow noreferrer">1.3 Vue指令
      • 1.3.1 v-bind & v-model 指令
      • 1.3.2 v-on 指令
      • 1.3.3 條件判斷指令
      • 1.3.4 v-for 指令
    • 1.4 生命周期
    • 1.5 案例
      • 1.5.1 需求
      • 1.5.2 查詢所有功能
        • 1.5.2.1 實現方式
        • 1.5.2.2 編碼
      • 1.5.3 添加功能
        • 1.5.3.1 實現方式
        • 1.5.3.2 編碼
  • 2、Element
    • 2.1 快速入門
    • 2.2 Element 布局
      • 2.2.1 Layout 局部
      • 2.2.2 Container 布局容器
    • 2.3 案例
      • 2.3.1 基本頁面準備
      • 2.3.2 完整代碼展示
1、VUE1.1 概述
  • VUE：一套前端框架，免除原生JavaScript中的DOM操作，簡化書寫 。
  • VUE簡化原生JavaScript中的DOM操作示例
    • JavaScript的DOM操作示例
      // 獲取表單數據let brandName = document.getElementById("brandName").value;let companyName = document.getElementById("companyName").value;//設置數據formData.brandName = brandName;formData.companyName = companyName;
    • 使用VUE
      基于MVVM(Model-View-ViewModel)思想 ， 實現數據的雙向綁定，將編程的關注點放在數據上 。
      • 反觀 MVC 模式以對比 MVVM
        • MVC
          View（視圖）<== Controller（控制器） <==> Model（模型）
          只能實現模型到視圖的單向展示 ， 模型和視圖無綁定，當模型變化時，必須手動寫Dom進行展示
          • C：Controller，控制器，即 JS 代碼部分
          • M：Model，數據模型 ， JavaScriptObjects，如下示例代碼塊brand
          • V：View，視圖，頁面標簽，如下示例代碼塊的tableData
            for (let i = 0; i < brands.length; i++) {let brand = brands[i];// 對表格數據進行拼接tableData += "<tr align=\"center\">\n" +"<td>" + (i + 1) + "</td>\n" +"<td>" + brand.brandName + "</td>\n" +"<td>" + brand.companyName + "</td>\n" +"<td>" + brand.ordered + "</td>\n" +"<td>" + brand.destination + "</td>\n" +"<td>" + brand.status + "</td>\n" +"\n" +"<td><a href=https://www.huyubaike.com/"#\">修改</a> <a href=https://www.huyubaike.com/"#\">刪除</a></td>\n" +"</tr>"}// 設置表格對象document.getElementById("brandTable").innerHTML = tableData;
        • MVVM

          Vue前端框架基礎+Element的使用

          文章插圖
          • M：Model，數據模型，JavaScriptObjects
          • V：View，視圖，頁面標簽
          • VM：ViewModel，包括 Dom Listeners 和 Dtat Bindings  ， 由VUE提供，實現數據的雙向綁定，視圖和模型任意一者發生改變，另一者隨之改變
        • 雙向綁定效果展示
          <div id="app"><!-- 使用模型關聯插值表達式和輸入框，二者會共同發生變化 --> <!-- 輸入框綁定模型username --><input name="username" v-model="username"><!-- 插值表達式展示模型username的值 -->{{username}}</div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script> // 腳本new Vue({el:"#app",data(){return {username:""}}});</script>
1.2 快速入門
  • 示例
    1. 新建HTML頁面 ， 引入Vue.js文件
      <script src="https://www.huyubaike.com/biancheng/js/vue.js"></script>
    2. 在JS代碼區域創建Vue核心對象，進行數據綁定
      new Vue({// el屬性：即Element，確定vue控制的區域，寫入為一個選擇器，使用標簽idel: "#app",// data屬性：數據的簡化書寫格式，返回一個模型數據data() {// data() 是 ECMAScript 6 版本的新的寫法return {// 定義了username的模型數據 ， 初始化為空串username: ""}}/*data: function () {return {username:""}}*/// methods屬性：用來定義函數，暫時未使用到});
    3. 編寫視圖
      <div id="app"><!-- 使用模型關聯插值表達式和輸入框 ， 二者會共同發生變化 --> <!-- 輸入框綁定模型username --><input name="username" v-model="username"><!-- 插值表達式展示模型username的值 -->{{username}}</div>
1.3 Vue指令
指令：HTML 標簽上帶有 v- 前綴的特殊屬性，不同指令具有不同含義 。例如：v-if，v-for…

推薦閱讀