Vue-js 零基礎國外案例 DEMO 全課程講解 1 我是---- 靜靜

時間 2019-12-13

標籤 vue 零基礎案例 demo 課程講解靜靜欄目 JavaScript 简体版

原文原文鏈接

老規矩我是：我想靜靜css

讓咱們開始今天的課程html

DEMO 1

一、第一步仍是vue.js官網 CDM 拿到編輯器放到script 裏面，

二、在body 容器中建立一個 template 模板

<body>
    <div id="app">
      <input type="text" v-on:input="changeTitle" />
      <p>{{ title }}</p>
    </div>
  </body>
複製代碼

三、而後在script 裏面進行建立new Vue({}); 實例

<script>
    new Vue({
      el: "#app",
      data: {
        title: "hello word"
      },
      methods: {
        changeTitle(event) {
          this.title = event.target.value;
        }
      }
    });
  </script>
  <!--
    這裏解釋 在methods 方法中傳入 形參event 事件，而後
    經過 this.title 的指向 data 數據中的 內容，而後經過 event 事件來更改目標的 value 值
  -->
複製代碼

四、看圖說話

總體課程

一、getting  started  入門

二、interacting with the Dom  templates  模板與Dom 互動

三、understanding the VueJs instance   理解vue js 實例 

四、Vue CLi       vue cli

五、components      組件

六、Forms           形式

七、Directives Filters & Mixins    過濾器

八、Animations & Transitions     動畫和過渡

九、working with http          使用http

十、Routing                   路由

十一、state Management         管理

十二、 Deploying a VueJS App     部署VueJS應用程序
複製代碼

Understanding and Using Directives 理解和使用指令

DOM interaction Dom 交互

插值表達式vue

this {{}} syntax is also called 此{{}}語法也被調用瀏覽器

interpolation or string interpolation 插值或字符串插值app

在插值表達式裏面寫方法也是能夠的

<body>
    <div id="app">
      <p>{{ sayHello() }}</p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        titel: "hello word"
      },
      methods: {
        sayHello() {
          return "hello";
        //   return titel   報錯
        // return this.titel 正確
        }
      }
    });
  </script>
  <!--
    當咱們在methods 方法裏面 把這個return 出去狀況下 直接return titel 這個名就會報錯，須要 使用 this.titel 給一個指向 這個的數據
  -->
複製代碼

v-bind的講解

<body>
    <div id="app">
  <!-- 當咱們這也使用的時候會發現 href 進行跳轉的時候的後面瀏覽器地址會出現亂碼沒法成功 
 	 <p>{{ sayHello() }} --- <a href="{{ link }}">google</a></p>
	-->

  <!-- 這裏使用的是 v-bind:href 的簡寫形式 :href
	  <p>{{ sayHello() }} ---- <a :href="link">google</a></p> -->
  <!-- 
	  這裏使用v-bind:href全寫 這時候你就會發現跳轉成功了 到了google 
	  這裏在href裏面就不須要在使用插值表達式直接寫 link 就能夠 咱們去到DOM 看一下
	  這時候要是有興趣的小夥伴能夠看一下 使用插值表達式的是什麼樣子就會發現差異
   -->
      <p>{{ titel }} ---- <a v-bind:href="link">google</a></p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        titel: "hello word",
        link: "https://google.com"
      },
      methods: {
        sayHello() {
          return this.titel;
          //   return titel;
        }
      }
    });
  </script>
複製代碼

Disable Re-Rendering with v-once 使用v-once禁用從新渲染

<body>
    <div id="app">
      <!-- 這裏使用 v-once 進行重新定向 
	v-cloak 我之前的vue 項目中講過的使用 就是 防止代碼閃動
    -->
      <h1 v-once>{{ title }}</h1>
      <p>{{ sayHai() }}------<a :href="link">google</a></p>
    </div>
</body>
  <script>
    new Vue({
      el: "#app",
      data: {
        title: "hello world",
        link: "http://www.google.com"
      },
      methods: {
        sayHai() {
          this.title = "hello";
          return this.title;
        }
      }
    });
  </script>
複製代碼

v-html的使用與差異

<body>
    <div id="app">
      <!-- 這裏使用 v-once 進行重新定向 
		v-cloak 我之前的vue 項目中講過的使用 就是 防止代碼閃動
		-->
      <h1 v-once>{{ title }}</h1>
      <!-- 這裏使用方法調用data中的數據 -->
      <p>{{ sayHai() }}------<a :href="link">google</a></p>

      <!--	這裏在頁面上展現的是整個 html 的所有連接
		 <p>{{ finishedLink }}完成連接</p> 
		-->
      <hr />
      <p>{{ finishedLink }}完成連接</p>
      <p v-html="finishedLink"></p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        title: "hello world",
        link: "http://www.google.com",
        finishedLink: '<a href="http://www.google.com>">google</a>'
      },
      methods: {
        sayHai() {
          this.title = "hello";
          return this.title;
        }
      }
    });
  </script>
複製代碼

Listening to Events 事件的監聽

v-on:click="" 簡寫形式 @click=""編輯器

<body>
    <div id="app">
      <!-- <button @click="handme">click me</button> -->
      <button v-on:click="handme">click me</button>
      <p>{{ count }}</p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        count: 0
      },
      methods: {
        handme() {
          this.count++;
        }
      }
    });
  </script>
複製代碼

@mousemove 和座標方向 clientX clientY

<body>
    <div id="app">
      <button @click="handme">click me</button>
      <p>{{ count }}</p>
      <hr />
      <p @mousemove="updateMove">鼠標移動{{ x }} -----{{ y }}</p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        count: 0,
        x: 0,
        y: 0
      },
      methods: {
        handme() {
          this.count++;
        },
        updateMove(event) {
          this.x = event.clientX;
          this.y = event.clientY;
        }
      }
    });
  </script>
複製代碼

stopPropagation 到達指定區域中止

<body>
    <div id="app">
      <!-- 當這裏咱們給方法裏面加上實參以後給的數字2 會發現每次咱們計算增長2次-->
      <button @click="heandeme(2,$event)">點擊我</button>
      <p>{{ counent }}</p>
      <hr />
      <p @mousemove="mousemo">
        鼠標的座標是{{ x }}/{{ y }}
        <span @mousemove="mousestop">DEAD STOP</span>
      </p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        counent: 0,
        x: 0,
        y: 0
      },
      methods: {
        heandeme(step, event) {
          this.counent += step;
        },
        mousemo(event) {
          this.x = event.clientX;
          this.y = event.clientY;
        },
        mousestop(event) {
          event.stopPropagation();
        }
      }
    });
  </script>

這個是去掉函數方法的寫法簡便寫法  
  <span @mousemove.stop.prevent="mousestop">DEAD STOP</span>
複製代碼

Listening to Keyboard Events 鍵盤的監聽事件

<hr />
      <!-- 點擊 enter 是vue 裏面封裝好的 eneter 是鍵盤13 
        這裏當咱們沒有enter的時候 嘗試一下 就會發現一輸入就會彈出，當
        有enter 以後 須要key 擊鍵回車才ok
        -->
      <input type="text" @keyup.enter="alertHi" />
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        counent: 0,
        x: 0,
        y: 0
      },
      methods: {
        heandeme(step, event) {
          this.counent += step;
        },
        mousemo(event) {
          this.x = event.clientX;
          this.y = event.clientY;
        },
        alertHi() {
          alert("Alert");
        }
      }
    });
  </script>
複製代碼

Writing JavaScript Code in the Templates 在模板中編寫js 代碼

這時候咱們在methods 裏面沒有寫任何方法發現也是能使用的函數

<div id="app">
      <!-- 這就是在咱們模板中寫js 你就會發現 -->
      <button @click="counter++">click Me</button>
      <!-- <p>{{ counter * 10 }}</p> -->
      <p>{{ counter * 2 > 10 ? "這裏顯示大於 10" : "這裏顯示小於10" }}</p>
      <!-- <p>{{ counter * 2 > 10 ? "Greate than 10" : "smaller than 10" }}</p> -->
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        counter: 0
      },
      methods: {}
    });
  </script>
複製代碼

Using Two-Way-Binding 使用雙向綁定

以前在最前面使用v-on:input="" 的方法methods 中使用  event 實現過，可是很麻煩，咱們如今使用 v-model 
複製代碼

<body>
    <div id="app">
        <!-- 這裏咱們使用一下 v-model 雙向數據綁定 把 p標籤內的 data 數據 name 綁定到了 input 框中 -->
      <input type="text" v-model="name" />
      <p>{{ name }}</p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        name: "max"
      },
      methods: {}
    });
  </script>
  咱們從input 框中拿到 下面標籤中的 插值
複製代碼

Reacting to Changes with Computed Properties 使用計算屬性對更改作出反應

第一種寫法看好了超級麻煩動畫

<body>
    <div id="app">
      <button @click="handele">click me加加</button>
      <button @click="handelejj">click me 減減</button>
      <p>{{ count }}</p>
      <p>{{ result }}</p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        count: 0,
        result: ""
      },
      methods: {
        handele() {
          this.count++;
          this.result = this.count > 6 ? "這裏大於6" : "這裏小於6";
        },
        handelejj() {
          this.count--;
          this.result = this.count > 6 ? "這裏大於6" : "這裏小於6";
        }
      }
    });
  </script>
複製代碼

計算屬性的第二種寫法

<body>
    <div id="app">
    <!--這裏咱們發現使用的是@click指令進行 p標籤內的 加加減減 -->
      <button @click="count++">click me加加</button>
      <button @click="count--">click me 減減</button>
      <p>{{ count }}</p>
      <p>{{ result() }}</p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        count: 0
        // result: ""  這裏注意data 裏面就不能在存在 result
      },
      methods: {
        result() {
          return this.count > 6 ? "greater 6" : "samller 6";
        }
      }
    });
  </script>
複製代碼

計算屬性

<body>
    <div id="app">
      <button @click="count++">click me加加</button>
      <button @click="count--">click me 減減</button>
      <button @click="secondCounter++">seconde me加加</button>
      <p>{{ count }} | {{ secondCounter }}</p>
      <p>{{ result() }} | {{ output }}</p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        count: 0,
        secondCounter: 0
      },
      computed: {
        output() {
          console.log("computed");
          return this.count > 6 ? "greater 6" : "samller 6";
        }
      },
      methods: {
        result() {
          console.log("methods");
          return this.count > 6 ? "greater 6" : "samller 6";
        }
      }
    });
  </script>
  
  這裏能夠經過在console.log看到裏面打印出來的屬性不一樣
複製代碼

計算屬性一個裏面展現不一樣

<body>
    <div id="app">
      <button @click="count++">clickme ++</button>
      <button @click="count--">clickme --</button>
      <button @click="nextCount++">next ++</button>
      <button @click="nextCount--">next ++</button>
      <p>{{ count }} | {{ nextCount }}</p>
      <p>{{ result() }} | {{ opent }}</p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        count: 0,
        nextCount: 0
      },
      computed: {
        opent() {
          return this.nextCount > 6 ? "this is count 6" : "this is smaller 6";
        }
      },
      methods: {
        result() {
          return this.count > 6 ? "this is count 6" : "this is smaller 6";
        }
      }
    });
  </script>
複製代碼

An Alternative to Computed Properties Watching for Changes 計算屬性的替代方案，觀察變化使用 watch

computed: {
        resultNext() {
          if (this.count < 0) {
            // this.count = this.count = 0;
            return (this.count = 0);
          }
          return this.nextCount > 6 ? "這裏大於6" : "這裏小於6";
        }
      },
      watch: {
       watch監控數據使用 count data的數據value的值的變化，
        count(value) {
        而後把 this 指向 聲明的var vm 咱們這時候答應出vm發現
          var vm = this;
          發現是window的對象
          console.log(vm);
          而後使用 setTimeout 定時器進行 vm.count 清除變0 
          setTimeout(function() {
            vm.count = 0;
          }, 2000);
        },
        nextCount(value) {
          var vm = this;
          setTimeout(function() {
            vm.nextCount = 0;
          }, 2000);
        }
      },
這裏主要是在 computed 裏面 增長了一個判斷判斷count小於0 的時候怎麼辦，兩種寫法均可以成功

主要：而後在watch 監控裏面寫了一個定時器，監控頁面變化而後在兩秒後回覆原狀。
複製代碼

簡寫形式我們用過了這裏就一帶而過了

v-on:click="" 簡寫@click=""
v-bind:href=""  簡寫:href=""
複製代碼

Dynamic Styling with CSS Classes - Basics 使用CSS類的動態樣式 - 基礎知識

<div id="app">
      <div
        class="demo"
        @click="clickMe = !clickMe"
        :class="{red:clickMe}"
      ></div>
      <div class="demo" :class="{red:clickMe}"></div>
      <div class="demo" :class="{green:clickMe}"></div>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        clickMe: false
      }
    });
  </script>
  
這段代碼詳解：DOM裏面有三個div 而後 給其中一個註冊一個點擊事件，@click給他一個事件，而後進行取反
在data數據中咱們給@click這個事件 一個false 而後 使用v-bind簡寫 形式進行一個class類的樣式綁定 :class="{red:clickMe}"這裏咱們發現綁定的樣式是一個字符串裏面加一個對象而後，在這個對象裏面 前面是 css 樣式 後面是 屬性名之後咱們本身用的時候也這麼綁定便可。
複製代碼

Dynamic Styling with CSS Classes - Using Objects 使用CSS類動態樣式 - 使用對象

<body>
    <div id="app">
      <div
        class="demo"
        @click="handleMe = !handleMe"
        :class="{red:handleMe,pink:!handleMe}"
      ></div>
      <div class="demo" :class="{green:handleMe}"></div>
      <div class="demo"></div>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        handleMe: false
      },
      methods: {}
    });
  </script>
這裏咱們在模板中 v-bind:class："{}"這裏咱們取反給了一個數據而後呈現粉色，
下面咱們在js 中使用一下看一下
複製代碼

計算屬性computed 控制顏色

<body>
    <div id="app">
      <div class="demo" @click="handleMe = !handleMe" :class="addClass"></div>
      <div class="demo" :class="{red:handleMe}"></div>
      <div class="demo"></div>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        handleMe: false
      },
      computed: {
        addClass() {
          return {
            green: this.handleMe,
            pink: !this.handleMe
          };
        }
      }
    });
  </script>
複製代碼

Dynamic Styling with CSS Classes - Using Names 使用css 類樣式動態使用名稱

使用v-model 控制樣式

<body>
    <div id="app">
      <div class="demo" @click="handleMe = !handleMe" :class="addClass"></div>
      <div class="demo" :class="{red:handleMe}"></div>
      <div class="demo" :class="color"></div>
      <hr />
      <input type="text" v-model="color" />
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        handleMe: false,
        color: "green"
      },
      computed: {
        addClass() {
          return {
            green: this.handleMe,
            pink: !this.handleMe
          };
        }
      }
    });
  </script>
 這裏咱們給data 中給一個color 數據 而後在 DOM 中給input中 v-model=""傳入color 而後把傳入的color 給綁定到 上面的div 中v-bind:class裏面而後進行控制
 
 
 
 這裏咱們嘗試一下 把綁定樣式的color 這麼寫 會變成上面樣子 
 
 <div class="demo" :class="[color,{red:handleMe}]"></div>
複製代碼

Setting Styles Dynamically without CSS Classes 動態設置樣式而不使用css樣式

<body>
    <div id="app">
      <div class="demo" :style="{backgroundColor:color}"></div>
      <div class="demo" :style="mystyle"></div>
      <div class="demo"></div>
      <hr />
      <input type="text" v-model="color" />
      <input type="text" v-model="width" />
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        color: "green",
        width: 100
      },
      computed: {
        mystyle() {
          return {
            backgroundColor: this.color,
            width: this.width + "px"
          };
        }
      }
    });
  </script>
複製代碼