vue學習筆記，比較基礎。

mvc 和mvvc的區(qū)別

• mvc是后端概念：model、view、controller
• mvvc是前端概念： Model、View、ViewModel

最簡單的vue代碼段

  <div id="welcome">
      <p>{{ msg }}</p>
  </div>
  <script>
      var vm = new Vue({
          el: '#welcome',
          data: {
              msg: '歡迎來到我的世界'
          },
          methods:{}
      });
  </script>

vue對象屬性

• el：指定vue對象要控制的區(qū)域。
• data：data對象定義了控制區(qū)域中要用到的數(shù)據(jù)。
• methods: 自定義方法。

vue指令

v-clock

• 用于解決屏幕閃動的問題。
• 如果網絡較慢，網頁還在加載vue.js，導致vue來不及渲染，這時頁面展示的就是源代碼。

<!-- 元素上加 v-cloak屬性 -->
<p v-cloak>
    {{ msg }}
</p>

<!-- 樣式 -->
<style>
    [v-cloak] {
      display: none
    }
</style>

v-text 和 v-html

• v-text用vue對象中的值覆蓋元素內容
• v-html區(qū)別于v-text的是：v-html綁會將內容解析為html，而v-text僅解析為普通文本。

<div id="app">
      <p v-text="msg">========</p>
</div>

var vm = new Vue({
          el: "#app",
          data: {
              msg: 'i have a gift'
}});

v-bind

• 元素屬性可用v-bind綁定vue對象的屬性
• v-bind:arrtribute 可以縮寫為 :attribute

    <div id="app">
        <input type="button" :value="msg">
    </div>
    
    var vm = new Vue({
            el: "#app",
            data: {
                msg: 'i have a gift'
            }
    });

style屬性綁定

可以把樣式定義在vue對象中,用v-bind:style引用

    <!-- 內聯(lián)樣式綁定 -->
    <!-- v-bind <h1 :style="{color:'red', 'font-weight':400}"> -->
    <!-- v-bind 中使用vue中的data 對象-->
    <!-- 數(shù)組-->
    <div id="app">
        <h1 :style="[h1style1, h1style2]">
            我很帥！！
        </h1>
    </div>

class屬性綁定

類似style屬性綁定

  <!-- 原生 <h1 class="red italic thin"> -->
  <!-- v-bind 直接傳數(shù)組 <h1 :class="['red','italic','thin','active']"> -->
  <!-- v-bind 中使用三元表達式 <h1 :class="['red','italic','thin',flag ? 'active' : '']"> -->
  <!-- v-bind 中使用對象 <h1 :class="{red:true,italic:true,thin:true,active:true}"> -->
  <!-- v-bind 中使用對象 對象定義到vue的data屬性中 -->

v-on

- v-on 提供事件綁定
- v-on:event 可以縮寫為 @event

    <div id="app">
        <input type="button" value="這個一個button" @click="alert">
    </div>
    var vm = new Vue({
            el: "#app",
            methods: {
                alert: function () {
                    alert("哈哈哈哈哈");
                }
            }
    });

v-model

雙向數(shù)據(jù)綁定

 <div id="app">
     <input type="text" v-model="msg">
     <br/>
     <input type="text" :value="msg">
 </div>
 
 var vm = new Vue({
         el:"#app",
         data:{
             msg:"我好帥哦"
         }
 });

v-for

• 遍歷原生類型數(shù)組
• 遍歷對象數(shù)組
• 遍歷對象的屬性和值

    <div id="app">
        <p v-for="(item, i) in list">索引{{i}}, 值{{item}}</p>
        <p v-for="(user, i) in users"> 第{{i}}個user的id是{{user.id}},name是{{user.name}}</p>
        <p v-for="(val, key) in user"> user對象的屬性{{key}}的值是{{val}}</p>
        <p v-for="count in 10">這是第{{count}}個數(shù)字</p> <!-- 從1開始 -->
    </div>

v-if 和 v-show

- v-if： 用刪除和創(chuàng)建dom元素的方法實現(xiàn)
- v-show： 用 display:none 屬性實現(xiàn)

    <div id="app">
        <input type="button" value="reverse" @click="reverse">
        <!-- 用刪除和創(chuàng)建元素實現(xiàn) -->
        <h3 v-if="flag">天空很藍</h3>
        <!-- 用display:none style屬性實現(xiàn) -->
        <h3 v-show="flag">天空很藍藍藍</h3>
    </div>

事件修飾符

默認行為冒泡,可以有下面選項

• .stop 阻止冒泡
• .prevent 阻止元素的默認行為
• .capature 事件捕獲,不是太清楚。
• .self 僅當事件發(fā)生在元素自身時有效
• .once 綁定的事件只執(zhí)行一次

寫在最后

• 后端開發(fā)一枚，學前端是為了能夠做更好玩的事情。
• 前端的學習筆記都放在這個倉庫：https://github.com/pepper-0611/qianduan
• 在找工作的同學可以找我內推(看個人介紹)