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

時間 2019-12-04

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

原文原文鏈接

我想靜靜 ---html

Module Introduction 模塊介紹

<!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" />
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ title }}</h1>
      <button @click="show">show paragraph 顯示段落</button>
      <p v-if="showParagraph">this is not always visible 這並不老是可見的</p>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        title: "the vuejs instance vuejs實例",
        showParagraph: false
      },
      methods: {
        show() {
          this.showParagraph = true;
          this.updateTitle("the vuejs instance vuejs實例(update)");
        },
        updateTitle(title) {
          this.title = title;
        }
      },
      computed: {
        lowercaseTitle() {
          return this.title.toLowerCase();
        }
      },
      watch: {
        title(value) {
          alert("title changed new Value標題加上新的" + value);
        }
      }
    });
  </script>
</html>
複製代碼

這裏的el 是上面 html 中app 的實例 data methos computed watch

Using Multiple Vue Instances 使用多個Vue實例

<body>
    <div id="app">
      <h1>{{ title }}</h1>
    </div>
    <div id="app1">
      <h1>{{ title }}</h1>
    </div>
  </body>
  <script>
    new Vue({
      el: "#app",
      data: {
        title: "hai this is  one install"
      }
    });
    new Vue({
      el: "#app1",
      data: {
        title: "hai this is two install"
      }
    });
  </script>
複製代碼

Accessing the Vue Instance from Outside 從外部訪問Vue實例

<script>
    var vm1 = new Vue({
      el: "#app",
      data: {
        title: "hai this is  one install"
      }
    });

    setTimeout(function() {
      vm1.title = "change this two 第二次改變";
    }, 3000);

    var vm2 = new Vue({
      el: "#app1",
      data: {
        title: "hai this is two install"
      },
      methods: {
        onChange() {
          vm1.title = "change1";
        }
      }
    });
  </script>
複製代碼

How VueJS manages your Data and Methods 如何管理您的數據和方法

這裏看到咱們 newProp 一個新屬性在控制檯打印出來時候會在 vm 屬性裏面看到這個新添加的

A Closer Look at el and data 仔細研究el和數據這裏咱們看到 data el 和 rout 而後咱們在控制檯打印時候會發現 data數據和 vm 裏面的data 相等簡單來講就是 vm 和和 el是至關的vue

Mounting a Template 安裝模板

<body>
    <div id="app"></div>
  </body>
  <script>
    var vm = new Vue({
      template: "<h1>hello</h1>"
    });
    vm.$mount("#app");
  </script>
複製代碼

這裏模板安裝使用vm 拿到聲明的一個實例而後在vue 實例裏面進行template 模板拼接，而後調用vm.$mount 安裝拿到id（'#app'）npm

Limitations of some Templates 某些模板的侷限性

How VueJS Updates the DOM vuejs如何更新DOM 就是vue的聲明週期

new Vue()  建立一個vue 實例
  而後走到下一步
  beforeCreate()
  而後繼續走
  initialize Data & EVents 走到初始化數據與事件
  instance Created  
  created()
  而後繼續走
  compile Template or el’s template

  beforeMount() 建立 
  replace  el with compiled template

  繼續走
  Mounted to DOM 
  而後
  Data Changed  數據改變
  beForeupdate()  開始數據更新
  Re-render DOM  循環DOM
  updated()  繼續數據更新 

  beforeDestroy() 準備開始銷燬
  destroyed()  銷燬
複製代碼

The VueJS Instance Lifecycle in Practice 實踐中的VueJS實例生命週期

<body>
    <div id="app">
      <h1>{{ title }}</h1>
      <button @click="title = 'changed'">update title 更新標題</button>
      <button @click="destroy">Destroy</button>
    </div>
</body>
  <script>
    new Vue({
      el: "#app",
      data: {
        title: "the vueJs instance"
      },
      beforeCreate: function() {
        console.log("beforeCreate()");
      },
      created: function() {
        console.log("created()");
      },
      beforeMount: function() {
        console.log("beforeMount()");
      },
      mounted: function() {
        console.log("mounted()");
      },
      beforeUpdate: function() {
        console.log("beforeUpdate()");
      },
      updated: function() {
        console.log("updated()");
      },
      beforeDestroy: function() {
        console.log("beforeDestroy()");
      },
      destroyed: function() {
        console.log("destroyed()");
      },
      methods: {
        destroy() {
          this.$destroy()
        }
      }
    });
  </script>
</html>
這裏咱們先點擊 destroy 的時候 咱們在點擊 change的時候就會不生效，
這是整個vue的聲明週期，
複製代碼