Vue學習日記

Vue介紹

學Vue之前，必須會HTML CSS JS(javascript)
是一個國人開發，尤雨溪，目前就職阿里巴巴

玩一個框架，首先你得下載下來吧，不管前端後端，複製圖中的連接地址，在瀏覽器打開，然後Ctrl + S 保存

版本號，等信息，

當然這個開發環境，生產環境在下面

這裏，也可以,用npm安裝

MVVM模式

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行爲抽象化，讓我們將視圖 UI 和業務邏輯分開 MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model）
Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專注於View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負責連接 View 和 Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、便捷

Vue入門程序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day01- vue</title>
  <!-- 這裏引入的是網址-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      <!-- Vue中的插值表達式，把data定義的數據顯示在此處 -->
      {{ message }}
    </div>
  <script>
    //View model
    // 創建Vue對象
    new Vue({
      el:"#app", //由Vue接管id 爲 app的區域
      data:{
          message:"hello vue", //不能加 ; 號
      }
    });
  </script>
</body>
</html>

插值表達式
數據綁定常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值，Mustache 標籤將會被替代爲對應數據對象上屬性的值。無論何時，綁定的數據對象上屬性發生了改變，插值處的內容都會更新
Vue.js 都提供了完全的 JavaScript 表達式支持。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day01- vue</title>
  <!-- 這裏引入的是網址-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      {{ message }}
      {{ true ? "ok" : "no"}}
    </div>
  <script>
    new Vue({
      el:"#app", 
      data:{
          message:"hello vue", 
      }
    });
  </script>
</body>
</html>

可以看見還支持三元

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day01- vue</title>
  <!-- 這裏引入的是網址-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      <!-- Vue中的插值表達式，把data定義的數據顯示在此處 -->
      {{ message }}
      <!-- 三元運算符-->
      {{ true ? "ok" : "no"}}
      <!-- 數學運算 -->
      {{ number*10 }}
      <!-- 插值表達式不支持 -->
      {{ var a = 1; }} 
    </div>
  <script>
    //View model
    // 創建Vue對象
    new Vue({
      el:"#app", //由Vue接管id 爲 app的區域
      data:{
          message:"hello vue", //不能加 ; 號
          number:100
      }
    });
  </script>
</body>
</html>

可以看見這裏什麼也沒有，還跟你報了個錯

Vue常見指令

v-on:click=" " 這是一個點擊事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day02 - vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
       <!-- 單引號裏面一定要套雙引號 雙引號裏面一定要套單引號 -->
       <button v-on:click="test('變換了內容')">{{ message }}</button>
     </div>

<script>
    //View model
    // 創建Vue對象
    new Vue({
        el:"#app", //由Vue接管id 爲 app的區域
        data:{
            message:"vue中的點擊事件", //不能加 ; 號
        },//這裏一定要加逗號
        methods:{
            test:function (msg) {
             alert("adger");
             this.message = msg;
            }
        }
    });
</script>
</body>
</html>

這裏bao

這裏的el跟data和methods是Vue中的固定語法
其中這裏的v-on有一個語法糖

<div id="app">
       <!-- 單引號裏面一定要套雙引號 雙引號裏面一定要套單引號 -->
       <button @click="test('變換了內容')">{{ message }}</button>
</div>

vue-on:keydown

看名字就知道是鼠標按下事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on:keydown</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    vue中的實現方式：<input type="text" v-on:keydown="fun($event)">
    <hr>
    傳統js實現方式：<input type="text" onkeydown="showKeyCode()">
  </div>
  <script>
    new Vue({
       el:"#app",
       data:{

       },
       methods:{
        // 這個 $event 它是Vue中的事件對象 和我們傳統js的event對象一樣的
        fun:function (event) {
            event.preventDefault()
        }
       }
    });
    //傳統js 鍵盤按下事件
    function showKeyCode() {
        //event對象和我們document對象以及window對象是一樣的，可以不用定義直接使用
        var keyCode = event.keyCode;
        // 鍵盤按下的事件對應一個 字符編碼 比如 回車 是 13
        // alert(keyCode)
        
        // 如果小於48 大於 57 編碼的鍵盤對象 輸入 不了 其他的 只能輸入這個範圍之內的
        if(keyCode < 48 || keyCode > 57){
          //不讓 鍵盤 起作用
          event.preventDefault();
        }
        // 如果按的是 回車 就彈出這句話
        if(keyCode == 13){
          alert("你按的是回車")
        }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on 按鍵修飾符</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 如果按回車 就彈出下面的方法 .enter嘛 不按 回車就不觸發那個方法 -->
    vue : <input type="text" v-on:keydown.enter="fun()">
    vue : <input type="text" @keydown.enter="fun()">
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
          fun:function () {
              alert("按下的是回車");
          }
      }
    });
  </script>
</body>
</html>

v-on:mouseover

這裏有一個事件得注意就是，有一個事件傳播性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on:mouseover</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    /*
      好區分div的區域
    */
    div{
      width: 300px;
      height: 300px;
    }
    .div1{
      background-color: red;
    }
    .div2{
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-on:mouseover="fun1" class="div1">
      <textarea v-on:mouseover="fun2($event)">這是一個文件域</textarea>
    </div>

    <hr>
    傳統的 js 方式
    <div onmouseover="divMouseOver()" class="div2">
      <textarea onmouseover="textArea()">這是一個文件域</textarea>
    </div>
  </div>

<script>
  new Vue({
     el:"#app",
     methods:{
      fun1:function () {
       alert("鼠標懸停在這個div上");
      },
      // 這裏爲什麼 需要加 event呢 因爲 你需要阻止事件傳播，所以需要一個阻止人 對不對
      // 下面傳統 js 實現 方式 是不需要 加 是因爲 本身 就存在 只需要我們 去調用即可
      fun2:function (event) {
          alert("鼠標懸停在textarea上");
          event.stopPropagation();
      }
     }
  });


  //傳統 js 方式
  function divMouseOver() {
      alert("鼠標移到到div上")
  }
  
  function textArea() {
      alert("鼠標移動到textArea上")
      //防止關聯事件 傳播 因爲這裏textarea文本域 是放在div裏面的
      event.stopPropagation();
  }
</script>
</body>
</html>

事件修飾符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day05-vue 事件修飾符</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    .div1{
      width: 400px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    vue 的 阻止 表單提交
    <form v-on:submit.prevent action="https://www.baidu.com" method="get">
      <input type="submit" value="提交">
    </form>
    <hr>
    傳統 js 的 阻止表單提交方式                            <!-- 傳統js 必須return此方法 才能阻止-->
    <form action="https://www.baidu.com" method="get" onsubmit="return checkForm()">
      <input type="submit" value="提交">
    </form>

    <div v-on:mouseover="fun1" class="div1">
      <!-- 這裏.stop 放上相當於一個屬性 -->
      <textarea v-on:mouseover.stop="fun2($event)">這是一個文件域</textarea>
    </div>
  </div>

<script>
  new Vue({
     el:"#app",
     methods:{
          fun1:function () {
              alert("鼠標懸停在這個div上");
          },
          fun2:function (event) {
              alert("鼠標懸停在textarea上");
          }
      }
  });
  //傳統 js方式
  function checkForm() {
      // 表單驗證必須有一個明確的boolean 類型
      //在 提交驗證方法時必須加上 return 方法名稱
      return false;
  }
</script>
</body>
</html>

v-text和v-html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    vue 方式
    <div id="div1" v-html="message"></div>
    <div id="div2" v-text="message"></div>
    <hr>
    傳統 js 方式
    <div id="div3"></div>
    <div id="div4"></div>
  </div>
  <script>
    new Vue({
       el:"#app",
       data:{
           message:"<h1>adger</h1>",
       }
    });
    // 傳統 js 的 innerText 和 innerHTML
    window.onload = function () {
        document.getElementById("div3").innerHTML = "<h1>hello</h1>"
        document.getElementById("div4").innerText = "<h1>hello</h1>";
    }
  </script>
</body>
</html>

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day07 v-bind</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 這是兩個錯誤示範 -->
    <font size="3" color="{{ color1 }}">我是adger</font>
    <font size="3" color="{{ color2 }}">我是哈哈</font>
    <hr>
    <font size="3" v-bind:color="color1">我是adger</font>
    <font size="3" v-bind:color="color2">我是哈哈</font>
    <hr>
    <font size="3" :color="color1">簡化方式</font>
  </div>
<script>
    // 插值表達式不能用於html 標籤的屬性取值
    // 要想給 html 標籤的屬性設置變量的值，需要使用 v-bind 也可以簡化 直接 :
    new Vue({
       el:"#app",
       data:{
         color1:"red",
         color2:"green"
       },
    });
</script>
</body>
</html>

v-for 使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for 遍歷數組</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <!-- v-for 變量名 in 取出 數據中的數組名字  -->
      <li v-for="(item,index) in arr">{{ item }} === 索引 === {{ index }}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
          arr:[1,2,3,4,5],
      }
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for 遍歷數組</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(key,value) in product">{{ value }} ==== {{ key }}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
          product:{
            id:1,
            name:"筆記本電腦",
            price:5000
          },
      }
    });
  </script>
</body>
</html>

注意這裏是個反的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for 遍歷數組</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <table border="1">
      <tr>
        <td>編號</td>
        <td>名稱</td>
        <td>價格</td>
      </tr>
      <tr v-for="(item,index) in products">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </table>
  </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            products:[
            {id:1,name:"筆記本電腦", price:5000},
            {id:2,name:"手機", price:2000},
            {id:3,name:"電視", price:2000},
            {id:4,name:"蘋果", price:15000},
          ],
        }
    });
</script>
</body>
</html>

v-model

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 錯誤示範 -->
    <form action="" method="post">
      用戶名： <input type="text" name="username" value="user.username"><br>
      密碼： <input type="text" name="password" value="user.password">
    </form>
    <hr>
    <!-- 正確示範 -->
    <form action="" method="post">
      用戶名： <input type="text" name="username" v-model="user.username"><br>
      密碼： <input type="text" name="password" v-model="user.password">
    </form>
  </div>
  <script>
    new Vue({
       el:"#app",
       data:{
          user:{
              username:"adger",
              password:"123"
          }
       },
    });
  </script>
</body>
</html>

v-if 和 v-show

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if 和 v-show</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 如果下面的值 是 true 就會顯示 ，如果是false 就不展示   -->
    <span v-if="flag">adger</span>
    <!-- 這兩個 都可以 -->
    <!--<span v-show="flag">劉傑</span>-->
    <button @click="toggle">切換</button>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
         flag:false,
      },
      methods:{
          toggle:function () {
              // 這個 flag 一開始 爲 false 然後 = 不是false 就變成true
              //再點擊一下 從 true 變爲false
              this.flag = !this.flag;
          }
      }
    });
  </script>
</body>
</html>

Vue的生命週期

我到Vue 的官網找了一張圖，建議學東西在官網看，一個個練習

Vue生命週期展示官網

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命週期</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: 'hello world'
			},
			beforeCreate: function() {
				console.log(this);
				showData('創建vue實例前', this);
			},
			created: function() {
				showData('創建vue實例後', this);
			},
			beforeMount: function() {
				showData('掛載到dom前', this);
			},
			mounted: function() {
				showData('掛載到dom後', this);
			},
			beforeUpdate: function() {
				showData('數據變化更新前', this);
			},
			updated: function() {
				showData('數據變化更新後', this);
			},
			beforeDestroy: function() {
				vm.test = "3333";
				showData('vue實例銷燬前', this);
			},
			destroyed: function() {
				showData('vue實例銷燬後', this);
			}
		});

		function realDom() {
			console.log('真實dom結構：' + document.getElementById('app').innerHTML);
		}

		function showData(process, obj) {
			console.log(process);
			console.log('data 數據：' + obj.message)
			console.log('掛載的對象：')
			console.log(obj.$el)
			realDom();
			console.log('------------------')
			console.log('------------------')
		}
		// vm.message = "good...";
		vm.$destroy();
	</script>
</html>

vue對象初始化過程中，會執行到beforeCreate,created,beforeMount,mounted 這幾個鉤子的內容

beforeCreate ：數據還沒有監聽，沒有綁定到vue對象實例，同時也沒有掛載對象 created ：數據已經綁定到了對象實例，但是還沒有掛載對象
beforeMount: 模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的 el屬性，el屬性是一個HTMLElement對象，也就是這個階段，vue實例通過原生的createElement等方法來創建這個html片段，準備注入到我們vue實例指明的el屬性所對應的掛載點 mounted:將el的內容掛載到了el，相當於我們在jquery執行了(el).html(el),生成頁面上真正的dom，上面我們就會發現dom的元素和我們el的元素是一致的。在此之後，我們能夠用方法來獲取到el元素下的dom對象，並進行各種操作當我們的data發生改變時，會調用beforeUpdate和updated方 beforeUpdate ：數據更新到dom之前，我們可以看到$el對象已經修改，但是我們頁面上dom的數據還沒有發生改變 updated: dom結構會通過虛擬dom的原則，找到需要更新頁面dom結構的小路徑，將改變更新到 dom上面，完成更新 beforeDestroy,destroed :實例的銷燬，vue實例還是存在的，只是解綁了事件的監聽還有watcher對象數據與view的綁定，即數據驅動

Vue中axios

這個就相當於ajax
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP進行Web請求和處理響應的服務。當vue更新到2.0之後，作者就宣告不再對vue-resource更新，而是推薦的axios，瞭解一下vue-resource就可以。
vue-resource的github地址

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中
vue中的axios地址

這裏Github先當成一個程序猿的倉庫
首先就是引入axios,如果你使用es6，只需要安裝axios模塊之後

我感覺跟ajax方式很像

Vue介紹

MVVM模式

Vue入門程序

Vue常見指令

vue-on:keydown

v-on:mouseover

事件修飾符

v-text和v-html

v-bind

v-for 使用

v-model

v-if 和 v-show

Vue的生命週期

Vue中axios

面試準備-根據自己簡歷

關於IDEA下載安裝

修改IntelliJ的快捷鍵中的CTRL+Y爲Redo操作爲---快速刪除一行

分頁查詢Demo

Linux的安裝與系統介紹

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結