Vue.JS學習筆記（一）

簡介

Vue.js是目前比較火的輕量級的前端框架之一。是一套構建用戶界面的漸進式框架。

Vue 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。

var newVue=new Vue({
    el:'#demo',
    data:{
        name:'curry',
        age:18,
    },
    create:function(){
        console.log("hello,"+this.name);
    },
    methods:{
        showMsg(){
            console.log("hello,"+this.name);
        },
    },
})

Vue包含掛在元素（el），數據（data），模板（template），方法（methods）與生命週期鉤子（created等）等選項。不一樣的實例選項擁有不一樣的功能，如：

1. el代表咱們的Vue須要操做哪個元素下的區域，’#demo’表示操做id爲demo的元素下區域。
2. data表示Vue 實例的數據對象，data 的屬性可以響應數據的變化。
3. created表示實例生命週期中建立完成的那一步，當實例已經建立完成以後將調用其方法。

指令

v-text

v-text: 用於更新綁定元素中的內容

<div v-text="text"></div>
//二者同樣
<div>{{text}}</div>

v-html

v-html: 用於更新綁定元素中的html內容

<div v-html="html"></div>

通常狀況下不會再頁面使用html插入，以防止xss攻擊。

v-show

v-show：根據表達式之真假值，切換元素的display CSS 屬性

<div v-show=true>顯示我</div>

v-if、v-else、v-else-if

根據表達式的值的真假條件渲染元素

//根據隨機值來進行顯示不一樣的內容
<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

v-else 、v-else-if 必須跟在 v-if 或者 v-else-if以後。

v-for

v-for是以item in items的形式的特殊語法，經常使用來綁定數據到數組來渲染一個列表

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: '張三' },
      { name: '李四' },
      { name: '王五' }
    ]
  }
})
</script>

也能夠將第二個參數做爲鍵名

<li v-for="(value, key) in object">
    {{ key }} : {{ value }}
</li>

第三個參數爲索引

<li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
</li>

v-on

v-on：綁定事件監聽器

<button v-on:click="doThis"></button>

<!-- 縮寫 -->
<button @click="doThis"></button>

v-bind

v-bind:動態地綁定一個或多個特性，或一個組件 prop 到表達式。

<!-- 綁定一個屬性 -->
![](imageSrc)

<!-- 縮寫 -->
![](imageSrc)

<!-- 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>

<!-- 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

v-model

v-model:隨表單控件類型不一樣而不一樣。只有
、 、
、components可使用。

用於表單控件綁定。

<input v-model="remark"></input>

修飾符：

• .lazy - 取代 input 監聽 change 事件

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

• .number - 輸入字符串轉爲數字(若是原值的轉換結果爲 NaN 則返回原值)

<input v-model.number="age" type="number">

• .trim - 輸入首尾空格過濾

<input v-model.trim="msg">

v-once

v-once：只渲染元素和組件一次。隨後的從新渲染,元素/組件及其全部的子節點將被視爲靜態內容並跳過。這能夠用於優化更新性能。

<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>