vue快速複習手冊

時間 2019-11-20

標籤 vue 快速複習手冊简体版

原文原文鏈接

1.基本使用css

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Vue的基本使用</title>
    <!-- 01.導包 -->
    <script src="./js/vue.js"></script>
    <script>
        // 03. 監聽
        window.onload = function () {
            // 04:建立vue
            var vm = new Vue({
                // 綁定操做對象
                el:'.box',
                data: {
                    content: 'Vue的基本使用'
                }
            });
        }
    </script>
</head>
<body>
    <!-- 02:div標籤(設置模板變量)-->
    <div class="box">{{content}}</div>

</body>
</html>

View Code

2.基本語法html

2.1.操做數據vue

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>操做數據</title>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            // uve對象
            var vm = new Vue({
                el:'.box',
                data:{
                    content:'操做數據'
                }
            });
        }
    </script>
</head>
<body>

    <div class="box">
        <p>{{content}}</p>
    </div> 
</body>
</html>

View Code

2.2.修改屬性跨域

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>02-操做數據</title>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            // uve對象
            var vm = new Vue({
                el:'.box',
                data:{
                    content:'操做數據',
                    linkdata:'百度連接',
                    url:'http://www.baidu.com'
                }
            });
        }
    </script>
</head>
<body>
    <div class="box">
        <!-- 第一種. v-bind: -->
        <!-- <a v-bind:href="url" target="_blank">{{linkdata}}</a> -->
        <!-- 第二種. : -->
        <a :href="url" target="_blank">{{linkdata}}</a>
        <p>{{content}}</p>
    </div> 
</body>
</html>

View Code

2.3.調用方法ide

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>操做數據</title>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            // uve對象
            var vm = new Vue({
                // 標籤對象
                el:'.box',
                // 數據和屬性
                data:{
                    content:'操做數據',
                    linkdata:'百度連接',
                    url:'http://www.baidu.com',
                    count:0
                },
                // 方法
                methods: {
                    fnAddClick:function () {
                        // 跨域
                       this.count += 1; 
                    }
                }

            });
        }
    </script>
</head>
<body>
    <div class="box">
        <!-- 第一種.v-on: -->
        <!-- <button v-on:click='fnAddClick'>計數器:{{count}}</button> -->
        <!-- 第二種.@ -->
        <button @click='fnAddClick'>計數器:{{count}}</button>
        <a v-bind:href="url" target="_blank">{{linkdata}}</a>
        <p>{{content}}</p>
    </div> 
</body>
</html>

View Code

小結：v-bind:簡寫: v-on: 簡寫@函數

3.條件渲染this

關鍵字：v-if，v-else-if，v-else，v-showurl

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>條件渲染</title>
    <script src="./js/vue.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el:'.box',
                data:{
                    flag:4
                }
            });
        }
    </script>
</head>
<body>
    <div class="box">
        <!-- 01:v-if -->
        <!-- <p v-if='flag==1'>01:v-if</p> -->
        <!-- 02:v-else-if -->
        <!-- <p v-else-if='flag==2'>02:v-else-if</p> -->
        <!-- 03:v-else-if -->
        <!-- <p v-else-if='flag==3'>03:v-else-if</p> -->
        <!-- 04:v-else -->
        <!-- <p v-else>04:v-else</p> -->
        <!-- 05:v-show -->
        <!-- <p v-show='flag==3'>05:v-show</p> -->
    </div>
</body>
</html>

View Code

小結：spa

1.v-show用法和v-if大體同樣，可是它不支持v-else,它和v-if的區別是，它製做元素樣式的顯示和隱藏，元素一直是存在的。3d

2.注意在vue中使用v-show, 原來的css代碼不能設置display屬性, 會致使衝突

4.列表渲染

關鍵字：普通列表，列表下標，有且只有一個對象，對象列表

<script>
    window.onload = function () {
    var vm = new Vue({
        el:'.box',
        data:{
            // 01: 普通列表
            itemList:[1, 2, 3, 4, 5],
            // 02: 列表下標
            indexList:['a','b','c','d'],
            // 03: 有且只有一個對象
            objData:{
                name:'小明',
                age:19
            },
            // 04: 對象列表
            objList:[
                {
                    name:'小明',
                    age:20
                },
                {
                    name:'小紅',
                    age:21
                }
            ]
        }
    });
}
</script>

View Code

普通列表

<li v-for='item in itemList'>{{item}}</li>

列表下標

<li v-for='(item,index) in indexList'>角標{{index}}==數值{{item}}</li>

有且只有一個對象

<li v-for='item in objData'>{{item}}</li>
<li v-for='(obj,key) in objData'>屬性值{{obj}}-----屬性名{{key}}</li>

對象列表

<li v-for='obj in objList'>屬性值1:{{obj.name}}==屬性值2:{{obj.age}}</li>

小結：該指令適用於任何html標籤

5.表單輸入綁定（雙向數據綁定）

關鍵字：單行文本框、多行文本框、單選框、多選框、下拉框

<!-- 01.單行文本框 -->
        <input type="text" v-model='content'>
        <p>{{content}}</p>

<!-- 02.多行文本框 -->
        <textarea v-model='content'></textarea>
        <p>{{content}}</p>

<!-- 03.單選框 -->
        <input type="radio" name="sex" value="男" v-model='content'>男
        <input type="radio" name="sex" value="女"  v-model='content'>女
        <p>{{content}}</p>

<!-- 04.多選框 -->
        <input type="checkbox" name="lk" value="吃飯" v-model='like'>吃飯
        <input type="checkbox" name="lk" value="睡覺" v-model='like'>睡覺
        <input type="checkbox" name="lk" value="打豆豆" v-model='like'>打豆豆
        <p>{{like}}</p>     

<!-- 05.下拉框 -->
        <select name="addr" v-model='address'>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="廣州">廣州</option>
            <option value="深圳">深圳</option>
        </select>
        <p>{{address}}</p>

View Code

小結：能夠用 v-model 指令在表單<input><textarea><select> 元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素

6.ES6語法

關鍵字：語法介紹、變量聲明、對象的簡寫、箭頭函數

6.1.變量聲明

let和const是新增的聲明變量的開頭的關鍵字，在這以前，變量聲明是用var關鍵字，這兩個關鍵字和var的區別是，它們聲明的變量沒有預解析，let和const的區別是，let聲明的是通常變量，const申明的常量，不可修改。

var

console.log(iNum1);
// 在ES5中 聲明變量使用var
var iNum1 = 10;
// 結果爲:undefined, 由於使用 var 聲明的變量, 有預解析

let

console.log(iNum1);
// 在ES6中 聲明變量可使用let
let iNum1 = 10;
// 查看後會發現報錯:iNum1 is not defined, 由於使用let 聲明的變量, 沒有了預解析

const

const iNum1 = 10;
iNum1 = 20;
// 查看後會發現報錯:Assignment to constant variable, 由於使用const聲明的變量, 不容許從新賦值

6.2.ES6的對象的簡寫

ES5的寫法

// ES5的對象寫法
var oObj = {
    name:'小明',
    age:20,
    fnGetName: function () {
        alert(this.name);
    }
}
// 調用
oObj.fnGetName();

View Code

或者

// 建立一個空對象
var oObj = {};
// 添加屬性
oObj.name = '小明';
oObj.age = 20;
// 添加方法
oObj.fnGetName = function () {
    alert(this.name);
}
// 調用
oObj.fnGetName();

View Code

ES6的寫法（須要注意的是, 實現簡寫,有一個前提,必須變量名屬性名一致）

// 定義兩個變量
var name = '小明';
var age = 20;
// 建立對象
var oObj = {
    name,
    age,
    fnGetName: function () {
        alert(this.name);
    }
};
// 調用
oObj.fnGetName();

View Code

6.3.ES6的箭頭函數

1.定義函數新的方式：

// 無參數無返回值
var fnTest = ()=> {
    alert('無參數無返回值');
}
// 一個參數無返回值
var fnTest = a => {
    alert(a + b);
}
// 有參數有返回值
var fnTest = (a,b)=> {
    return a + b;
}

View Code

2.改變this的指向

若是層級比較深的時候, this的指向就變成了window, 這時候就能夠經過箭頭函數解決這個指向的問題

// 定義一個對象
var oObj = {
    name:'小明',
    fnAlert: function () {
        setTimeout(()=>{
            alert(this.name);
        }, 1000);
    }
}
// 調用方法
oObj.fnAlert();

View Code

7.Vue對象實例生命週期