MVC,MVVM,MVP的區別/ Vue中忽略的知識點！

 

按照順序學習：

https://scotch.io/courses/build-an-online-shop-with-vue/hello-world

Vue Authentication And Route Handling Using Vue-router

Handling Authentication In Vue Using Vuex

 

---

 

 

Vue使用的就是mvvm框架

它和MVC, MVP的區別是什麼？

mvc是最經常使用的軟件架構，mvvm,mvp是它的衍生。

http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

1. Mvc

1. View 傳送指令到 Controller
2. Controller 完成業務邏輯後，要求 Model 改變狀態
3. Model 將新的數據發送到 View，用戶獲得反饋

2. MVP

• 1. 各部分之間的通訊，都是雙向的。
• 2. View 與 Model 不發生聯繫，都經過 Presenter 傳遞。
• 3. View 很是薄，不部署任何業務邏輯，稱爲"被動視圖"（Passive View），即沒有任何主動性，而 Presenter很是厚，全部邏輯都部署在那裏。

3. MVVM

MVVM 模式將 Presenter 更名爲 ViewModel，基本上與 MVP 模式徹底一致。

惟一的區別是，它採用雙向綁定（data-binding）：View的變更，自動反映在 ViewModel，反之亦然。Angular 和 Ember 都採用這種模式。

---

 

webpack:

把依賴的modules，經過webpacke,轉化爲static assets。

簡單來講就是一個module bundler模塊打包工具。

它將一堆文件中的每一個文件都做爲一個module, 找出它們之間的dependancies , 將它們打包爲可部署的靜態資源。

可參考：https://vue-loader-v14.vuejs.org/zh-cn/

優勢：大大優化前端工做流程。

缺點：配置麻煩。

 

Vue Loader

https://vue-loader-v14.vuejs.org/zh-cn/

Vue Loader是webpack的一個loader。它容許你以一種名爲單文件組件的格式.vue寫Vue組件，Vue Loader會把這個組件轉化爲JavaScript模塊.

• 支持ES2015
• 容許Vue組件的組成部分使用其餘的webpack loader,好比<style>使用Sass, 對<template>使用Pug;
• 容許在一個 .vue 文件中使用自定義塊，並對其運用自定義的 loader 鏈；???
• 爲每一個組件模擬出css 做用域。
• 在開發過程當中使用熱重載來保持狀態。

 

Vue組件細節

.vue是自定義的文件類型，用類HTML語法描述一個Vue組件。它包括3種類型的頂級語言塊<template>, <script>, <style>，還能夠自定義塊。

 

vue-loader 會解析文件，提取每一個語言塊，若有必要會經過其它 loader 處理，最後將他們組裝成一個 CommonJS 模塊，module.exports 出一個 Vue.js 組件對象。

 

vue-loader 支持使用非默認語言，好比 CSS 預處理器，預編譯的 HTML 模版語言，經過設置語言塊的 lang 屬性。(具體見預處理器章節)

<style lang="sass">
  /* write Sass! */
</style>

 

 

語言塊

<template>

• 默認語言： html
• 內容被提取爲string, 將編譯並用做Vue組件的template選項。

<script>

• 默認語言: js(在檢測到babel-loader會自動支持ES2015)
• 該腳本在類CommonJS環境中執行（就像經過webpack打包的正常js模塊），所以能夠require()其餘依賴。若是支持ES2015, 還可使用import和export語法。
• 腳本必須導出Vue.js組件對象。使用export default {...}

<style>

• 默認語言：css
• 一個單文件組件能夠有多個<style>標籤。

自定義塊：

 

建立項目：

//也能夠用yarn
npm install -g @vue/cli
vue create hello-vue    
cd hello-vue
npm run serve # 也能夠用yarn serve


//安裝好@vue/cli後，可使用圖形界面建立和管理
vue ui

 

---

 

❌：不知道怎麼引發的，以前一直好好的！

✅ 更新node到最新版本(使用nvm下載最新版本，並使用nvm use <版本號>)

參考：https://github.com/vuejs/vue-cli/issues/889

cd ~/.vuerc

而後：useTaobaoRegistry: false.  仍是不能夠。(❌不是這裏的問題)

node -v  //返回版本是8.9, 昨天我更新到11.00了，估計是非全局的更新。

首先，我更新了npm:

npm install -g npm

 

而後升級node.js

npm中有一個模塊叫作「n」，專門用來管理node.js版本的。先安裝它，而後使用它來更新node.

更新到最新的穩定版:

npm install -g n
sudo n stable

 

操，無論用啊！！！

仍是參考博客：https://www.cnblogs.com/chentianwei/p/10090483.html

下載nvm, 而後nvm use <版本號 | stable > ✅ 

---

 

 

組件

組件描述了模版和邏輯之間的數據流動。數據從邏輯到模版， event emitted從template到logic:

• Vue Instance ----DATA----> Template
• Template ----EVENT-----> Vue Instance

 

Local vs Global組件

本地組件就是普通的js對象

const GreetingComponent = {
  template: `<h1>Hi, you</h1>`,  
}

new Vue({
   el: '#app',
   template: `
     <div><GreetingComponent/></div>
   ` ,
   components: { GreetingComponent}
})

//使用components選項來插入組件。

 

 

Global組件是使用Vue的component方法生成的。Vue.component( id, [definition] )

實際上

Vue.component("my-component", { ... }) 
//是簡寫。徹底的代碼：
Vue.component('my-component', Vue.extend({ /* ... */ }))

 

Vue.extend(options)是基礎Vue構造器，建立一個子類。參數是組件選項的對象。

---

 

比較jQuery, vnalia JS, 和Vue的DOM操做

// jQuery
const divElement = $('#text');
divElement.text('Hello Vue')

// JavaScript
const divElement = document.getElementById('text');
const textNode = document.createTextNode('Hello Vue');

divElement.appendChild(textNode);

new Vue({
    template: `<div>{{text}}</div>`,
    data () {
        return {
            text: 'Hello Vue'
        };
    }
}).$mount('#app')

 

 template表明view, data表明model, 經過對象特性，它兩被綁定在一塊兒。

這就是MvvM設計風格！

 

模版template的幾個概念：

• Interpolation: {{ }}, 也稱爲mustache tag。它把內部的數據渲染到view上。當數據變化，模版也會自動更新。這是mvvm的設計風格！
• Directives: 指令，客製化的HTML屬性，能夠用於綁定data到view和attributes。也能夠綁定events.
  • v-bind指令是響應方式的，簡寫:xxx, 
  • v-on 用於綁定events, 簡寫@xxx
• 修改默認行爲v-on:click.prevent="doThis"
• {{ }}內部能夠執行計算，它是template expression.

---

 

Conditional

v-show, v-if, v-else-if, v-else,

 

vanilla JavaScrip：

<button id="btn">Clicke me</button>
<p id="text">Lorem ipsum dolor sit amet,...</p>

<script>
    let isShown = false;

    const btn = document.getElementById('btn');
    const text = document.getElementById('text');

    updateText(isShown)

    btn.addEventListener('click', () => {
        isShown = !isShown
        console.log(isShown)
        updateText(isShown)
    })

    function updateText(isShown) {
        text.style.display = isShown ? 'block' :'none';
    }
</script>

 

改爲vue.js

<template>
  <div>
    <button v-on:click="toggle">Clicke me</button>
    <p id="text" v-show="isShown">Lorem ipsum dolor sit amet,...</p>
  </div>
</template>

<script>
export default {
  name: 'button',
  data: function() {
    return {
      isShown: false,
    }
  },

　// 這裏使用了v-show代替了v-bind:style="updateText" // computed: {
  //   updateText() {
  //     return {
  //       display: this.isShown ? "block" : 'none'
  //     }
  //   }
  // },

  methods: {
    toggle() {
      this.isShown = !this.isShown
    },
  }
}
</script>

vue.js和vanilla JavaScript的原理是不一樣的。

• vanilla JavaScript是在元素上綁定事件，當事件被觸發後，執行相應的函數，改變<p>的css樣式。
• vue.js是使用響應式編程。Vue監聽data選項中的全部屬性，在屬性被訪問和修改時通知變化，激活re-render, 而後組件重新渲染函數最後改變虛擬DOM Tree。

---

 

動態 Style and Classes(Class和Style綁定)

<div v-bind:class="{ active: isActive }"></div>

 

首先active是一個類，

而後isActive能夠是一個data, 類型是boolean。若是active: true, 則active這個類在<div>上生效。

 

能夠給:class傳入多個對象，同時:class指令能夠和普通的class屬性共存。

和class綁定的對象無需內聯在模版裏，能夠綁定一個返回對象的計算屬性，相似上例👆中的:style。

 

動態style:

//⚠️： 使用駝峯寫法
<div v-bind:style="{ color: 'red', backgroundColor: 'blue' }"></div>
//也可使用常規寫法，可是要用引號：
<div v-bind:style="{ color: 'red', 'background-color': 'blue' }"></div>

 

---

 

Iteration key

使用v-for, 應該配合使用:key,爲每一個在list中的node附加一個unique id。

 

---

 

 

v-on, v-bind, v-model和$emit方法

https://codepen.io/chentianwei411/pen/QzNgBd?editors=1010

用v-model代替v-on和v-bind的案例的原理：

<h1>hello world</h1>
<div id="app">
  <custom-input
    v-bind:value="searchText"
    v-on:input="searchText = $event"
  ></custom-input>
<!--  等同於  -->
<!--   <custom-input
    v-model="searchText"             
  ></custom-input> -->
  <p>out:{{ searchText }}</p>
</div>

//把Vue實例的data特性searchText綁定到組件custom-input的 value prop。
//(當searchText改變時，value prop也同步改變)

//v-on:input，監聽到input事件。這裏input是咱們在組件custom-input中自定義的事件。

//JS
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <div>
//v-bind:value="value",把value prop和input的value特性綁定到一塊兒。
當value prop改變，input的value同步改變

//v-on:input是DOM event
//$emit("input", ...)中的"input"是自定義的event

        <input
          v-bind:value="value"
          v-on:input="$emit('input', event.target.value)"
        >
        <p>in:{{ value }}</p>
    </div>
  `
})

new Vue({
  el: "#app",
  data() {
    return {
      searchText: "one"
    }
  }
})