vue學習筆記(1)－－什麼是vue?

一、什麼是 vue?#

練習時使用，最新版本

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生產時使用，明確版本號的版本，避免造成不可預見的問題

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

hello world

<div id="app">
    {{message}}
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: 'hello,world'
        }
    })
</script>

1.v - 指令#

v-bind－－綁定屬性

<div id="app-2">
  <span v-bind:title="message">
    滑鼠懸停幾秒鐘查看此處動態綁定的提示信息！
  </span>
</div>

<script>
  var app = new Vue({
  el: '#app',
  data: {
    message: '頁面加載於 ' + new Date().toLocaleString()
  }
})
</script>

v-bind是 vue 特有的提供的屬性，他會在 dom 上應用一個響應式的操作

打開 console，輸入app.message = "hello"，頁面會改變內容只顯示hello

又或者輸入app.message = false，內容會直接不顯示

vue 官網例子：

<!-- 綁定一個 attribute -->
<img v-bind:src="imageSrc">

<!-- 動態 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 縮寫 -->
<img :src="imageSrc">

<!-- 動態 attribute 名縮寫 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 內聯字串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 綁定一個全是 attribute 的物件 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通過 prop 修飾符綁定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 綁定。“prop”必須在 my-component 中聲明。-->
<my-component :prop="someThing"></my-component>

<!-- 通過 $props 將父組件的 props 一起傳給子組件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

v-if－－控制元素的顯示隱藏

剛才寫了，通過app.message = false，可以讓message代表的內容處於隱藏狀態，但是控制的只能是通過v-for引入的內容，無法直接讓元素隱藏

其實，vue 中還有一個專門控制元素顯示隱藏的指令－－v-if

<div id="app">
  <span v-if="show">
    {{message}}
  </span>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: 'hello,world',
      show: true
    }
  })
</script>

給元素綁定一個指令v-if = "show"，然後在 data 中控制show的布林值，true 顯示，false 隱藏

同時還有這個功能的指令v-show，根據表達式之真假值，切換元素的display CSS property，也是通過綁定的布林值來顯示隱藏

但是v-if和v-show有些區別

(1) v-if 是控制元素是否渲染最終控制元素的顯示隱藏，適用於切換頻率低的情況
(2) v-show 不管顯示隱藏都渲染，然後通過布林值綁定display: none屬性，適用於切換頻率高的情況

注意：v-show不支持<tempalte>元素，也不支持v-else

搭配用法

v-else和v-else-if

可以通過使用v-else達到v-if的效果，必須和v-if搭配使用，比如：

<div v-if="1>2">
  hello
</div>
<div v-else>
  hi
</div>

如果v-if不成立，執行v-else，也就是顯示 v-else 裡面的內容

是不是有點 javascript 裡面if函數的感覺了

v-else-if用法大致一樣，必須和v-if和v-else搭配使用

v-for－－遍歷數組並顯示到頁面上

v-for算是 vue 的核心指令之一了吧，主要是渲染一個項目列表的

<div id="app">
  <div v-for="item in list">{{item.message}}</div>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      list: [
        {message: 'html'},
        {message: 'css'}
      ]
    }
  })
</script>

可以直接把列表數據循環輸出

並且在控制台中通過push()還能添加新的列表項

app.list.push({message: "js"})

vue 對數據操作，就是這麼神奇

不推薦v-for和v-if同時使用，因為v-for擁有更高的優先級

v-on－－綁定事件監聽器

即綁定事件，通過v-on給 div 綁定了一個點擊事件，注意，在reverseMessage方法中，我們更新了應用的狀態，但是不觸碰到 dom，直接通過 vue 來進行處理，編寫代碼時只需要關注邏輯層即可

v-on:click="messagenone"，然後在methods裡面寫上事件方法

<div id="app">
  <div v-on:click="messagenone" id="demo">{{message}}</div>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: 'hello,wolrd'
    },
    methods: {
      messagenone: function() {
        var demo = document.getElementById('demo');
        demo.innerHTML = ''
      }
    }
  })
</script>

v-model－－數據的雙向綁定

vue 還提供了v-model指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定

可使用場景：標籤 input, select, textarea 和 components

<div id="app">
  <div>{{message}}</div>
  <input type="text" v-model="message">
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: {
      message: 'hello,wolrd'
    }
  })
</script>

v-text 更新元素的內容

<div id="app">
    <div v-text="message"></div>
    <div>{{message}}</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello,wolrd'
        }
    })
</script>

上面的 div 和下面的 div 內容跟隨一致變化

v-html－－更新元素的 innerHTML

不建議使用，在網站上動態渲染 html 是非常危險的，容易導致XXS攻擊，不能用在用戶提交的內容上，如果必須使用 v-html，可以考慮通過使用組件來代替

v-pre

跳過綁定的元素和他的子元素的編譯，直接顯示原始內容

跳過沒有指令的節點不進行編譯，直接顯示內容，會加快頁面的響應

v-cloak

在編譯沒有編譯完成之前，模板處於的狀態

<style>v-cloak] {
  display: none;
}</style>

<div v-cloak>
  {{message}}
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
    	message: 'hello,wolrd'
    }
  })
</script>

上述代碼表示的含義是，如果網絡不好，{{message}}模板代表的hello,world還沒有編譯成功，此時{{message}}處於隱藏狀態，當編譯完成，頁面直接顯示hello,world

v-once－－一次性渲染

綁定該指令的元素及其子元素只會進行一次渲染，之後頁面的第二次渲染會將其視為靜態資源並跳過，可以用來優化性能

<div id="app">
    <span v-once>{{message}}</span>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello,wolrd',
        }
    })
</script>

使用場景：表單提交。可防止用戶在請求未及時響應時，多次提交～

2. 組件化構建應用#

組件化也是 vue 的核心機制之一，它允許我們使用小型，可重用的組件來構建大型應用

在 vue 裡，一個組件本質上是一個擁有預定義選項的 vue 實例。在 vue 中註冊組件很簡單

// 定義名為 todo-item 的新組件
Vue.component('todo-item', {
  template: '<li>這是一個待辦項</li>'
})

var app = new Vue(...)

現在可以用它構建另一個組件模板

<ol>
  <!-- 創建一個 todo-item 組件的實例 -->
  <todo-item></todo-item>
</ol>

但是這樣會為每個待辦項渲染相同的文本，這看起來並不炫酷。我們應該能從父作用域將數據傳到子組件才對。讓我們來修改一下組件的定義，使之能夠接受一個props

Vue.component('todo-item', {
  // todo-item 組件現在接受一個
  // "props"，類似於一個自定義 attribute。
  // 這個 props 名為 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

現在，我們可以使用v-bind指令將待辦項傳到循環輸出的每個組件中

現在我們為每個 todo-item 提供 todo 對象 todo 對象是變量，即其內容可以是動態的，我們也需要為每個組件提供一個key

<div id="app-7">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '隨便其它什麼人吃的東西' }
    ]
  }
})

儘管這只是個刻意設計的例子，但是我們已經設法將應用分割成了兩個更小的單元。子單元通過prop接口與父單元進行了良好的解耦。我們現在可以進一步改進組件，提供更為複雜的模板和邏輯，而不會影響到父單元

在一個大型應用中，有必要將整個應用程序劃分為組件，以使開發更易管理

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>