碼上歡樂
相關內容    簡體    繁體

vue基礎語法

本文轉載自   查看原文   2018-07-08 17:15   2972 

 


vue基礎語法

vue官網鏈接：https://cn.vuejs.org/

 

 一、Vue簡介

      Vue.js 是一個用於創建 Web 交互界面的庫。它讓你通過簡單而靈活的 API 創建由數據驅動的 UI 組件。

       Vue.js是一款輕量級的、以數據驅動構建web界面的前端JS框架，它在架構設計上采用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心，它是一個Vue的實例，而這個實例又作用域頁面上的某個HTML元素。

       其核心在於通過數據驅動界面的更新和展示而非JS中通過操作DOM來改變頁面的顯示。

二、Vue快速入門  
進入文件夾，按住shift,右鍵打開cmd窗口，下載vue.js.
npm install vue

我們通過new Vue()構建了一個Vue的實例。

        在實例化 Vue 時，需要傳入一個選項對象，它可以包含數據、模板、掛載元素、方法、生命周期鈎子等選項。比如：掛載元素（el）和數據（data），我們可以操縱數據改變視圖。

　　el表示Vue要操作哪一個元素下面的區域，比如：#app則表示操作id為app的元素下面的區域；

       data表示Vue實例的數據對象，data的屬性能夠響應數據的變化；每個 Vue 實例都會代理其 data 對象里所有的屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
    </div>
</body>
<script_top src="js/vue.js"></script_top>
<script_top>
    // 1.創建Vue的案例
    let vm = new Vue({
        el:'#app',
        data:{ //vue中的model -> 數據
            message:'你好，世界！'
        }
    })

</script_top>
</html>

運行結果：

2.2  Vue中雙向數據綁定

        MVVM模式其自身是實現了數據的雙向綁定的，在Vue.js中我們可以通過指令v-model來實現數據雙向綁定。

 代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model="message">
    </div>
</body>
<script_top src="js/vue.js"></script_top>
<script_top>
    let vm = new Vue({
        el:'#app',
        data:{ //vue中的model -> 數據
            message:'你好，世界！'
        }
    })

</script_top>
</html>

運行結果：

 pycharm識別VUE  設置：如下圖

 

 模板設置：

 

英文版：

 

2.3調用模板：

 

Vue的常用指令

Vue.js提供了不少常用的內置指令，接下來我們快速搞定它們，這對我們接下來的開發幫助很大。主要有：

v-once指令

v-if指令

v-show指令

v-else指令

v-for指令

v-on指令

v-bind指令

v-once：執行一次性地插值，當數據改變時，插值處的內容不會更新。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>v-once:是不會改變的</h3>
        <p v-once>原始值：{{msg}}</p>
        <p>后面的：{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
    <script_top src="js/vue.js"></script_top>
    <script_top>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'你好，世界！'
            }
        });
    </script_top>
</body>
</html>

運行結果：  v-model 動態傳值給msg 變量了。 加上v-once，變量的值不會改變！！！

v-if ： 可以接收一個表達式. 不滿足條件可以注釋（沒有該標簽）

       條件渲染指令，根據表達式的真假來添加或刪除元素。其語法結構是：v-if="expression"，其中expression是一個返回bool值的表達式，其結果可以是true或false，也可以是返回true或false的表達式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-Vue的常用指令-v-if</title>
</head>
<body>
    <div id="app">
        <p v-if="show">要顯示出來！</p>
        <p v-if="hide">不要顯示出來！</p>
        <!--v-if可以接收一個表達式.不滿足條件可以注釋。-->
        <p v-if="height > 1.55">小明身高:{{height}}m</p>
        <p v-if="height1 > 1.55">小明身高:{{height1}}m</p>
    </div>
<script_top src="js/vue.js"></script_top>
<script_top>
    //通過數據操控界面

    let vm = new Vue({
        el:'#app',
        data:{
            show:true,
            hide:false,
            //v-if可以接收一個表達式.
            height:1.68,
            height1:1.50,
        }
    });
</script_top>
</body>
</html>

運行結果：　

  擴展：

我們也可以打開控制台，做出如下輸入，進一步體會數據驅動思想：

        

在上述案例中，Vue.js進行數據綁定也完全支持Javascript_top表達式支持，這些表達式會在Vue實例的數據作用域下作為Javascript_top被解析。

   

    {{ number + 1 }}

    {{ ok ? 'YES' : 'NO' }}

    {{ message.split('').reverse().join('') }}

    <div v-bind:id="'list-' + id"></div>

   

       有個限制就是，每個綁定都只能包含單個表達式，以下則不會生效：

 

   <!-- 這是語句，不是表達式 -->

   {{ var a = 1 }}

   <!-- 流控制也不會生效，請使用三元表達式 -->

   {{ if (ok) { return message } }}
擴展

 

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

       也是條件渲染指令，不同的是有 v-show 的元素會始終渲染並保持在 DOM 中。和v-if指令不同點在於：v-show是根據表達式之真假值，切換元素的 display CSS 屬性，當條件變化時該指令觸發過渡效果。

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-Vue的常用指令-v-show</title>
</head>
<body>
    <div id="app">
        <p v-show="show">要顯示出來！</p>
        <p v-show="hide">不要顯示出來！</p>
        <!--v-show可以接收一個表達式.不滿足條件則不顯示。相當於display:none-->
        <p v-show="height > 1.55">小明身高:{{height}}m</p>
        <p v-show="height1 > 1.55">小明身高:{{height1}}m</p>
    </div>
<script_top src="js/vue.js"></script_top>
<script_top>
    //通過數據操控界面

    let vm = new Vue({
        el:'#app',
        data:{
            show:true,
            hide:false,
            //v-show可以接收一個表達式.
            height:1.68,
            height1:1.50,
        }
    });
</script_top>
</body>
</html>

運行結果： v-show  不符合相當於 display:none;

v-show和v-if的區別：

       v-if 是真實的條件渲染，因為它會確保條件塊在切換當中適當地銷毀與重建條件塊內的事件監聽器和子組件；

　　v-show 則只是簡單地基於 CSS 切換。

 　   v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 v-if 較好。

 

v-else   二選一   注意：v-else前一兄弟元素必須有 v-if 或 v-else-if。

可以用v-else指令為v-if或v-show添加一個“else塊”。

代碼如下：v-if和v-else結合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06vue-v-else命令</title>
</head>
<body>
    <div id="app">
        <!--v-else:是不能單獨使用的。前面必須加上v-if/v-show.並且必須黏在一起，否則會報錯。-->
        <p v-if="height > 1.70">小明身高:{{height}}m</p>
        <p v-else>小明身高不足1.70m</p>
    </div>
<script_top src="js/vue.js"></script_top>
<script_top>
    //通過數據操控界面

    let vm = new Vue({
        el:'#app',
        data:{
            //v-else.
            height:1.88,
        }
    });
</script_top>
</body>
</html>

 

v-else-if  多選一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07Vue的常用指令v-else-if</title>
</head>
<body>
    <div id="app">
        <!--v-else-if-->
        <p>輸入的成績對於的等級是：</p>
        <p v-if="score >= 90">優秀</p>
        <p v-else-if="score >= 80">良好</p>
        <p v-else-if="score >= 60">及格</p>
        <p v-else>不及格</p>
        <input type="text" v-model="score">
    </div>
<script_top src="js/vue.js"></script_top>
<script_top>
    //通過數據操控界面

    let vm = new Vue({
        el:'#app',
        data:{
            //v-else-if.
            score:50  //優秀 良好 及格 不及格
        }
    });
</script_top>
</body>
</html>

 

v-for  基於數據渲染一個列表，類似於JS中的遍歷。其數據類型可以是 Array | Object | number | string。

       該指令之值，必須使用特定的語法(item, index) in items,  為當前遍歷元素提供別名。 v-for的優先級別高於v-if之類的其他指令

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-Vue的常用指令v-for</title>
</head>
<body>
    <div id="app">
        <p v-for="(score, index) in scores">
            {{index + ':' + score}}
        </p>
        <hr>
        <p v-for="d in dog">
            {{d}}
        </p>
        <hr>
        <p v-for="str in name">
            {{str}}
        </p>
        <hr>
        <p v-for="n in phone">
            {{n}}
        </p>
    </div>
<script_top src="js/vue.js"></script_top>
<script_top>
    let vm = new Vue({
        el:'#app',
        data:{
            scores:[100,87,88,80],
            dog:{name:'旺財',age:6,height:1.2},
            name:'er',
            phone:'123',
        }
    });
</script_top>
</body>
</html>

 

　　

v-for練習

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{
            width:600px;
            border:2px solid orangered;
            text-align:center;
        }
        thead{
            background:orangered;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年齡</td>
                    <td>性別</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="p in persons">
                    <td>{{p.name}}</td>
                    <td>{{p.age}}</td>
                    <td>{{p.sex}}</td>
                </tr>    
            </tbody>
        </table>
    </div>
<script_top src="js/vue.js"></script_top>
<script_top>
    let vm = new Vue({
        el:'#app',
        data:{
            persons:[
                {name:'張三',age:18,sex:'男'},
                {name:'李四',age:20,sex:'男'},
                {name:'王五',age:23,sex:'女'},
                {name:'趙6',age:30,sex:'男'}
            ]
        }
    });
</script_top>
</body>
</html>

 　　

v-text：標簽里的內容都不會渲染。  v-html：字符串標簽。 標簽里的內容都不會渲染。

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}hahaha</p>
        <!-- v-text：標簽里的內容都不會渲染 -->
        <p v-text="msg">呵呵呵呵</p>

        <hr>
        <!-- 字符串標簽。 標簽里的內容都不會渲染-->
        <div v-html="html">
            哈哈哈哈
            <input type="text">
        </div>
    </div>
<script_top src="js/vue.js"></script_top>
<script_top>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'今天天氣真好！',
            html:'<input type="date"><input type="color">'
        }
    });
</script_top>
</body>
</html>

運行結果：

v-bind     簡寫方式:冒號  動態綁定屬性、樣式、類  動態地綁定一個或多個特性，或一個組件 prop 到表達式。

v-bind指令可以在其名稱后面帶一個參數，中間用一個冒號隔開。這個參數通常是HTML元素的特性（attribute），比如：

v-bind:src="imageSrc"  可以縮寫： :src="imgaeSrc"    

 

:class="{ red: isRed }"  或  :class="[classA, classB]" ...   

 

:style="{ fontSize: size + 'px' }"  或 :style="[styleObjectA, styleObjectB]" ...

 

 綁定一個有屬性的對象，比如：v-bind="{ id: someProp, 'other-attr': otherProp }" 

...

語法結構：v-bind:argument="expression"

因為 Mustache 不能在 HTML 屬性中使用，應使用 v-bind 指令，Mustache 是一個 logic-less （輕邏輯）模板解析引擎，它的優勢在於可以應用在 Javascript_top、PHP、Python、Perl 等多種編程語言中。 

案例實操：讓HTML5學院在各大學院中處於選中狀態

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.class</title>
    <style>
        .active{
            background-color:orangered;
            font-size:20px;
            color:#fff;
        }

    </style>
</head>
<body>
    <div id="app">
        <p v-for="(college,index) in colleges" :class="index === activeIndex ? 'active' : ''">
            {{college}}
        </p>
        <p style="color:red">今天的天氣很好！</p>
        <p :style="{color:fontColor}">今天的天氣很好！</p>
    </div>
<script_top src="js/vue.js"></script_top>
<script_top>
    let vm = new Vue({
        el:'#app',
        data:{
            colleges:[
                'ios學院',
                'java學院',
                'html5學院',
                'ui學院',
                've學院'
            ],
            activeIndex:0,
            fontColor:'green',
        }
    });
</script_top>
</body>
</html>

 

運行結果：

 

v-on      簡寫方式:@   動態地綁定一個或多個特性，或一個組件 prop 到表達式；其作用和v-bind類似。注意：如果用在普通元素上時，只能監聽 原生 DOM 事件；但是如果用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。

常用的修飾符包括：

 .stop - 調用 event.stopPropagation()；停止冒泡。

    

.prevent - 調用 event.preventDefault(); 停止監聽原生事件。

    

.capture - 添加事件偵聽器時使用 capture 模式。

    

 .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。

    

 .{keyCode | keyAlias} - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。

    

 .once - 觸發一次。

  

使用手法：

<!-- 方法處理器 -->

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

<!-- the click event will be triggered at most once -->

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

 

綁定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <!-- v-vind:簡寫冒號。綁定:屬性、樣式、類 -->
        <p :style="{color:fontColor}">{{msg}}</p>
        <button v-on:click="msg='娃哈哈'">改變內容</button>
        <!-- v-on:簡寫@ -->
        <button @click="changeContent()">改變內容1</button>
        <button @click="changeContentColor()">改變字體顏色</button>
    </div>
<script_top src="js/vue.js"></script_top>
<script_top>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'今天的天氣很好！',
            fontColor:'red'
        },
        methods:{  // 實例所以函數實現
            // 鈎子函數
            changeContent(){
                // alert(0);
                this.msg='測試改掉沒有！';
            },
            changeContentColor(){
                this.fontColor = 'green';
            }
        }
    });
</script_top>
</body>
</html>

 

綜合練習：增刪小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #app{
            margin:50px auto;
            width:600px;
        }
        fieldset{
            border:1px solid orangered;
            margin-bottom: 20px;
        }
        fieldset input{
            width:200px;
            height:30px;
            margin:10px 0;
        }

        table{
            width:600px;
            border:2px solid orangered;
            text-align:center;
        }
        thead{
            background:orangered;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 第一部分 -->
        <fieldset>
            <legend>貝貝學生錄入系統</legend>
            <div>
                <span>姓名:</span>
                <input type="text" placeholder="請輸入姓名" v-model="newStudent.name">
            </div>
            <div>
                <span>年齡:</span>
                <input type="text" placeholder="請輸入年齡" v-model="newStudent.age">
            </div>
            <div>
                <span>性別:</span>
                <select v-model="newStudent.sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>
            <div>
                <span>手機號:</span>
                <input type="text" placeholder="請輸入手機號" v-model="newStudent.phone">
            </div>
            <!-- v-on  @ -->
            <button @click="createNewStudent()">創建新用戶</button>
        </fieldset>

        <!-- 第二部分 -->
        <table>
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>年齡</td>
                    <td>性別</td>
                    <td>手機號</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(p,index) in persons">
                    <td>{{p.name}}</td>
                    <td>{{p.age}}</td>
                    <td>{{p.sex}}</td>
                    <td>{{p.phone}}</td>
                    <td>
                        <button @click="deleteStudentMsg(index)">刪除</button>
                    </td>
                </tr>    
            </tbody>
        </table>
    </div>
<script_top src="js/vue.js"></script_top>
<script_top>
    let vm = new Vue({
        el:'#app',
        data:{
            persons:[
                {name:'張三',age:18,sex:'男',phone:'12345'},
                {name:'李四',age:20,sex:'男',phone:'12345'},
                {name:'王五',age:23,sex:'女',phone:'12345'},
                {name:'趙6',age:30,sex:'男',phone:'12345'}
            ],
            newStudent:{name:'',age:0,sex:'男',phone:''},
        },
        methods:{
            // 創建一條新記錄
            createNewStudent(){
                // 姓名不能為空
                if(this.newStudent.name === ''){
                    alert('姓名不能為空！');
                    return;
                }
                // 年齡不能小於0
                if(this.newStudent.age <= 0){
                    alert('請輸入正確的年齡！');
                    return;
                }
                // 手機號不能為空
                if(this.newStudent.phone === ''){
                    alert('手機號不能為空！');
                    return;
                }

                // 往數據庫添加一條新元素
                this.persons.unshift(this.newStudent);
                // 清空數據
                this.newStudent = {name:'',age:0,sex:'男',phone:''};
            },

            // 刪除一條學生記錄
            deleteStudentMsg(index){
                this.persons.splice(index,1)
            }
        }
    });
</script_top>
</body>
</html>

運行結果：

計算屬性（computed properties）

一、起因？

        雖然在模板中綁定表達式是非常便利的，但是它們實際上只用於簡單的操作。在模板中放入太多的邏輯會讓模板過重且難以維護。比如：

 

  <div id="example">

     {{ message.split('').reverse().join('') }}

  </div>

 

        這樣，模板不再簡單和清晰。在實現反向顯示 message 之前，你應該通過一個函數確認它。所以，Vue.js提供了計算屬性來讓我們去處理實例中的復雜邏輯。

 　　計算屬性 (computed properties) 就是不存在於原始數據中，而是在運行時實時計算出來的屬性。

 

案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <p>初始值:{{name}}</p>
    <!-- 表達式要產生結果即可 -->
    <p>翻轉值:{{name.split('').reverse().join('')}}</p>
    <p>函數調用:{{revecrStr()}}</p>
    <!-- 直接調用計算屬性，就會直接調用get方法。 -->
    <p>計算屬性:{{reverse}}</p>
</div>
<script_top src="js/vue.js"></script_top>
<script_top>
    new Vue({
        el:'#app',
        data:{
            name:'Rosc jack'
        },
        methods:{
            revecrStr(){ //函數
                return this.name.split('').reverse().join('');
            },

        },
        //計算選項
        computed:{
            // get方法  計算屬性
            // 直接調用計算屬性，就會直接調用get方法。
            reverse(){
                return (this.name.split('').reverse().join(''));
            }
        }
    })
</script_top>
</body>
</html>

運行結果：

 計算屬性被設計出來的目的在於：getter 是干凈無副作用的。

 

二、計算屬性 和 Methods的區別？

       當頁面重新渲染（不是刷新）的時候，計算屬性不會變化，直接讀取緩存使用，適合較大量的計算和改變頻率較低的屬性；而method，就是當頁面重新渲染的時候（頁面元素的data變化，頁面就會重新渲染），都會重新調用method。

        如果不希望有緩存，我們可以用method取代computed。

疑惑：為什么需要緩存？

假設我們有一個重要的計算屬性 A ，這個計算屬性需要一個巨大的數組遍歷和做大量的計算。然后我們可能有其他的計算屬性依賴於 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter ！

  

三、計算屬性的setter方法

計算屬性默認只有 getter ，不過在需要時你也可以提供一個 setter ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>計算屬性</title>
</head>
<body>
<div id="app">
    <p>{{fullName}}</p>
    <!-- v-on @ -->
    <button @click="deal()">調用計算屬性的setter方法</button>
</div>
<script_top src="js/vue.js"></script_top>
<script_top>
    new Vue({
        el:'#app',
        data:{
            firstName:'zhang',
            lastName:'sanfeng'
        },
        methods:{
            deal(){
                // 調用計算屬性的setter方法
                this.fullName = '娃 哈哈';
            }
        },
        computed:{
            /*//get
            fullName(){
                return this.firstName + ' ' + this.lastName
            }*/
            
            fullName:{
                // get方法
                get:function(){
                    return this.firstName + ' ' + this.lastName;
                },
                // set方法 相當於傳值。
                set:function(str){
                    // alert(0)
                    let nameArr = str.split(' ');
                    this.firstName = nameArr[0];
                    this.lastName = nameArr[1];
                }
            }
            
        }

    })
</script_top>
</body>
</html>

 

　　

 


免責聲明！

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



猜您在找 VUE的基礎語法（二） Vue基礎語法 Vue學習-基礎語法 Vue：基礎語法 Vue3基礎-模板語法 Vue基礎語法之@click(轉) Vue.js基礎語法（一） Vue（1）- es6的語法、vue的基本語法、vue應用示例，vue基礎語法(轉) VUE - 基礎語法（文本、標簽、屬性） Vue 2.0基礎語法：系統指令
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM