初識Vue

東方來客發表於2018-08-14
Vue

Vue是一個簡單小巧,漸進式的,功能強大的技術棧.用了和Angular和React一樣的MVVM模式(資料層和檢視層的雙向繫結,讓我們無需關注DOM的操作,將更多的經歷放在資料和業 務邏輯上).

Vue例項的建立

<body>
    <div id='app'></div>    
    <!--將Vue例項掛載此-->
</body>
<script src='https://cdn.bootcss.com/vue/2.5.16/vue.min.js'>
<script>
    var app = new Vue({
        el:'#app',               //element,必不可少的屬性,指定掛載到#app上
        data:{
            example:'123'       //宣告需要雙向繫結的資料,建議將所有會用到的資料在data 中宣告,便於維護
        },
        methods:{
            example1:function(){console.log(1)}
        },
        computed:function(){console.log(2)}
    })
</script>
複製程式碼
Tip:訪問例項下的屬性直接 app.$el,其中app為例項名.其他屬性則使用 app.example即可.

生命週期鉤子

  1. created
    2. 例項建立完成後呼叫,此階段完成了資料觀測等.尚未掛載,$el等還不可用,
  2. mounted
    3. 相當於jQuery的$('document').ready()方法.$el等掛載到DOM上時呼叫.一般第一個業務邏輯會從這裡開始.
  3. beforeDestroy
    4. 例項銷燬之前呼叫,用來解綁一些監聽事件.

文字插值和表示式

使用雙大括號{{}}是基本的文字插值方法,它會將我們繫結的資料實時的顯示出來(如通過控制檯改變其對應的值,會實時同步到網頁中).

<div id='app'>{{example}}</div>
複製程式碼

將這段程式碼加到上面的程式碼中,即可顯示example對應的值--'123'.在{{}}中 除了簡單的繫結資料外,還可以使用簡單的js表示式,如:

  1. {{6+6*2}} ,會顯示為18
  2. {{6 > 3 ? '哈哈':'唉唉'}} ,三元運算子

過濾器

Vue支援在{{}}插值的尾部加入 '|'符號對資料進行過濾,經常用於格式化文字.過濾的規則是自定義的,通過給Vue例項新增屬性 filters來實現.來個例子先.

html部分

<html>
<head>
  <meta charset="utf-8">
  <title>過濾器示例</title>
</head>
<body>
  <div id="app">
    {{date | formatDate}}
    <!-- 此為過濾器的使用方法,另外過濾器可以使用多個,都以 '|' 分隔.過濾器也可傳參,傳參時過濾器第一個引數對應函式裡的第二個引數,以此類推.因為第一個引數總是 "date" -->
  </div>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</body>
</html>
複製程式碼

js部分

var plusDate = function(value){
      return value<10 ? '0'+value:value
    }
    var app = new Vue({
        el:'#app',              
        data:{
            date: new Date()   
        },
      filters:{
        formatDate: function(value){
          var date = new Date(value);
          var year = date.getFullYear();
          var month = plusDate(date.getMonth()+1);
          var day = plusDate(date.getDate());
          var hour = plusDate(date.getHours());
          var min = plusDate(date.getMinutes());
          var sec = plusDate(date.getSeconds());
          return year+'--' +month+'--'+day+'--'+hour+'--'+min+'--'+sec  
        }
      },
        methods:{
            example1:function(){console.log(1)}
        },
        computed:function(){
          
        },
        mounted:function(){
          var _this = this;
          this.timer = setInterval(function(){
          _this.date = new Date();
          },1000)
        },
        beforeDestory:function(){
          if(this.timer){
            clearInterval(this.timer)
          }
        }
    })
複製程式碼

指令

指令是Vue中最常用的一項功能,帶有字首 v-.能幫我們快速完成DOM操作,迴圈渲染,顯示和隱藏.這裡介紹四個.

  1. v-text 解析為文字
<span v-text='apple'></span>
data:{
    apple: 蘋果
}
複製程式碼

此時頁面中就會顯示出apple對應的值--蘋果.v-text的作用與{{}}相同.

  1. v-html 解析為html
<span v-html='banana'></span>
date:{
    banana: <span 'style=color:yellow'>香蕉</span>
}
複製程式碼

解析為html,顯示黃色的香蕉兩個字

  1. v-bind
<style>
    .transRed{
        color:red;
    }
</style>
<div v-bind:class='className'>hh</div>
data:{
    className : transRed
}
複製程式碼

文字'hh'變紅.v-bind 的基本用途是動態更新 HTML 元素上的屬性，比如 id 、 class 等.可簡寫為 ":". 4. v-on

<button v-on:click='count'>
</button>
data:{
  num : 0  
},
methods:{
    count:function(){
        this.num +=1
    }
}
複製程式碼

v-on用來繫結事件監聽.click是事件,此外還有dbclick,mousemove,keyup等.count則是要呼叫的方法.可簡寫為 "@"

相關文章