05 vue 內部指令

阿新 • • 發佈：2018-11-06

Vue2.0 內部指令學習記錄

Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" 
 src="../assets/js/vue.js"></script>
    <title>Hello world</title>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <div id="app">
        {{message}}
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app' 
,
            data:{
                message:'hello Vue!'
            }
        })
    </script>
</body>
</html>

在script程式碼中先例項化 vue物件

el 選項通過值#app與 id值為app的div標籤進行關聯

data選項作為返回資料

在關聯的div標籤中通過{{}} 來引用返回資料值

v-if & v-else & v-show

<!DOCTYPE html> 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>V-if&V-else&V-show</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>V-if&V-else&V-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好，zhangdd</div>
        <div v-else>你好，請先登入</div>

        <hr>
        <div v-show="isLogin">你好，zhangdd</div>
    </div>

    <script type="text/javascript">
        var app =new Vue({
            el:'#app',
            data:{
                isLogin:true
            }
        })
    </script>
</body>
</html>

v-if是vue的一個內部指令，指令用在html中用來判斷是否載入html的DOM

當 data選項中isLogin為true時顯示你好，zhangdd

當為false時顯示你好，請先登入

v-show 調整css中的display屬性值，根據isLogin的值來控制是否顯示

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>V-for 案例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>V-for</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in items1">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="item in sortItems">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="student in sortStudents">
                {{student.name}}-{{student.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var app =new new Vue({
            el:'#app',
            data:{
                items:[20,23,18,7,32,19,54,56,41],
                items1:[20,23,18,7,32,19,54,56,41],
                students:[
                    {name:'jspang',age:33},
                    {name:'panda',age:30},
                    {name:'lucky',age:26},
                    {name:'zhangdd',age:15}
                ]
            },
            computed:{
                sortItems:function(){
                    return this.items.sort(sortNumber);
                },
                sortStudents:function(){
                    return sortByKey(this.students,'age');
                }
            }
        })
        function sortNumber(a,b){
            return a-b;
        }

        //陣列物件方法排序:
        function sortByKey(array,key){
            return array.sort(function(a,b){
            var x=a[key];
            var y=b[key];
            return ((x<y)?-1:((x>y)?1:0));
        });
        }

    </script>
</body>
</html>

v-for 指令是迴圈渲染data中的陣列，v-for指令需要以item in items的語法去使用items 是源資料陣列並且item是陣列元素迭代的別名。

做了三個迴圈的顯示，分別是

無序按照原陣列順序進行顯示

數字排序

自定義排序

computed 選項中做計算操作，需要注意的是該選項中如果不是對data選項的資料做賦值操作，需要重新定義一個匿名變數，同時html中在使用v-for指定進行迴圈使用時用新定義的這個。

v-text & v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>V-text & V-html</title>
</head>
<body>
    <h1>V-text & V-html </h1>
    <hr>
    <div id="app">
        <span>{{message}}</span>=<span v-text="message"></span>
        <hr>
        <span v-html="messageHtml"></span>
    </div>

    <script type="text/javascript">
        var app =new Vue({
            el:'#app',
            data:{
                message:'hello world',
                messageHtml:"<h1>hello world</h1>"
            }
        })
    </script>
</body>
</html>

在html中輸出data選項中的值可以使用{{xxx}}來完成，但是這麼做存在一定的弊端，當網速很慢或者javascript出錯時在html中顯示的直接就是{{xxx}}。v-text就是解決這個問題的。

通過v-text指定賦值data選項裡的內容就可以得到對應的值

同時保證了在javascript出錯或者網速慢的時候不會出現不友好的{{xxx}}現象

如果data選項中的值為html標籤，在通過{{xxx}} 或者v-text進行輸出時，現象是無法輸出或者原資料輸出，即無法解析。這個時候就需要使用v-html指定來完成操作了。

但是v-html指定在使用時有一定的弊端。在生產環境中動態渲染HTML是非常危險的，因為容易導致XSS攻擊。所以只能在可信的內容上使用v-html，永遠不要在使用者提交和可操作的網頁上使用

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on 事件監聽器</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-on 事件監聽器</h1>
    <hr>

    <div id="app">
        本場比賽得分 {{count}}
        <br>
        <button v-on:click="addScore">加分</button>
        <button @click="descScore">減分</button>
        <br>
        <input type="text" v-on:keyup.enter="onEnter" v-model="secondScore">
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data () {
                return {
                    count:0,
                    secondScore:1
                }
            },
            methods: {
                addScore:function(){
                    this.count++;
                },
                descScore:function(){
                    this.count--;
                },
                onEnter:function(){
                    this.count+=parseInt(this.secondScore)
                }
            }
        })
    </script>
</body>
</html>

v-on就是監聽事件,可以用v-on指令監聽DOM事件來觸發一些javascript程式碼

另外v-on也有簡寫的方式通過@代替

v-on:click="addScore"關聯一個addScore方法

在methods選項中實現對應方法

同樣的方式通過@click="descScore"關聯descScore方法

在methods選項中實現對應方法

另外還可以和鍵盤事件進行繫結

v-on:keyup.enter="onEnter" 將回車鍵和onEnter方法進行關聯

在methods選項中實現對應的方法

v-model 是資料來源的繫結即繫結值為data選項中對應的值

v-model

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model 例項</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-model 例項</h1>
    <hr>
    <div id="app">
        <p>原始文字資訊</p>{{message}}
        <p>v-model:<input type="text" v-model="message"></p>
        <p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
        <p>v-model.number: <input type="text" v-model.number="message"></p>
        <p>v-model.trim: <input type="text" v-model.trim="message"></p>
        <h3>文字域</h3>
        <textarea cols="30" rows="10" v-model="message"></textarea>
        <h3>多選按鈕繫結一個值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for="isTrue">{{isTrue}}</label>
        <h3>多選繫結一個數組</h3>
        <input type="checkbox" id="JSPang" value="JSPang" v-model="web_name">
        <label for="JSPang">JSPang</label>
        <input type="checkbox" id="panda" value="panda" v-model="web_name">
        <label for="panda">panda</label>
        <input type="checkbox" id="panpan" value="panpan" v-model="web_name">
        <label for="panpan">panpan</label>
        <p>{{web_name}}</p>
        <h3>單選按鈕繫結</h3>
        <input type="radio" id="one" value="男" v-model="sex">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="two">女</label>
        <p>{{sex}}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    message: 'hello world',
                    isTrue: false,
                    web_name:[],
                    sex:'男'
                }
            }
        })
    </script>
</body>

</html>

v-model指定用來完成資料繫結的功能。

v-bind

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind 例項</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-bind 例項</h1>
    <hr>
    <div id="app">
        <p>
            <img v-bind:src="imgSrc" width="200px"></p>
        <p><a :href="web_url" target="_blank">百度</a></p>
        <hr>
        <div :class="className">1. 繫結Class</div>
        <div :class="{classA:isOk}">2. 繫結Class中的判斷</div>
        <input type="checkbox" id="isOk" v-model="isOk">
        <label for="isOk">{{isOk}}</label>
        <div :class="[classA,classB]">3. 繫結Class中的陣列</div>
        <div :class="isOk?classA:classB">4、繫結class中的三元表示式判斷</div>
        <div :style="{color:red,fontSize:font}">5、繫結style</div>
        <div :style="styleObject">6、用物件繫結style樣式</div>
    </div>
    <style>
        .classA {
            color: red }

        .classB {
            font-size: 150% }
    </style>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    imgSrc: 'https://www.baidu.com/img/bd_logo1.png?where=super',
                    web_url: 'https://www.baidu.com',
                    className: 'classA',
                    isOk: false,
                    classA: 'classA',
                    classB: 'classB',
                    red:'red',
                    font:'20px',
                    styleObject:{
                        color:'green',
                        fontSize:'24px'
                    }
                }
            }
        })
    </script>
</body>

</html>

v-bind是處理HTML中的標籤屬性的，和v-on``v-model同為繫結，只不過繫結的點不一樣

v-pre & v-cloak & v-once

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-pre & v-cloak & v-once 例項</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>v-pre & v-cloak & v-once 例項</h1>
    <hr>
    <div id="app">

        <div v-pre>{{message}}</div>
        <div v-cloak>渲染完成後才會顯示</div>

        <p v-once>第一次繫結的值： {{message}}</p>
        <input type="text" v-model="message">
        <div>{{message}}</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    message: 'hello world'
                }
            }
        })
    </script>
</body>

</html>

v-pre 可以跳過vue的編譯直接輸出原始值即{{xxx}}

v-cloak 在頁面進行載入時，只有載入完成後才會顯示的內容

v-once 在第一次DOM時進行渲染，渲染完成後視為靜態內容，跳出以後的渲染過程

這裡寫圖片描述

05 vue 內部指令

Vue2.0 內部指令學習記錄 Hello World <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta n

vue——內部指令

指令是特殊的帶有字首v-的特性。指令的值限定為繫結表示式，指令的職責就是當其表示式的值改變時把某些特殊的行為應用到DOM上。 v-if v-if指令可以完全根據表示式的值在DOM中生成或移除一個元素。 false——移除；true——生成一個元素如果想切換多個元素，

vue的指令與模板

原生 bool -s rop char lose bin pro helloword 一、指令---是一種特殊的自定義間屬性　　指令的職責就是當表達式的值改變時，相應的將某些行為應用到DOM上，在Vue中，指令以v-開頭 helloworld例子：數據綁定，點

vue2.0學習(一)-的內部指令

IT github class block 學習 lse OS blog markdown vue2.0學習(一)-內部指令 GitHub源碼 v-if v-else v-show v-if dq vue2.0學習(一)-的內部指令

Vue常用指令

vue.js utf-8 java return lse Once bin func 表達式引言：vue 的一些常用指令（逐步更新）。 v-if 條件 v-else 與v-if 搭配使用 v-else-if 與v-if 搭配使用 v-show

Vue.js指令

mod del htm 表達式開始 -html 交互指令掌握一、學習目標了解什麽是 Vue.js 指令理解 Vue.js 指令的用途掌握 Vue.js 指令的書寫規範能夠使用 Vue.js 指令完成部門頁面交互效果(難點和重點) 二、指令的基本概

Vue.js指令小練習003 todolist

需求：分析：文字框輸入的內容可以新增到ul上未√的選擇框的總數為未完成總數任務總數等於li條數點選li會出現文字框可被編輯打√的選擇框內容顏色變淡出現刪除線並且不可被編輯點選完成打√的li會被刪除掉程式碼： <!

Vue.js指令小練習002 列表點選計算價格

需求如下：分析：點選li改變背景色加等於總價，再次點選還原背景色減等於總價。程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

Vue.js指令小練習001 列表點選變色

需求：分析：給li繫結一個背景色樣式，當你點選這個li的時候，這個li背景色的樣式生效，其他的li背景色樣式不生效程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8

Vue基礎指令集錦

v-model雙向繫結資料 <input type="text" v-model="msg"> {{msg}} ###v-on 事件 <div id="box"> <button v-on:click="say"&a

vue 原生指令

vue 原生指令 1. v-bind v-bind:id縮寫為:id 2. v-text 資料繫結與{{}}相似，但是沒有{{}}靈活，比如實現 <div>Text: {{text}}</div> 使用v-tex

05.vue中js動畫與Velocity.js的結合

vue中js動畫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中js動畫</title> &l

Vue入門和基礎——Vue的指令詳解

Vue入門和基礎（三） vue中常用的指令詳解： 1.v-text： <span v-text="message"></span> <span>{{msg}}</span> 上述兩者等價。 2.v-html： <div

Windows中ls不是內部指令

Windows中沒有ls命令，與之相對應的是dir命令，故解決途徑有二：直接使用dir命令，作用相同如果覺得還是ls命令用著順手，那麼加一個即可，步驟如下：新建txt文字，輸入以下內容 @echo off dir 另存為

Vue 基礎指令學習

學習Vue的一些總結，第一次寫部落格，文筆實在是很差不過我會不斷寫的。 <template>  <div> <pre> *v-text 是元素的innertext

在瀏覽器console中呼叫vue內部方法

new Vue({ el: '#app', i18n, store, router, data () { return { address:'' }

【第一季】Vue2.0視訊教程-內部指令(共8集)

很高興你能來學習這套Vue2.0視訊課程，現在越來越多的小公司開始使用Vue來作為前端開發框架了，而且Vue的生態也越來越好，無論你是前端的老手還是新手，都有必要認真並系統的學習，有可能的話儘量在工作中使用它了。第1節：走起我的Vue2.0 很高興你能來學習這套Vue2.0視訊課

vue(二)vue常見指令+事件

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>hello</title> </head>

05--Spring內部Bean和父子Bean

1. 內部Bean（inner bean）當希望一個bean只被某一個類使用時，我們可以使用內部bean。內部bean此時作為某一個類的屬性，只能通過該類例項化。 bean package com

Vue常用指令詳解分析

Vue入門 Vue是一個MVVM（Model / View / ViewModel）的前端框架，相對於Angular來說簡單、易學上手快，近兩年也也別流行，發展速度較快，已經超越Angular了。比較適用於移動端，輕量級的框架，檔案小，執行速度快。最近，閒來無事，所以學習一下Vue這個流行的框架，以備後用。

05 vue 內部指令

Hello World

v-if & v-else & v-show

v-for

v-text & v-html

v-on

v-model

v-bind

v-pre & v-cloak & v-once

相關推薦