Vue基本語法

時間  2019-11-10
標籤 vue 基本 語法 简体版
原文   原文鏈接

Vue基本語法和組件傳參

基本語法

Vue是一個 MVVM 的框架,數據驅動和 組件化是Vue的核心思想。簡單的講MVVM框架就是：咱們只須要在數據層作數據操做，顯示層會檢測到咱們每次的數據變化，而後作出相應的改變，監測數據這個工做就是中間的ViewModel。經過這種模式，咱們就能夠不用再直接操做DOM節點來進行數據的改變。javascript

1、插值

{{data}} 在模板裏能夠實現data數據的展現，若是data數據改變，展現的數據也會響應式的改變。響應式的改變意味着咱們不須要強制刷新頁面就能夠實現數據的變化。這種語法爲請輸入代碼Mustache語法css

<template>
    <div class="main">
         <h3>這裏是title的值：{{title}}</h3>
    </div>
</template>
export default {
    name:'phonerisk',
    data(){
        return{
            title:'testTitle'
        }
    }
}

{{}}插值圖片
網頁上就會顯示出來data裏面title的值。html

2、v-html

v-html能夠將一段HTML的代碼字符串輸出成HTML片斷而不是普通的文本。vue

<template>
    <div class="main">
        <p >這裏是<span v-html='html'></span></p>
    </div>
</template>
export default {
    name:'phonerisk',
    data(){
        return{
            html:'<span style="color:blue;font-size:23px;">v-if</span>'
        }
    }
}

v-html圖片
網頁上將html字符串渲染成顏色爲藍色的普通文本。java

3、v-bind

Mustache·語法不能用於HTML上，因此咱們須要綁定一些屬之類的須要使用v-bind。v-bind就是將data裏面的數據綁定到HTML上面，從而實現屬性的變化。web

<template>
    <div class="main">
        <img :src="imgUrl" />
    </div>
</template>
export default {
    name:'phonerisk',
    data(){
        return{
             imgUrl:"../../static/img/KFC.e66b2f8e.png"
        }
    }
}

v-bind
v-bind 能夠簡寫成 :數組

4、v-model

v-model是用於表單輸入的數據雙向綁定。所謂雙向綁定就是視圖層的數據變化會引發數據層數據的改變，相反的，數據層的變化也會致使視圖層展現數據的變化。框架

<template>
    <div class="main">
        <input type="text" v-model="name">
        {{name}}
        <button @click='changeName'>改變名字</button>
    </div>
</template>
export default {
    name:'phonerisk',
    data(){
        return{
            name:'小明'
        }
    },
    methods:{
        changeName(){
            this.name = "小花";
        }
    }
}

v-model圖片

input輸入框綁定name,輸入框初始顯示‘小明’,在輸入框裏更改信息的時候，name同時發生改變，點擊按鈕改變name數值的時候，輸入框裏面的數據同時發生改變。ide

5、v-on

v-on 用於監聽DOM事件，如按鈕的點擊事件、雙擊事件等。v-on 的簡寫爲 @,以下面的 @click 就等價爲 v-on:click。函數

template>
    <div class="main">
       
        <button @click='yes'>你敢點我嗎？</button>
    </div>
</template>
methods:{
        yes(){
            alert("我有啥不敢的！！！");
        }
    }

-on
這個案例是監聽按鈕的點擊事件，點擊以後調用 yes 函數，而後彈出警告框。

在平時的開發過程當中咱們可能會使用到 event.preventDefault() 或者 event.stopPropagation() 來阻止事件的繼續傳播，可是這個是直接操做DOM節點，不符合Vue的思想。因此Vue採用修飾符來進行相關的操做。下面我例舉幾個經常使用的，如瞭解更過，能夠查看Vue的官網進行更詳細的學習。

  1. .stop

    沒有加修飾符 
    <div class="main" @click="div">
        <button @click.stop='yes'>你敢點我嗎？</button>
    </div>
    methods:{
        yes(){
            alert("我有啥不敢的！！！");
        },
        div(){
            alert("我會DIV");
        }
    }

    效果以下圖：
    v-on.stop

    加了 .stop 修飾符以後的效果 
    <button @click.stop='yes'>你敢點我嗎？</button>

    效果以下圖：
    v-on.stop1
    .stop 修飾符阻止了事件的繼續傳播，因此子節點的 click事件沒有冒泡到父節點，因此div的點擊監聽沒有監聽到內容。

  2. .prevent

    沒有加修飾符 
    <form @submit="onSubmit">
        <button @click="onSubmit">提交</button>
    </form>

    運行結果以下圖：
    v-on.prevent

    加了 .prevent 修飾符以後的效果 
    <form @submit.prevent ="onSubmit">
    <button @click="onSubmit">提交</button>
</form>

    v-on.prevent1

    .prevent 提交表單以後頁面不在從新渲染。能夠看到沒加修飾符的時候頁面從新加載，可是在加修飾符以後，頁面不在從新加載。

  3. .keyup

    <input v-on:keyup.13="submit">
<input @keyup.enter="submit">

    綁定到輸入框裏，能夠直接按enter鍵就出發提交的方法，和點擊提交按鈕同樣的效果，官網還提供了其餘按鍵的別名

6、v-if

v-if用於作條件化的渲染，當組件的判斷條件發生改變，這個組件會被銷燬並重建。

<template>
    <div class="main">
    <span v-if="display">我叫001</span>
    <span v-if="!display">我叫002</span>
    <button @click="changeShow">切換</button>
    </div>
</template>
```javascript
    data(){
        return{
            display:true
        }
    },
    methods:{
        changeShow(){
          this.display = !this.display;
        },
    }

```
運行結果以下圖：

v-if

v-if綁定的變量爲 true 的時候，其所在的元素會被渲染出來，反之亦然。

7、v-else、v-else-if

v-else 和C語言中的else同樣的語法效果。若是條件變量不知足 v-if ,則執行 <v-else> 的內容

<div class="main">
    <span v-if="display">我叫001</span>
    <span v-else>我叫002</span>
    <button @click="changeShow">切換</button>
    </div>

運行效果和上圖一致。

v-else-if 是Vue2.1.0版本新增的一個屬性。v-else-if 必須用在 v-if 和 v-else 之間纔有效果。

<template>
    <div class="main">
    <span v-if="display === 1">我叫001</span>
    <span v-else-if="display === 2">我叫002</span>
    <span v-else>我叫003</span>
    <button @click="changeShow">切換</button>
    </div>
</template>
data(){
        return{
            display:1
        }
    },
    methods:{
        changeShow(){
            this.display = (this.display + 1)%3;
        },
    }

運行結果以下圖：
v-else-if

8、v-show

v-show 是切換元素的 display 屬性的。

<template>
    <div class="main">
    <span v-show="display">我叫001</span>
    <span v-show="!display ">我叫002</span>
    <button @click="changeShow">切換</button>
    </div>
</template>
data(){
        return{
            display:true
        }
    },
    methods:{
        changeShow(){
            this.display = !this.display;
        },
    }

運行效果以下圖：
v-show

9、v-for

v-for 用於屢次渲染同一模板或者元素。

<div class="main">
        <ul v-for="(name, index) in names" :key="index">
            <li>{{index}}、個人名字叫{{name}}</li>
        </ul>
    </div>
data(){
        return{
           names:['jack','joe','Nancy', 'lily']
        }
    },

運行結果以下圖：
v-for

v-for 屢次渲染了li 裏面的內容，循環遍歷了names 數組，並將結放入 {{name}} 裏面。

10、v-once

v-once 只渲染元素和組件一次，若是內容改變，也會將元素、組件視爲靜態元素跳過。

<div class="main">
    <!-- 單個元素 -->
    <span v-once>This will never change:{{msg}}</span>
    <!-- 有子元素 -->
    <div v-once>
      <span>comment:::</span>
      <span>{{msg}}</span>
    </div>
    <!-- 循環 -->
    <ul>
      <li v-for="i in names" v-once :key="i">{{i}}</li>
    </ul>
    <hr>
    <span>This will change:</span>
     <!-- 單個元素 -->
    <span>This will never change:{{msg}}</span>
    <!-- 有子元素 -->
    <div >
      <span>comment:::</span>
      <span>{{msg}}</span>
    </div>
    <!-- 循環 -->
    <ul>
      <li v-for="i in names"  :key="i">{{i}}</li>
    </ul>
    <button @click="changValue">testChange</button>
  </div>
data() {
    return {
      msg: 111,
      names: ["jack", "joe", "Nancy", "lily"]
    };
  },
  methods: {
    changValue() {
      this.msg += 111;
      this.names[2] = "web";
    }
  }

運行效果以下圖：
v-once

在點擊按鈕後, msg 會增長，可是上面有v-once指令的元素等則不會從新渲染。

11、v-if和v-show的區別

前面講了v-if 和 v-show,兩個指令都是用在元素之間的顯示和隱藏的切換，那麼，這兩個指令究竟有什麼不一樣呢？接下來我將用一個示例來說解他們之間的差別。

<template>
  <div class="main">
    <h3>v-if</h3>
    <div class="content" v-if="display">1</div>
    <div class="content" v-else>2</div>
    <h3>v-show</h3>
    <div class="content" v-show="display">1</div>
    <div class="content" v-show="!display">2</div>
    <h3>對比</h3>
    <div class="content">1</div>
    <div class="content">2</div>
    <button @click="changeValue">點擊我啦</button>
  </div>
</template>
data() {
    return {
      display: true
    };
  },
  methods: {
    changeValue() {
      this.display = !this.display;
    }
  }
.content {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: solid 1px black;
  background-color: red;
}
.content + .content {
  margin-left: 20px;
}

運行效果以下圖：
conpare

從上圖咱們能夠看出當display 爲 false 的時候，v-if 和v-show顯示位置不同。

  1. 首先咱們解讀一下這個代碼的css:content類設置了div的長寬和背景色，dispaly屬性爲 inline-block,
    .content + .content 設置了若是有兩個content 類在一塊兒的時候，後面一個的左邊距爲20個像素。
  2. 在dispaly 爲 true 的時候，兩個div都靠左顯示。
  3. 在 display 爲 false 的時候，上面的div在原來的位置從新渲染，可是下面的div卻有一個20像素的左邊距。
  4. 因此v-if渲染的時候，不會將不符合條件的元素加載到DOM樹裏面，而v-show則會將全部的節點都加載到DOM樹，而後根據條件，更改節點的display 屬性，生成不一樣的渲染樹。
    compare1
    通常來講， v-if須要更高的開銷，每次都會改變DOM樹，可是v-show 只須要改變元素的 display ，開銷更低。

12、v-for和v-if優先級問題

當v-for 和v-if 在同一個蒜素裏的時候，前者比後者有更高的優先級，因此咱們在開發中必定要注意優先級的問題。

  1. 若是咱們是想有條件的跳過循環中的某些項的時候：
<template>
  <div class="main">
   <ul >
       <li v-for="(count, index) in counts" :key="index" v-if="count >30">
           {{index + 1}}、我花費了{{count}}元
        </li>>
       {{index + 1}}、我花費了{{count}}元
       </li>
   </ul>
  </div>
</template>
data() {
    return {
      counts:[11,22,33,44,55,66]
    };

運行結果以下圖：
v-if-v-for

跳過了count 小於 30 的項

2.若是咱們是打算有條件的跳過循環的話那麼咱們應該將判斷寫在循環的外面，先判斷條件。

<template>
  <div class="main">
   <ul  v-if="counts.length >3">
       <li v-for="(count, index) in counts" :key="index">
           {{index + 1}}、我花費了{{count}}元
        </li>
   </ul>
  </div>
</template>

運行結果以下圖：
v-if-v-for2

至此，講完了Vue 的基本語法......撒花✿✿ヽ(°▽°)ノ✿

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程