vue基礎語法。 vue基礎語法

時間  2019-12-14
標籤 vue 基礎 語法 简体版
原文   原文鏈接

vue基礎語法

 

 1、Vue簡介html

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

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

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

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

咱們經過new Vue()構建了一個Vue的實例。ios

        在實例化 Vue 時，須要傳入一個選項對象，它能夠包含數據、模板、掛載元素、方法、生命週期鉤子等選項。好比：掛載元素（el）和數據（data），咱們能夠操縱數據改變視圖。web

　　el表示Vue要操做哪個元素下面的區域，好比：#app則表示操做id爲app的元素下面的區域；數據庫

       data表示Vue實例的數據對象，data的屬性可以響應數據的變化；每一個 Vue 實例都會代理其 data 對象裏全部的屬性。express

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

運行結果：npm

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 src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{ //vue中的model -> 數據
            message:'你好，世界！'
        }
    })
</script>
</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 src="js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                msg:'你好，世界！'
            }
        });
    </script>
</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 src="js/vue.js"></script>
<script>
    //經過數據操控界面
    let vm = new Vue({
        el:'#app',
        data:{
            show:true,
            hide:false,
            //v-if能夠接收一個表達式.
            height:1.68,
            height1:1.50,
        }
    });
</script>
</body>
</html>

 

運行結果：　

  擴展：

  擴展

 

 

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 src="js/vue.js"></script>
<script>
    //經過數據操控界面
    let vm = new Vue({
        el:'#app',
        data:{
            show:true,
            hide:false,
            //v-show能夠接收一個表達式.
            height:1.68,
            height1:1.50,
        }
    });
</script>
</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 src="js/vue.js"></script>
<script>
    //經過數據操控界面
    let vm = new Vue({
        el:'#app',
        data:{
            //v-else.
            height:1.88,
        }
    });
</script>
</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 src="js/vue.js"></script>
<script>
    //經過數據操控界面
    let vm = new Vue({
        el:'#app',
        data:{
            //v-else-if.
            score:50  //優秀 良好 及格 不及格
        }
    });
</script>
</body>
</html>
View Code

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 src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            scores:[100,87,88,80],
            dog:{name:'旺財',age:6,height:1.2},
            name:'er',
            phone:'123',
        }
    });
</script>
</body>
</html>
View Code　

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 src="js/vue.js"></script>
<script>
    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>
</body>
</html>
View Code

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 src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'今每天氣真好！',
            html:'<input type="date"><input type="color">'
        }
    });
</script>
</body>
</html>
View Code

 

運行結果：

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、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 src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            colleges:[
                'ios學院',
                'java學院',
                'html5學院',
                'ui學院',
                've學院'
            ],
            activeIndex:0,
            fontColor:'green',
        }
    });
</script>
</body>
</html>
View Code

 

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 src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'今天的天氣很好！',
            fontColor:'red'
        },
        methods:{  // 實例因此函數實現
            // 鉤子函數
            changeContent(){
                // alert(0);
                this.msg='測試改掉沒有！';
            },
            changeContentColor(){
                this.fontColor = 'green';
            }
        }
    });
</script>
</body>
</html>
View Code

 

綜合練習：增刪小例子

<!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 src="js/vue.js"></script>
<script>
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>
</body>
</html>
View Code

 

運行結果：

計算屬性（computed properties）

1、原由？

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

<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 src="js/vue.js"></script>
<script>
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>
</body>
</html>
View Code

運行結果：

 計算屬性被設計出來的目的在於：getter 是乾淨無反作用的。

 

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

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

        若是不但願有緩存，咱們能夠用method取代computed。

疑惑：爲何須要緩存？

假設咱們有一個重要的計算屬性 A ，這個計算屬性須要一個巨大的數組遍歷和作大量的計算。而後咱們可能有其餘的計算屬性依賴於 A 。若是沒有緩存，咱們將不可避免的屢次執行 A 的 getter ！

  

3、計算屬性的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 src="js/vue.js"></script>
<script>
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>
</body>
</html>
View Code

雙花括號{{運算、變量}}

01.index.hmlt

 

main.js

 

內存的數據能夠更改

 

v-model 雙休數據綁定

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <input type="text" v-model="name">
        <span v-show="name">你的名字是:{{name}}</span>
    </div>
    <div>
        <input type="text" v-model="age">
        <span v-show="age">你的年齡是:{{age}}</span>
    </div>
    <div>
        <input type="text" v-model="sex">
        <span v-show="sex">你的年齡是:{{sex}}</span>
    </div>
</div>
</body>
<script src="js/main.js"></script>
</html>
index.html 
var app = new Vue({
    el:"#app",
    data:{
        name:null,
        age:null,
        sex:null
    }
});
main.js

v-show：顯示或者隱藏

main.js

index.html

 

語法

v-for：循環

main.js

 

index.html

 

運行結果

main.js 數據結構通常是嵌套的

index.html

 

每一個對象的屬性能夠點出來

雙花括號裏的東西是能夠進行運算的。

如計算打折後的價格。其中蔥不打折

出現了NaN怎麼解決呢？？？

三元運算符

判斷是否有打折，有則顯示打折後的價格，沒有則顯示原價格。

 

數據能夠動態加

 

代碼：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="food in foodList">{{food.name}}: ￥{{food.discount ? food.price * food.discount : food.price}}</li>
    </ul>
</div>
</body>
<script src="js/02.main.js"></script>
</html>
v-for 
var app = new Vue({
    el:"#app",
    data:{
        // foodList:['姜','蒜','蔥'],
        foodList:[
            {
                name:'姜',
                price:5,
                discount:.8,
            },
            {
                name:'蒜',
                price:9,
                discount:.5,
            },
            {
                name:'蔥',
                price:2,
            }
        ],
    }
});
main.js

 

v-bind:綁定數據和元素屬性  簡寫爲':'冒號

默認跳轉到百度，也能夠動態修改跳轉到淘寶頁面。

 

綁定class名，方式1：

 

綁定class名，方式2：

 

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
    <script src="bli/vue.js"></script>
    <style>
        .active{
            background:#a10;
            color:#fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- <a href="http://baidu.com">點我</a> -->
    <!-- <a v-bind:class="klass"  v-bind:href="url">點我</a> -->
    <a v-bind:class="{active: isActive}"  v-bind:href="url">點我</a>
</div>
</body>
<script src="js/03.main.js"></script>
</html>
v-bind

v-on:綁定事件, 簡寫爲'@'

給一個元素綁定1個事件：

 

給一個元素綁定多個事件：

注意：綁定的方法必定要有，不然會報錯。

 

表單提交事件 

點擊提交事件後（post/get請求），會自動刷新頁面，控制檯打印的東西就看不見了（閃了一下）。

 

阻止默認行爲

方法1：e.preventDefault();   （必須傳參）

提交事件後，不會自動刷新頁面了。（e.preventDefault(); 阻止了默認行爲）

 

方法2：.prevent   (不用傳參)

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick">點我</button>
    <hr>
    <!-- 阻止默認行爲方法1：傳參 -->
    <!-- <form v-on:submit="onSubmit($event)">
        <input type="text">
        <button type="submit">提交</button>
    </form> -->
    <!-- 阻止默認行爲方法2：不傳參 -->
    <form v-on:submit.prevent="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form>
</div>
</body>
<script src="js/04.main.js"></script>
</html>
v-on阻止默認行爲

中止冒泡事件 .stop

 

鍵盤擡起事件 keyup

 

若是用戶輸入的是回車，應該怎麼判斷呢？？？

鍵盤按鈕是回車鍵時  .enter

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on="{mouseenter: onEnter, mouseleave: onOut}" v-on:click="onClick">點我</button>
    <hr>
    <!-- 阻止默認行爲方法1：傳參 -->
    <!-- <form v-on:submit="onSubmit($event)">
        <input type="text">
        <button type="submit">提交</button>
    </form> -->
    <!-- 阻止默認行爲方法2：不傳參 -->
    <!-- <form v-on:submit.prevent="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form> -->
 
    <!-- 中止冒泡 -->
    <!-- <form v-on:submit.stop="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form> -->
    
    <!-- 鍵盤擡起事件 -->
    <!-- <form v-on:keyup="onKeyup" v-on:submit.stop="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form> -->
 
    <!-- 當鍵盤按的是回車鍵 -->
    <form v-on:keyup.enter="onEnter" v-on:submit.prevent="onSubmit">
        <input type="text">
        <button type="submit">提交</button>
    </form>
 
</div>
</body>
<script src="js/04.main.js"></script>
</html>
View Code

 

v-model 雙向數據綁定

3個修飾符

.lazy 當失去焦點時，纔會觸發更新內容。

.trim 將先後空格都去掉。

普通的v-model，多個空格無效，最多隻有1個空格。

 

若是想讓它顯示全部的空格怎麼辦呢？？？

 

用戶輸入的內容，前面有空格應該去掉。

聚焦時：前面的空格不顯示。

 

失去焦點時：自動去掉前面的空格。

 

.number 輸入的內容是數字類型。

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- <input type="text" v-model="name">
    <br>
    <pre>{{name}}</pre> -->
 
    <!-- 失去焦點，更新內容。 .lazy-->
    <!-- <input type="text" v-model.lazy="name">
    <br>
    {{name}} -->
 
    <!-- .trim 將先後空格都去掉 -->
    <!-- <input type="text" v-model.trim="name">
    <br>
    <pre>{{name}}</pre> -->
 
    <!-- .number 輸入的內容是數字類型。  -->
    <input type="text" v-model.number="price">
    <br>
    <pre>{{price}}</pre>
 
</div>
</body>
<script src="js/05.main.js"></script>
</html>
v-model指令及修飾符

v-model在其餘元素及類型上的用法

單選框：

注意：name必須同樣，纔會單選。

 

單選框設置默認值：

注意：name屬性能夠不寫。用v-model來代替。

 

多選框：

 

 

多選框設置默認值：

 

多行輸入框：設置默認值

和input（text類型）是同樣的效果。

 

下拉框：

默認顯示第一個選項

下拉框：設置默認值爲空

 

下拉框：設置默認值爲指定value值（單選）

 

下拉框：設置默認值爲指定value值（多選multiple）

注意：按住Ctrl鍵能夠選中多個值。Shift能夠連選選中多個值。

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <!-- 單選框 -->
    <!-- <label>
        男
        <input name="sex" value="male" type="radio">
    </label>
    <label>
        女
        <input name="sex" value="female" type="radio">
    </label> -->
    
    <!-- 單選框設置默認值 -->
    <!-- <label>
        男
        <input v-model="sex" value="male" type="radio">
    </label>
    <label>
        女
        <input v-model="sex" value="female" type="radio">
    </label>
    <br>
    {{sex}} -->
    
    <!-- 多選框 -->
    <!-- <label>
        男
        <input v-model="sex" value="male" type="checkbox">
    </label>
    <label>
        女
        <input v-model="sex" value="female" type="checkbox">
    </label>
    <br>
    {{sex}} -->
    
    <!-- 多行輸入框 -->
    <!-- <textarea v-model="texcon"></textarea>
    <br>
    {{texcon}} -->
 
    <!-- 下拉框 單選 -->
    <div>你來自哪裏？</div>
    <select v-model="from">
        <option value="1">星球</option>
        <option value="2">火球</option>
    </select>
    <br>
    {{from}}
    <hr>
 
    <!-- 下拉框 多選-->
    <div>你要去哪裏？</div>
    <select v-model="dest" multiple>
        <option value="1">星球</option>
        <option value="2">火球</option>
    </select>
    <br>
    {{dest}}
</div>
</body>
<script src="js/06.main.js"></script>
</html>
v-model在其餘元素的用法

 

v-if 控制流指令

v-if / v-else

 

 

v-if / v-else-if / v-else

 

 

判斷條件也能夠的多個條件組成

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if控制流指令</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-if="role == 'admin' || role == 'vip'">
        管理員你好
    </div>
    <div v-else-if="role == 'hr'">
        hr你好
    </div>
    <div v-else>
        你沒有權限訪問次頁面
    </div>
</div>
</body>
<script src="js/07.main.js"></script>
</html>
流程控制指令

計算屬性

1.將分數渲染出來

 

2.將分數放input中，能夠改變值。

 

3.計算出總分

 

4.計算出平均分

 

5.將平均分四捨五入一下

 

以上的計算過程能夠存到計算屬性中，運行效果同樣。

 

當刪除一個值的時，會拼接字符串，而不是計算值，該怎麼辦呢？？？

 

方式1：將input寬加上數字類型便可計算。（推薦使用）

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>計算屬性</title>
    <script src="bli/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="1">
        <thead>
            <th>學科</th>
            <th>分數</th>
        </thead>
        <tbody>
            <tr>
                <td>數學</td>
                <td><input type="text" v-model.number="math"></td>
            </tr>
            <tr>
                <td>物理</td>
                <td><input type="text" v-model.number="physics"></td>
            </tr>
            <tr>
                <td>英語</td>
                <td><input type="text" v-model.number="english"></td>
            </tr>
            <tr>
                <td>總分</td>
                <!-- <td>{{math + physics + english}}</td> -->
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <!-- <td>{{Math.round((math + physics + english) / 3)}}</td> -->
                <td>{{average}}</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
<script src="js/08.main.js"></script>
</html>
計算器
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程