Vue學習-1

weixin_33766168發表於2017-11-26
Vue

為什麼選擇Vuejs

預讀:為了滿足當前移動webApp專案的開發需求,MVVM框架誕生,而VUEJS 便是這樣一種js框架,其兩大核心:資料驅動和元件化

  • 為了解決webApp這些體驗和開發上的不足,使用一個MVVM框架VUELS;

什麼是MVVM

(資料驅動檢視)

  • View --- ViewModel --- Model三部分

頁面DOM viewModel model資料

  • 中間監控兩側的資料,並相對應地通知另一側進行修改;

這就是MVVM框架,屬於MVVM的JS框架還有React.js,Angular.js

Vue的優點

  • Vue更輕量更快
  • 更容易上手

Vue核心

-通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件

  • 資料繫結

    • Vue資料驅動檢視:資料改變檢視自動更新,傳統的做法要手動改變DOM來改變檢視,VUEJS只需要改變資料,就會自動更改檢視,不用再擔心DOM;

  • 檢視元件化

    • 把整一個網頁的拆分成一個個區塊，每個區塊我們可以看作成一個元件。網頁由多個元件拼接或者巢狀組成;

​

使用場景

  • 如果你還在用jQuery來頻繁的操作你的DOM更新頁面的話,就可以用vue.js來解放DOM操作;
  • 如果專案中有多個部分是相同的,並可以封裝成一個元件,那就可以使用Vue.js
  • 此外,vue.js的核心使用了ES5的Object.defineProperty特性.IE8以下的版本是不相容的;

總結

為了更好滿足當前移動webapp專案的開發需求，MVVM框架誕生，而Vue.js便是這樣的一種js框架，其兩大核心：資料驅動和元件化。

簡單安裝和快速入門Vue.js

  • 如果不想安裝到本地,使用CDN方式,引入網上的資源
  <script src="https://xx/vue.js"></script>
  • 還可以通過npm在命令列下載

資料驅動檢視

 <div id="app">
    公眾號：{{ name }}
  </div>
  <script>
      let vm = new Vue({
          el:"#app",
          data:{
             name:"web前端教程",
          }
      });
  </script>
  • 我們通過new Vue( )建立一個例項vm，引數是一個json物件，屬性el提供一個在頁面上存在的DOM 元素(id='app')，表明這個例項是關聯指定的DOM節點。
  • 在DOM節點上，我們就可以使用雙大括號{{ }}的語法來渲染Vue例項物件data中已經存在的屬性值，如上面案例中的name屬性的值“web前端教程”就會被渲染到頁面中，替換{{ name }} 顯示效果為：“web前端教程”

雙向繫結

  • 例子:監聽使用者在頁面輸入框輸入的內容，然後將其實時更新在頁面上。

在Vue中我們使用v-model指令就可以輕鬆實現

<div id="app">
     <input v-model="number">
     <p>數字:{{ number }}</p>
 </div>
 <script>
     let vm = new Vue({
         el:"#app",
         data:{
             number:"",
         }
     });
 </script>

元件

元件化就是把頁面中特定的區塊獨立抽出來，並封裝成一個可方便複用的元件。

  • 加入頁面上有三個同樣的圖片,傳統的辦法,我們需要寫三個同樣佈局的HTML佈局;
 <div id="app">
    <!--第1個卡片-->
    <div class="card">
        <img src="logo.png" alt="">
        <h2>web前端教程</h2>
        <p>這裡是描述，很長的描述</p>
        <button>我是按鈕</button>
    </div>
    
    <!--第2個卡片-->
    <div class="card">
        <img src="logo.png" alt="">
        <h2>web前端教程</h2>
        <p>這裡是描述，很長的描述</p>
        <button>我是按鈕</button>
    </div>
    
    <!--第3個卡片-->
    <div class="card">
        <img src="logo.png" alt="">
        <h2>web前端教程</h2>
        <p>這裡是描述，很長的描述</p>
        <button>我是按鈕</button>
    </div>
 </div>
  • 如果我們把每個卡片看作一個可複用的區域的話，那麼它就可以封裝成一個元件。
<div id="app">
     <card></card>
     <card></card>
     <card></card>
</div>

  <script>
    //註冊一個名叫card的元件
  Vue.component('card',{
        template:`<div>
            <img src="logo.png" alt="">
            <h2>web前端教程</h2>
            <p>這裡是描述，很長的描述</p>
            <button>我是按鈕</button>
        </div>`
    });
  • 我們用Vue.component(tagName, options)註冊了一個名字叫card的元件，這樣，在需要複用這個元件的地方，我們只需要使用就可以了。實際開發中，元件比這個複雜得多，越複雜，封裝後的便利性越高
  • 可能你會說，元件裡面的顯示的內容不可能全都一樣。放心，Vue為元件提供了props屬性來接受傳遞進來的引數,後面會介紹

​

建立一個Vue例項

建立語法

<script>
 var app=new Vue({})  
</script>

設定資料

  let vm = new Vue({
     //例項vm的資料
   data:{
          name: "張三",
          age :  21
     }
  });

掛載元素

//檢視view部分
<div id="app"></div>

渲染

  <div id="app">
  我是{{ name }}，
  今年{{ age }}歲
  </div>

總結

建立並使用一個Vue例項並不難，僅需4步走：

newVue----->設定資料----->------->掛載元素------->成功渲染

定義Vue常用的4個常用選項

filters 過濾器

例如:我們有一組數字全是小數,

let vm = new Vue({
    //掛載元素
  el:'#app',

    //例項vm的資料
  data:{
         num1:33.141,
         num2:46.212,
         num3:78.541
    }
 });

展示到頁面中

 <div id="app">
   數字1：{{ num1 }}<br>
   數字2：{{ num2 }}<br>
   數字3：{{ num3 }}
 </div>
  • 突然，需求改了，我們不能把小數展示出來，需要把小數轉換成整數再顯示
  • 這個時候，我們需要把三個小數經過過濾處理後再展示，不能直接展示。這種情況就需要用到Vue的filters過濾器了
 let vm = new Vue({
    //掛載元素
  el:'#app',
    //例項vm的資料
  data:{
         num1:33.141,
         num2:46.212,
         num3:78.541
    },
    //過濾器
  filters:{
      toInt:function(value){
         return parseInt(value);
      }
    }
  });
  • 相信大家都注意到了，引數物件除了el和data屬性之外，還多了一個filters屬性，它的值也是一個物件，裡面定義了一個叫toInt( )的方法，傳入了一個value的引數，函式的作用就是把傳入的引數value，簡單地轉成一個整出並return回去。

緊接著:通過管道符|把函式toInt 放在變數後面即可，num1，num2，num3會分別作為引數value傳入toInt( value )方法進行運算，並返回一個整數

<div id="app">
    數字1：{{ num1 | toInt}}<br>
    數字2：{{ num2 | toInt}}<br>
    數字3：{{ num3 | toInt}}
  </div>

computed計算屬性

我們有三個數，但是需要展示的是三個數字之和。這種情況，就適合用我們的計算屬性computed。

 let vm = new Vue({
    //掛載元素
  el:'#app',
    //例項vm的資料
  data:{
         num1:1,
         num2:3,
         num3:6
    },
    //計算屬性
  computed:{
        sum:function(){
          return this.num1+this.num2+this.num3
        }
    }
 });

緊接著 :

 <div id="app">
   總和：{{ sum }}
 </div>

需要注意的是，sum的值是依賴data中的資料num1，num2，num3的，一旦它們發生了變化，sum的值也會自動更新。

methods 方法

我們定義一個資料a，當使用者點選按鈕的時候，a的值加1。這種情況，我們可以利用methods來實現。

let vm = new Vue({
    //掛載元素
  el:'#app',
    //例項vm的資料
  data:{
         a:0
    },
    //方法
  methods:{
        plus:function(){
            return this.a++;
        }
    }
 });

定義一個plus( )的方法在methods中，下面我們把plus( ) 繫結在按鈕的點選事件上

<div id="app">
    {{ a }}
    <button v-on:click="plus">加1</button>
</div>

watch觀察

watch選項是Vue提供的用於檢測指定的資料發生改變的api。

//在上面的例子中,在方法下面直接再加一個屬性
watch:{
        a:function(){
          console.log(`有變化了，最新值：`);
          console.log(this.a);
        }
    }

最後一部分watch就是我們新加的程式碼，a( ) 表示我們要觀察監聽的就是資料a;

Vue的例項的生命週期

Vue把整個生命週期劃分為建立、掛載、更新、銷燬等階段，每個階段都會給一些“鉤子”

beforeCreate

<script>
    let app = new Vue({
      el:"#app",
        data:{
         name:"前端君"
      },
      beforeCreate(){
         console.log('即將建立');
         console.log(this.$data);//undefined
         console.log(this.$el);//undefined
      }
    });
  • 此時的例項中的data和el還是undefined,不可用的。

created

created(){
    console.log('建立完畢'); //建立完畢
    console.log(this.$data); //object{_ob_:Observer}
    console.log(this.$el);//undefined
 }
  • 此時，我們能讀取到資料data的值，但是DOM還沒生成，所以屬性el還不存在，輸出$data為一個Object物件，而$el的值為undefined。

beforeMount

beforeMount(){
   console.log('即將掛載');
   console.log(this.$el); //<div id="app">{{name}}</div>
}
  • 此時的$el不再是undefined，而是成功關聯到我們指定的dom節點
    ，但此時{{ name }}還沒有被成功地渲染成我們data中的資料。

mounted

 mounted(){
    console.log('掛載完畢');
    console.log(this.$el);//<div id="app">前端課程</div>
 }
  • 此時列印屬性el，我們看到{{ name }}已經成功渲染成我們data.name的值：“前端課程”。

beforeUpdate

  • 當修改vue例項的data時，vue就會自動幫我們更新渲染檢視，在這個過程中，vue提供了beforeUpdate的鉤子給我們，在檢測到我們要修改資料的時候，更新渲染檢視之前就會觸發鉤子beforeUpdate
//html片段程式碼我們加上ref屬性，用於獲取DOM元素（後期會講到）。
 <div ref="app" id="app">
    {{name}}
 </div>
// Vue例項程式碼加上beforeUpdate鉤子程式碼：
 beforeUpdate(){
  console.log('=即將更新渲染=');
  let name = this.$refs.app.innerHTML;
  console.log('name:'+name);
 },

在控制檯修改一下例項的資料name，在更新渲染之前,name還是之前的資料,檢視並未重新渲染更新

updated

  • 此階段為更新渲染檢視之後，此時再讀取檢視上的內容，已經是最新的內容，接著上面的案例，我們新增鉤子updated的程式碼
 updated(){
  console.log('==更新成功==');
  let name = this.$refs.app.innerHTML;
  console.log('name:'+name);
 }

此時name 的值已經被改變了,檢視已經更新;

beforeDestroy

  • 呼叫例項的destroy( )方法可以銷燬當前的元件，在銷燬前，會觸發beforeDestroy鉤子

destroyed

  • 成功銷燬之後，會觸發destroyed鉤子，此時該例項與其他例項的關聯已經被清除，它與檢視之間也被解綁。
  • 此時再在控制檯修改資料,檢視不會改變

actived

  • keep-alive元件被啟用的時候呼叫

deactivated

  • keep-alive 元件停用時呼叫。

相關文章