vue的作者

尤雨溪是Vue.js框架的作者，他認爲，未來App的趨勢是輕量化和細化，能解決問題的應用就是好應用。而在移動互聯網時代大的背景下，個人開發者的機遇在門檻低，成本低，跨設備和多平臺四個方面。

Vue.js的概述

Vue.js讀音 /vjuː/, 類似於 view

Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API

Vue.js是一個構建數據驅動的Web界面的庫

Vue.js是一套構建用戶界面的漸進式框架

通俗的說:
Vue.js是一個構建數據驅動的 web 界面的漸進式框架

Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件

Vue.js使用文檔及下載Vue.js

Vue.js使用文檔已經寫的很完備和詳細了，通過以下地址可以查看： https://cn.vuejs.org/v2/guide/ vue.js
如果當成一個庫來使用，可以通過下面地址下載： https://cn.vuejs.org/v2/guide/installation.html

Vue的基本使用

Vue的基本使用步驟

第一步:導包
官方提供了兩個包
開發包vue.js
生產包vue.min.js

<script src="./js/vue.js"></script>

第二步:HTML

<div class="box">{{content}}</div>

第三步:使用VUE

window.onload = function () {
    var vm = new Vue({
        el:'.box',
        data: {
            content: 'Vue的基本使用'
        }
    });
}

示例

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

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>

修改屬性

示例

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

調用方法

示例

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

小結

v-bind:簡寫:
v-on: 簡寫@

條件渲染

學習目標：

v-if
v-else-if
v-else
v-show

條件渲染

通過條件指令可以控制元素的創建(顯示)或者銷燬(隱藏)

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

小結

v-show用法和v-if大致一樣，但是它不支持v-else,它和v-if的區別是，它製作元素樣式的顯示和隱藏，元素一直是存在的，只是display:block和display:none的區別，而v-if的條件爲false的話是不渲染該邏輯判斷分支的html標籤的。
注意在vue中使用v-show, 原來的css代碼不能設置display屬性, 會導致衝突。

列表渲染

學習目標

普通列表
列表下標
有且只有一個對象
對象列表

js部分

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

普通列表

<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標籤

表單輸入綁定(雙向綁定數據)

學習目標

單行文本框
多行文本框
單選框
多選框
下拉框

<!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>雙向綁定</title>
    <script src="js/vue.min.js"></script>
    <script>
        window.onload = function () {
            var vm = new Vue({
                el:'.box',
                data:{
                    message:"老的內容",
                    city:"北京",
                    gender:"女",
                    like:[]
                }
            })
        }
    </script>
</head>
<body>

    <div class="box">
        <!-- 4.多選框 -->
        <input v-model="like" type="checkbox" name="like" id="" value="游泳">游泳
        <input v-model="like" type="checkbox" name="like" id="" value="健身">健身
        <input v-model="like" type="checkbox" name="like" id="" value="跑步">跑步
        <p>您的愛好是: {{like}}</p>

        <!-- 3.單選框 -->
        <input v-model="gender" type="radio" name="sex" id="" value="男">男
        <input v-model="gender" type="radio" name="sex" id="" value="女">女
        <p>您的性別是: {{gender}}</p>

        <!-- 2.select -->
        <select name="" id="" v-model="city">
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="廣州">廣州</option>
            <option value="深圳">深圳</option>
        </select>
        <p>您選中的城市: {{city}}</p>
        <p></p>
        <!-- 1.輸入框 -->
        <input v-model="message" type="text">
        <p>{{message}}</p>

    </div>
    
</body>
</html>

Todolist案例

學習目標

Vue完成Todolist案例

 <script src="js/vue.js"></script>
    <script>
        window.onload = function () {

                // #1. 修改標籤對應vue的指令

                //  2. 關聯vue對象代碼
                var vm = new Vue({
                    el:'.list_con',
                    data:{
                        inputContent:"",
                        //  3. 展示數據
                        dataList:['學習html','學習javascript','學習css']

                    },
                    methods:{

                    //  4. 監聽增加的按鈕 
                    fnAdd:function(){

                        // 4.1 判斷是否爲空 輸入
                        if(this.inputContent == ''){
                            alert('輸入內容不能空!')
                            return
                        }
                        // 4.2 插入新數據
                        this.dataList.push(this.inputContent)

                        // 4.3 清空輸入框
                        this.inputContent = ""

                    },
                    //  5.刪除功能--splice(下標,個數,插入的內容)
                    fnDelete:function(index){
                        this.dataList.splice(index,1)
                    },

                    // 6. 上下排序
                    fnUp:function(index){
                        // 1. 獲取點擊的數據
                        oldData = this.dataList[index]

                        // 2. 刪除數據
                        this.dataList.splice(index,1)

                        // 3. 在上一個位置 插入
                        this.dataList.splice(index-1,0,oldData)

                    },
                    fnDown:function(index){
                        // 1. 獲取點擊的數據
                        oldData = this.dataList[index]

                        // 2. 刪除數據
                        this.dataList.splice(index,1)

                        // 3. 在下一個位置 插入
                        this.dataList.splice(index+1,0,oldData)

                    }


                    }

                })


        }
    </script>

</head>
<body>

    <div class="list_con">
    <h2>To do list</h2>
        <input v-model="inputContent" type="text" name="" id="txt1" class="inputtxt">
        <input @click="fnAdd" type="button" name="" value="增加" id="btn1" class="inputbtn">

        <ul id="list" class="list">

            <li v-for="(item,index) in dataList">
                <span>{{item}}</span>
                <a @click="fnUp(index)" href="javascript:;" class="up"> ↑ </a>
                <a @click="fnDown(index)" href="javascript:;" class="down"> ↓ </a>
                <a @click="fnDelete(index)" href="javascript:;" class="del">刪除</a>
            </li>


            <!-- <li><span>學習html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>
            <li><span>學習css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li>
            <li><span>學習javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">刪除</a></li> -->

        </ul>

    </div>
</body>

ES6語法

學習目標

ES6的語法介紹
ES6的變量聲明
ES6的對象的簡寫
ES6的箭頭函數

ES6語法介紹

ES6是JavaScript語言的新版本，它也可以叫做ES2015，之前學習的JavaScript屬於ES5，ES6在它的基礎上增加了一些語法，ES6是未來JavaScript的趨勢，而且vue組件開發中會使用很多的ES6的語法，所以掌握這些常用的ES6語法是必須的

變量聲明

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聲明的變量, 不允許重新賦值

ES6的對象的簡寫

ES5的寫法

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

還可以寫

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

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

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

ES6的箭頭函數

作用:

定義函數新的方式
改變this的指向

定義函數新的方式

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

改變this的指向
如果層級比較深的時候, this的指向就變成了window, 這時候就可以通過箭頭函數解決這個指向的問題

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

實例生命週期(瞭解)

學習目標

各個生命週期函數的作用

各個生命週期函數的作用

beforeCreate

vm對象實例化之前

created

vm對象實例化之後

beforeMount

vm將作用標籤之前

mounted(重要時機初始化數據使用)

vm將作用標籤之後

beforeUpdate

數據或者屬性更新之前

updated

數據或者屬性更新之後

手把手帶你在實踐中快速入門Vue【詳細解說】

在實踐中快速入門Vue

vue的作者

Vue.js的概述

Vue.js使用文檔及下載Vue.js

Vue的基本使用

Vue的基本使用步驟

Vue的基本語法

操作數據

修改屬性

調用方法

條件渲染

條件渲染

列表渲染

普通列表

列表下標

有且只有一個對象

對象列表

表單輸入綁定(雙向綁定數據)

Todolist案例

ES6語法

ES6語法介紹

變量聲明

ES6的對象的簡寫

ES6的箭頭函數

實例生命週期(瞭解)

各個生命週期函數的作用