Python-S9——Day100-Web前端框架之Vue

時間 2019-11-12

標籤 python s9 day100 day web 前端框架 vue 欄目 Python 简体版

原文原文鏈接

01 課程簡介；
02 let和const；
03 箭頭函數；
04 對象的單體模式；
05 nodejs介紹和npm操做；
06 webpack、babel介紹和vue的第一個案例；
07 昨日內容回顧；
08 if指令和v-on指令；
09 指令系統介紹1；
10 指令系統介紹2；
11 計算屬性的使用和v-mode的實現原理；

01 課程簡介；

1.1 視頻呢少看，不能依賴視頻，作筆記，加速看，輔助性質；

1.2 博客堅持寫；

1.3 html——語義化，除了語義，基本什麼都沒有了，網頁的結構；

1.4 css——樣式表現，基本沒有邏輯可言，須要記住的東西比較多，排版和佈局；

1.5 Python全棧，目標先後端玩的溜溜的！

1.6 js 網頁的行爲，ESMAScript，JSdom，bom；

1.7 jQuery操做，適應快速開發的節奏；

1.8 Bootstrap；

1.9 Django課程（數據要展現）；

1.10 前端的三大框架；

React.js Facebook公司；
Angular.js 谷歌公司；
Vue.js 中國人尤雨溪發明的；語法簡單，易用！尤雨溪我的採訪：http://www.sohu.com/a/148644796_655394

02 let和const；

2.1 前置的準備學習；

　　2.1.1 ES6的簡單語法；javascript

　　2.1.2 強類型與弱類型的變量聲明;css

2.2 let和const

2.2.1 let和const.html

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

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <script type="text/javascript">
            //let聲明的變量是塊級做用域時候，不能重複聲明；
            //let聲明的變量，是塊級做用域，不能重複聲明；
            {
                //                let a = 12; 
                //                let a = 13; 
                //                var a = 12;
                //                var a = 13;
            }
            //console.log(a);
            //            var a = [];
            //            for(let i = 0; i < 10; i++) {
            //                a[i] = function() {
            //                    console.log(i);
            //                };
            //            }
            //            a[6](); //var~10,let~6;r
            //let不存在變量提高；Js語言叫作「僞面向對象」；
            //            console.log(foo); //輸出undefined;
            //            var foo = 2;
            //const用來聲明常量（即只讀的變量，好比π）， 一旦聲明， 當即初始化， 且不能重複聲明;
            const PI = 3.1415926537
            PI
            PI = 3 //報錯！Uncaught TypeError: Assignment to constant variable
        </script>
    </body>

</html>

2.2.2 模板字符串；

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

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <script type="text/javascript">
            //js中拼接字符串和變量;
            var a = 1;
            var b = 2;
            var str1 = "哈哈哈" + a + "嘿嘿嘿" + b;
            //推薦使用反引號；
            var str2 = `哈哈哈${a}嘿嘿嘿${b}13811221893` ;
            console.log(str1,str2);
        </script>
    </body>

</html>

3 箭頭函數

3.1 使用箭頭函數的一些注意事項；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03-箭頭函數</title>
</head>
<body>
<script type="text/javascript">
    // var f = function (a) {
    //     return a
    //
    // };
    // f(1)

    //箭頭函數;
    // var f = (a) => {
    //     return a;
    // }

    //function(){} <==> () => {}//箭頭函數，聯想Python的三元運算；

    //字面量方式建立對象;
    var person1 = {
        name: '日天',
        age: 30,
        fav: function () {
            //console.log('喜歡av1');//分號是結束的標記;
            //使用時候定義的對象;
            console.log(this);
            console.log(arguments);
            console.log(this.name);
        }
    };
    person1.fav();
    //以上改爲箭頭函數;
    //使用箭頭函數的第1個坑！
    var person2 = {
        name: '日天',
        age: 30,
        fav: () => {
            //console.log('喜歡av2');//分號是結束的標記;
            //改爲箭頭函數後，此時，this就變成了定義時候所使用的對象;指向了咱們的window;
            console.log(this);
            console.log(this.name);
        }
    };
    person2.fav();
    
    //使用箭頭函數的第2個坑！arguments不能使用！
    var person3 = {
        name: '日天',
        age: 30,
        fav: () => {
            //console.log('喜歡av2');//分號是結束的標記;
            //改爲箭頭函數後，此時，this就變成了定義時候所使用的對象;指向了咱們的window;
            console.log(this);
            //console.log(arguments);#Uncaught ReferenceError: arguments is not defined
            console.log(this.name);
        }
    };
    person3.fav(1, 2, 3, 4, 5);
</script>

</body>
</html>

04 對象的單體模式；

4.1 使用let、const或者箭頭函數的時候，要依據使用場景；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04-對象的單體模式</title>
</head>
<body>
<script type="text/javascript">
    var person = {
        name: '崔曉昭',
        age: 26,
        //Vue的課程中，有不少這樣的寫法;
        fav() {
            console.log(this);
        }
    };
    person.fav();
</script>
</body>
</html>

es6的面向對象；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06-ES6的面向對象</title>
</head>
<body>
<script type="text/javascript">
    //構造函數的方式建立類,此方法稱之爲面向對象;
    // function Animal(name, age) {
    //     this.name = name;
    //     this.age = age;
    // }
    //
    // Animal.prototype.showName = function () {
    //     console.log(this.name)
    // };
    // Animal.prototype.showName = function () {
    //     console.log(this.name)
    // };
    // Animal.prototype.showName = function () {
    //     console.log(this.name)
    // };
    // Animal.prototype.showName = function () {
    //     console.log(this.name)
    // };
    // var dog = new Animal('天晴天朗', 26);
    class Animal {
        constructor(name, age) {
            this.name = name;
            this.age = age;

        }//此處沒有逗號，只有在類中才有此種寫法!

        showName() {
            console.log(this.name)
        }
    }

    var d = new Animal('崔曉絲', 28);
    d.showName();
</script>
</body>
</html>

05 nodejs介紹和npm操做；

5.1 node.js的下載和安裝；

https://nodejs.org/download/release/v6.10.3/html

node -v
npm -v
npm install npm@latest -g

5.2 npm的使用；

cuixiaozhaodeMacBook-Pro:~ cuixiaozhao$ cd /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ pwd
/Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ ls
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir images
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir js
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir css
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir fonts
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ pwd
/Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ cl
-bash: cl: command not found
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ clear

cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ pwd
/Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (02-lessons) 02
version: (1.0.0) 1.0.2
description: Learn npm
entry point: (index.js) 
test command: 
git repository: tqtl911@163.com
keywords: 19930911cXS
author: cuixiaozhao
license: (ISC) None
Sorry, license should be a valid SPDX license expression (without "LicenseRef"), "UNLICENSED", or "SEE LICENSE IN <filename>".
license: (ISC) 
About to write to /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons/package.json:

{
  "name": "02",
  "version": "1.0.2",
  "description": "Learn npm",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "tqtl911@163.com"
  },
  "keywords": [
    "19930911cXS"
  ],
  "author": "cuixiaozhao",
  "license": "ISC"
}


Is this OK? (yes) yes
cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$

5.3 必定要有初始化的文件：package.json;

5.4 在前端中，一個js文件就是一個模塊；

5.5 webpack是一個打包機，還具有編譯功能；

5.6 解析代碼支持多種瀏覽器的工具-babel，在線調試預覽URL：https://babeljs.io/repl

5.7 模塊化的方法；

Commonjs；
AMD；
CMD；
ES6Module；

5.8 具有自學能力！

5.9 Vue的介紹；

　　5.9.1 易用；

　　5.9.2 靈活；

　　5.9.3 高效；

5.10 Vue的使用；

https://cn.vuejs.org/v2/guide/installation.html前端

06 webpack、babel介紹和vue的第一個案例；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3>{{title}}</h3>

</div>
<script src="vue.js"></script>
<script>
    //一、建立Vue實例對象;
    //二、參數;
    var app = new Vue({
        el: "#app",
        data: {
            title: "崔曉昭"
        }
    })
</script>
</body>
</html>

07 昨日內容回顧；

7.1 let和const；

7.2 模板字符串``插變量，${變量名}；

7.3 箭頭函數function(){} 等價於 ()=>{}；

7.4 this的指向問題；

7.5 arguments不能使用；

7.6 對象的單體模式；

var person = {vue

　　name:"張三",java

　　fav(){node

　　}react

}jquery

7.7 ES6的面向對象；

7.8 模塊化(esMoudel) export與import共存；

7.9 在前端中，一個js文件就是一個模塊；

7.10 前端工具；

webpack：打包機，它能將咱們的html、css、js、png、font進行打包，放置於服務器；loader加載器；
- 插件：一個功能，js文件；
- 組件：bootstrap組件，包含js、html、css，包含插件，好比使用bootstrap前必須引入jQuery插件；
壓縮：html、css、js以及js混淆，圖片壓縮——grunt、gulp
node.js +webpack能夠實現本地效果，支持熱重載；
node.js服務端語言；
npm init --yes；
npm install jquery --save；
npm install webpack --save-dev；
npm install 出錯，使用npm rebuild 進行從新編譯；
npm 在國內的鏡像——淘寶鏡像地址：

Last login: Fri Sep 14 15:29:56 on ttys001
cuixiaozhaodeMacBook-Pro:~ cuixiaozhao$  npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
+ cnpm@6.0.0
added 632 packages from 842 contributors in 36.206s
cuixiaozhaodeMacBook-Pro:~ cuixiaozhao$

08 if指令和v-on指令；

8.1 單頁面（不是選項卡)；

8.2 一級路由和二級路由；

http://juejin.im/timeline
http://juejin.im/timeline/android

8.3 v-if指令和v-on指令；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StudyVue</title>
</head>
<body>
<div id="app">
    <!--插值語法：react {} angular{{}} {%%} <% = %>-->
    <h3>{{msg}}</h3>
    <h3>{{1>2?"真的":"假的"}}</h3>
    <div v-if='show'>哈哈哈</div>
    <button v-on:click="clickHandler">切換</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    //Vue的實例化對象;
    //Vue的設計模式——MVVM：Model、View、ViewModel;
    //指令系統：v-*;
    var app = new Vue({
        el: "#app",
        data: {
            msg: "今天學習Vue",
            show: false,

        },
        methods: {
            clickHandler: function () {
                // alert(11)
                console.log(this);
                this.show = !this.show
            }
        }
    });
    console.log(app);
    console.log(app.$el);
    console.log(app.msg);//此方法，不推薦，失去了使用Vue的意義！
</script>
</body>
</html>

09 指令系統介紹1；

9.1 v-bind、v-on等指令介紹；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StudyVue</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background: red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background: green;
        }

    </style>
</head>
<body>
<div id="app">
    <!--插值語法：react {} angular{{}} {%%} <% = %>-->
    <h3>{{msg}}</h3>
    <h3>{{1>2?"真的":"假的"}}</h3>
    <div v-if='show'>哈哈哈</div>
    <button v-on:click="clickHandler">切換</button>
    <div v-if="Math.random() > 0.5 ">
        Now you see me!
    </div>
    <div v-else>
        Now you don't
    </div>
    <h3 v-show="isShow" v-bind:title="title">我是一個三級標題</h3>
    <img v-bind:src="imgSrc" v-bind:alt="time">
    <div class="box " v-bind:class="{box2:isGreen,box3:isYellow}"></div>
    <button @click="changeColor">切換顏色</button>
    <br>
    <button v-on:click="count+=1">加上{{count}}</button>
    <!--//聲明式的指令：-->
    <!--//命令式的指令；-->
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    //Vue的實例化對象;
    //Vue的設計模式——MVVM：Model、View、ViewModel;
    //指令系統：v-*;

    //Vue的核心思想:數據驅動視圖！雙向的數據綁定：數據《===》視圖；
    var app = new Vue({
        el: "#app",
        data: {
            msg: "今天學習Vue",
            show: false,
            isShow: true,
            title: "哈哈哈哈",
            imgSrc: "./canglaoshi.JPG",
            time: `頁面加載於${new Date().toLocaleDateString()}`,
            isGreen: true,
            isYellow: true,
            count: 0

        },
        methods: {
            clickHandler: function () {
                // alert(11)
                console.log(this);
                this.show = !this.show
            },
            changeColor() {
                this.isGreen = !this.isGreen
            }
        }
    });
    console.log(app);
    console.log(app.$el);
    console.log(app.msg);//此方法，不推薦，失去了使用Vue的意義！
    //簡便寫法即語法糖：v-bind~:    v-on:click ~ @click
</script>
</body>
</html>

10 指令系統介紹2；

10.1 v-for 以及輪播圖；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StudyVue</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            background: red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background: green;
        }

        /*.lunbo{*/
        /*width: 180px;*/
        /*overflow: hidden;*/
        ul {
            width: 180px;
            overflow: hidden;
            list-style: none;
            margin-left: 10px;
        }

        ul li {
            float: left;
            width: 30px;
            height: 30px;
            background: purple;
            margin-left: 10px;
            text-height: 30px;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
<div id="app">
    <!--插值語法：react {} angular{{}} {%%} <% = %>-->
    <h3>{{msg}}</h3>
    <h3>{{1>2?"真的":"假的"}}</h3>
    <div v-if='show'>哈哈哈</div>
    <button v-on:click="clickHandler">切換</button>
    <div v-if="Math.random() > 0.5 ">
        Now you see me!
    </div>
    <div v-else>
        Now you don't
    </div>
    <h3 v-show="isShow" v-bind:title="title">我是一個三級標題</h3>
    <img v-bind:src="imgSrc" v-bind:alt="time">
    <div class="box" v-bind:class="{box2:isGreen,box3:isYellow}"></div>
    <button @click="changeColor">切換顏色</button>
    <br>
    <button v-on:click="count+=1">加上{{count}}</button>
    <!--//聲明式的指令：-->
    <!--//命令式的指令；-->
    <div class="lunbo">
        <img :src="currentSrc" @mouseenter="closeTimer" @mouseleave="openTimer">
        <ul>
            <li v-for="(item,i) in imgArr" @click="currentHandler(item)">{{i+1}}</li>
        </ul>
        <button @click="nextImg">下一張</button>
        <button @click="beforeImg">上一張</button>
    </div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
    //Vue的實例化對象;
    //Vue的設計模式——MVVM：Model、View、ViewModel;
    //指令系統：v-*;

    //Vue的核心思想:數據驅動視圖！雙向的數據綁定：數據《===》視圖；
    var app = new Vue({
            el: "#app",
            //小的，假的數據庫;
            data: {
                msg: "今天學習Vue",
                show: false,
                isShow: true,
                title: "哈哈哈哈",
                imgSrc: "./canglaoshi.JPG",
                time: `頁面加載於${new Date().toLocaleDateString()}`,
                isGreen: true,
                isYellow: true,
                count: 0,
                imgArr: [
                    {id: 1, src: './1.jpeg'},
                    {id: 2, src: './2.jpeg'},
                    {id: 3, src: './3.jpeg'},
                    {id: 4, src: './4.jpeg'}
                ],
                currentSrc: "./1.jpeg",
                currentIndex: 0,
                timer: null,

            },
            //cookie 和session;
            // created() {
            //     this.timer = setInterval(this.nextImg, 2000)
            // },
            methods: {
                clickHandler: function () {
                    // alert(11)
                    console.log(this);
                    this.show = !this.show
                },
                changeColor() {
                    this.isGreen = !this.isGreen
                },
                currentHandler(item) {
                    this.currentSrc = item.src
                },
                nextImg() {
                    if (this.currentIndex == this.imgArr.length - 1) {
                        this.currentIndex = -1;
                    }
                    this.currentIndex++;
                    this.currentSrc = this.imgArr[this.currentIndex].src;
                },
                closeTimer() {
                    clearInterval(this.timer)
                },
                openTimer() {
                    this.timer = setInterval(this.nextImg, 1000)
                },
                beforeImg() {
                    if (this.currentIndex == this.imgArr.length - 1) {
                        this.currentIndex = -1;
                    }
                    this.currentIndex--;
                    this.currentSrc = this.imgArr[this.currentIndex].src;
                },
            }
        })
    ;
    console.log(app);
    console.log(app.$el);
    console.log(app.msg);//此方法，不推薦，失去了使用Vue的意義！
    //簡便寫法：v-bind~:    v-on:click ~ @click
</script>
</body>
</html>

11 計算屬性的使用和v-mode的實現原理；

11.1 計算屬性和偵聽器；

11.2 v-model的原理實現；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-計算屬性</title>
</head>
<body>
<div id="computed">
    <div>
        <!--設置模板語法的初衷是應對簡單運算！-->
        <!--{{msg.split('').reverse().join('')}}-->
        <!--使用computed中的reverseStr代替;-->
        {{reverseStr}}
    </div>
    <button @click="clickHandler">修改</button>
</div>
<script type="text/javascript" src="vue.js"></script>
<script>
    var com = new Vue({
        el: "#computed",
        data: {
            msg: 'Hello World!'
        },
        methods: {
            clickHandler() {
                //this.msg = 'Hello LuffyCity!'
                console.log(this.reverseStr);
                this.reverseStr = 'Hello LuffyCity'
            }
        },
        computed: {
            //默認只有getter方法;
            //計算屬性能夠看作是一個watch;
            // reverseStr() {
            //     return this.msg.split('').reverse().join('');
            // }
            reverseStr: {
                set: function (newValue) {
                    this.msg = newValue
                },
                get: function () {
                    return this.msg.split().reverse().join('');
                },
            }
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-計算屬性</title>
</head>
<body>
<!--事件修飾符！-->
<form id="computed" @summit.prevent>
    <!--數據的雙向綁定！-->
    <!--<input type="text" v-model="msg">-->
    <input type="text" v-model.lazy="msg">
    <input type="number" v-model.number="msg">
    <input type="submit" name="" value="提交">
    <!--<input type="text" v-bind:value='msg' @input='msgChange'>-->
    <h3>{{msg}}</h3>
</form>
<script type="text/javascript" src="vue.js"></script>
<script>
    var com = new Vue({
        el: "#computed",
        data: {
            msg: '123'
        },
        methods: {
            msgChange(e) {
                console.log(e.target.value);
                this.getValue = e.target.value;
            }
            //$.ajax() 在Vue中不使用，xmlhttpRequest axios ajax技術

        },
        computed: {
            getValue: {
                set: function (newValue) {
                    this.msg = newValue;
                },
                get: function () {
                    return this.msg;
                }
            }
        }
    })
</script>
</body>
</html>