Vue純零基礎教學第三天--到走入Vue項目實際開發的心裏深處

時間 2019-12-08

標籤 vue 零基礎教學第三天走入項目實際開發心裏深處简体版

原文原文鏈接

讓咱們手摸着手大步向前走 ,最近看完曾國藩傳，以爲很不錯，還有杜月笙與孟小冬，推薦你們在寫代碼的時候，要多讀書，好增長本身的文藝氣息。多些對書的感悟，放心遊戲，多出去走走，今天的北京真冷 3月30日記。

偵聽器實現模糊搜索

// 偵聽器，實現搜索功能異步操做
    watch: {
      // es6方法中的簡寫在寫一次之後就不寫了
      //   在search 裏面 能用 nweValue 進行檢索數據
      //   模糊查詢 全部的接口經過json--server 給咱們提供的接口
      search(newValue, oldValue) {
        axios
          .get("http://localhost:3000/brands?name_like=${newValue}")
          .then(response => {
            this.items = response.data;
          })
          .catch(err => {});
      }
    },
複製代碼

VUE的核心組件和路由生命週期

組件

組件就是頁面上功能完備的區域。 結構，樣式 ，js，
    組件容許咱們使用小型，獨立和一般可服用的組件構建大型應用，仔細想任何的應用界面
    均可以抽象爲一個組件數目
    組件是能夠複用的vue 實例，且帶有一個名字
    模塊：側重於功能或者數據的封裝
    組件：包含了template style 和 script
    組件有本身的做用域
    template 每一個組件模板有且只有一個根元素
    組件中的data 要求 必須是一個函數且須要返回一個對象
複製代碼

組件的分類和使用

分類：全局註冊和局部註冊
    使用步驟：一、註冊組件，2經過名字使用組件
複製代碼

局部組件

<script>
        // 這裏不能訪問 組件中的data 
        // 組件也不能訪問new Vue 裏面的成員
      new Vue({
        el: "#app",
        // 局部組件
        components: {
             // 組件有本身的做用域
          com: {
            // 組件就是一個vue 的實例
            // 組件的模板中應該只有一個根元素
            template: "<div><span>首頁 {{msg}} </span></div>",
            data(){
                // 組件中的data 必須的一個函數,由於要讓不一樣的實例管理本身               
                return{
                    msg:'hello',
                }
            }
            
          }
        },
        methods: {}
      });
    </script>
複製代碼

全局註冊組件

// 全局組件
  Vue.component("Coma", {
    template:
      "<div><button @click='handle'>按鈕</button><span>{{count}}</span></div>",
    data() {
      return {
        count: 0
      }
    },
    methods: {
      handle() {
        this.count ++;
      }
    }
  });
複製代碼

父子組件

// 父組件
  Vue.component("parant-com", {
    template: "<div>父組件---使用子組件<child-com/></div>"
  });
  // 子組件
  Vue.component("child-com", {
    template: "<div>子組件</div>"
  });
複製代碼

父子組件介紹在父組件裏面要把子組件放到裏面才能生效 <\child-com/>css

props 父組件給子組件傳值與傳遞不一樣數據

<script>
      Vue.component("com", {
        //   props 道具 裏面是傳的是數組
        // 接收父組件傳過來的值  把外部的值傳給組件內部,這幾記住穿過來的就是字符串
        props: ["leve1", "leve2"],
        //  這裏要綁定變量 因此 咱們要綁定
        // prop 傳遞數字，布爾值，數組對象，單向數據流全部prop 向下傳輸
        template: "<div><span>{{leve1}}</span>-----<span>{{leve2}}</span></div>",
        mounted(){
            console.log(this.leve1)
        }
      });

      new Vue({
        el: "#app",
        data: {
            // leve1:1
            // leve1:true
            // 這個prop 用來傳遞 一個初始值，那這個子組件接下來但願將其做爲本地的prop數據
            // 來使用這種狀況下最後定義一個本地的data屬性將這個prop 用做初始值
            leve1:{name:'首頁'}
        },
        methods: {}
      });
    </script>
複製代碼

生命週期鉤子函數講解重點 *****

生命週期 -----從生到死生命週期鉤子函數html

beforeCreate  剛剛建立實例
created      init 注入  調用
   往下走 設置 el
   繼續走 設置 template 模板
  而後在設置與沒有設置el 與 模板  中 作出選擇

  beforeMount 沒有掛載 時候能夠進行干預
  mounted     編譯好的模板替換到 el 掛載頁面上頁面加載完畢
  
beforeUpdate  數據更新一變化 執行函數更新
updated        更新完畢渲染

beforeDestroy  開始銷燬 監聽器 事件
destroy       銷燬完成 
複製代碼

使用$mount

使用render 傳遞組件傳值

鉤子函數運行原理與機制

<body>
    <div id="app">
      <input ref="txt" type="text" v-model="something" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          msg: "hello VUe",
          something: ""
        },
        //    鉤子函數 beforecreate 在頁面建立好就執行了
        beforeCreate() {
          console.log("beforeCreate", this.msg);
        },
        // 能夠獲取到data 或者methods 中的成員
        created() {
          console.log("created", this.msg);
        },
        // 當vue 實例 的el 節點或組件掛載到頁面之前運行此函數
        beforeMount() {
          console.log("beforeMount", this.$refs.txt);
        },
        // 當vue 實例el 節點或組件掛載到頁面之後運行此函數
        mounted() {
          console.log("mounted", this.$refs.txt);
        },
        // 當vue 實例數據 發生改變時觸發此函數
        beforeUpdate() {
          console.log("moubeforeUpdatented");
        },
        // 當vue 實例數據 發生改變後觸發此函數
        updated() {
          console.log("updated");
        },
        // vue 實例銷燬以前觸發
        beforeDestroy() {
          console.log("beforeDestroy");
        },
        // vue 實例銷燬
        destroyed() {
          console.log("destroyed");
        }
      });
    </script>
  </body>
複製代碼

前端路由單頁應用

單頁應用，是在一個頁面完成全部的業務功能，瀏覽器一開始會加劇必須的HTML css 和 javaSCRIPT 以後操做這張頁面完成一切都是 js 來控制前端

優勢：
    操做體驗流程
    徹底的前端組件化
缺點：
    首次加載大量資源
    對搜索引擎不友好
    開發難度相對較高
複製代碼

單頁應用實現的原理前端路由 DEMO

hash 路由
謹記：前端路由是經過錨點來識別的
複製代碼

<body>
    <div id="app">
      <ul>
        <li>
          <a href="#/users">用戶管理</a>
        </li>
        <li>
          <a href="#/rights">權限管理</a>
        </li>
        <li>
          <a href="#/roles">角色管理</a>
        </li>
      </ul>
    </div>
    <div id="container"></div>
    <script>
      // 當錨點發生變化
      window.onhashchange = function() {
        //   獲取錨點
        var hash = location.hash;
        hash = hash.replace("#", "");
        // 把錨點當成路徑來判斷
        var container = document.getElementById("container");
        switch (hash) {
          case "/users":
            container.innerHTML = "這裏是用戶管理";
            
            <!--這裏記得使用break 啊否則有穿透效果的 -->
            
            break;
          case "/rights":
            container.innerHTML = "這裏是權限管理";
            break;
          case "/roles":
            container.innerHTML = "這裏是角色管理";
            break;
        }
      };
    </script>
  </body>
複製代碼

router-view

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <ul>
        <li>
          <a href="#/users">用戶管理</a>
        </li>
        <li>
          <a href="#/rights">權限管理</a>
        </li>
        <li>
          <a href="#/roles">角色管理</a>
        </li>
      </ul>

  <!-- 給路由匹配到的組件佔位  -->
  <router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<!-- 上面是 vue-router 全局引用 -->
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
  /*
    vue-router  會全局 範圍內使用vue 自動調用vue.use註冊 vue-router  插件
    一、建立路由組件
    二、建立路由對象（設置路由規則） router 路由規則 裏面包含 route 路由規則
    三、建立vue 實例配置路由對象
   */
  var users = {
    template: "<div>用戶管理的額組件</div>"
  };
  var rights = {
    template: "<div>建立路由權限</div>"
  };
  var roles = {
    template: "<div>建立路由角色</div>"
  };

  var router = new VueRouter({
    // 設置路由規則
    routes: [
    <!-- 這裏使用 redirect  進行重定向  -->
      {path:'/',redirect:'/users'}
      { path: "/users", component: users },
      { path: "/rights", component: rights },
      { path: "roles", component: roles }
    ]
  });

  var vm = new Vue({
    el: "#app",
    router
  });
    </script>
  </body>
</html>
    <!-- 
    vue- router 是官方的路由管理器，讓構建單頁應用易如反掌官網說的
     下載 router npm install vue-router
    
     而後須要導入  在模塊化工程中使用它
     import Vue from 'vue'
     import VueRouter from 'vue-router'
    
     Vue.use(VUERouter)
     -->
複製代碼