開始使用 Vuejs 2.0 ---簡單總結2


Vuejs的常用指令

  • v-html
  • v-show
  • v-if
  • v-for
  • v-on

1 、v-html

v-html 更新元素或者變量的innerHTML,按普通html解析,和v-text的區別是在變量中的html標簽會被瀏覽器解析,比如<br>會直接解析為換行

 

語法

 <!--直接在html標簽中使用vuejs中的變量msg,語法跟v-text相同-->
 <div v-html="msg"></div>

實例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Vuejs簡單示例</title>
        <!--引入開發版本vue.js,在開發版本中會有很多友好的提示-->
        <script src='./vue.js'></script>
    </head>
    <body>
        <!--定義一個id為demo的div-->
        <div id="demo">

          <!--此處的msg為在vuejs中定義的變量,放在兩個花括號中-->
        <div v-html="msg"></div>
        <script>
            <!--實例化vuejs-->
            new Vue({
            <!--el指定的id為css選擇器-->
                el:'#demo',
            <!--我們的變量統統放到data中-->
                data:{
            <!--此處聲明的變量msg內容為實驗-->
                    msg:'第一行<br><hr>第二行'
                }
            })
    </script>
    </body>
</html>

2、 v-show

v-show 根據條件解析元素display的屬性的真假,如果為真則displayblock,假的話則為none在頁面不顯示。

語法

<!--Show和Hide需在vue中定義。-->
<span v-show="Show">你能看到我!</span>
<span v-show="Hide">你能看到我嗎!</span>

實例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Vuejs簡單示例</title>
        <!--引入開發版本vue.js,在開發版本中會有很多友好的提示-->
        <script src='./vue.js'></script>
    </head>
    <body>
        <!--定義一個id為demo的div-->
        <div id="demo">

          <!--此處的Show和Hide為在vuejs中定義的變量,放在兩個花括號中-->
         <span v-show="Show">你能看到我!</span>
        <span v-show="Hide">你能看到我嗎!</span>
        <script>
            <!--實例化vuejs-->
            new Vue({
            <!--el指定的id為css選擇器-->
                el:'#demo',
            <!--我們的變量統統放到data中-->
                data:{
            <!--此處聲明的變量msg內容為實驗-->
                    Show:true,
                    Hide:false
                }
            })
    </script>
    </body>
</html>

3 、 v-if

v-ifv-elsev-else-if,if三兄弟,條件判斷,這個跟我們平時見到的if語句類似,根據表達式的值的真假條件渲染元素。在切換時元素及它的數據綁定 / 組件被銷毀並重建。

注意

  • v-else不需要表達式,但是需要跟在v-ifv-else-if后面
  • 我們在實驗中直接使用了truefalse在實際使用中可以使用表達式,例如v-if="1>3"

語法

//Show需在vue中定義
<span v-if="Show">你能看到我!</span>

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Vuejs簡單示例</title>
    <script src='./vue.js'></script>
</head>
<body>
    <div id="demo">
        <p>第一組</p>
        <p>預期顯示“你能看到我!”</p>
        <span v-if="Show">你能看到我!</span>
        <span v-else>你能看到我嗎!</span>
        <br>
        <p>第二組</p>
        <p>預期顯示“你能看到我嗎!”</p>
        <span v-if="hide">你能看到我!</span>
        <span v-else>你能看到我嗎!</span>
        <br>
        <p>第三組</p>
        <p>預期顯示“你真的能看到我嗎!”</p>
        <span v-if="hide">你能看到我!</span>
        <span v-else-if="hide">你能看到我嗎!</span>
        <span v-else>你真的能看到我嗎!</span>

    </div>
</body>
</html>
<script>
    new Vue({
        el:'#demo',
        data:{
            Show:true,
            hide:false
        }
    })
</script>

4  、v-for

v-for 循環遍歷

語法

//items為數據,item為數據的元素,text為數據中的元素內容
<div v-for="item in items">
    {{ item.text }}
</div>

 

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js指令示例</title>
    <script src='./vue.js'></script>
</head>
<body>
    <div id="demo">
        <div v-for="item in items">
          {{ item.text }}
        </div>
        <div v-for="item in items">
          {{ item.name }}
        </div>
        <div v-for="item in items">
           {{ item.text }}{{ item.name }}
        </div>

        <div v-for="item in items">
           {{ item }}
        </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#demo',
        data:{
            items:[
                {text:'hello',name:'實驗'},
                {text:'hello',name:'vuejs'},
                {text:'hello',name:'html'},
                {text:'hello',name:'js'},
            ]
        }
    })
</script>

5、 v-on

v-on 綁定事件監聽器

語法

<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 內聯語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認行為,沒有表達式 -->
<form @submit.prevent></form>
<!--  串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符,鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符,鍵代碼 -->
<input @keyup.13="onEnter">

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js指令示例</title>
    <script src='./vue.js'></script>
</head>
<body>
    <div id="demo">
        <button v-on:click="doThis">{{msg}}</button>
        </div>
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#demo',
        data:{
            msg:'單擊按鈕',
            name:'vuejs'
        },
        methods:{
            doThis:function(e){
                console.log(this);
                //console.log(e.target.tagName);
                console.log(e.target);
                console.log('hello'+this.name+'!');
            }
        }
    })
</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM