vue知識day1

時間 2019-11-19

標籤 vue 知識 day1 day 简体版

原文原文鏈接

HTML語義、CSS：樣式 js:行爲javascript

jQuery：簡化了js操做html

boostrap ：框架，以類方式展示vue

react:facebook 公司的產品java

angular:谷歌公司產品node

vue:做者尤雨溪react

一ESC6

著名博客地址：jquery

基本語法

<!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>Document</title>
</head>
<body>

    
    <script type="text/javascript">

    // let聲明變量塊級做用域,不能重複聲明
    // let聲明的變量 是塊級做用域,不能重複聲明
    // {
    //     // let a = 12;
    //     let a  = 12;
    //     let a  = 13;
    // }
   
    // console.log(a);

    // var a = [];
    // for (let i = 0; i < 10; i++) {
    //  a[i] = function () {
    //     console.log(i);
    // };
    // }
    // a[6](); // 6 10
    
    // 不存在變量提高
    console.log(foo); // 輸出undefined
    var foo = 2;

    // const 聲明常量，一旦聲明，當即初始化，不能重複聲明。
    </script>
    
</body>
</html>

let與const(定義變量)

<!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>Document</title>
</head>
<body>

    <script>
        var a = 1;
        var b = 2;

        // var str = "哈哈哈哈" + a + "嘿嘿嘿" + b;
        var str = `哈哈哈哈${a}嘿嘿嘿${b}`;
        console.log(str);
    </script>
    
</body>
</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>Document</title>
</head>
<body>

    <script>
    // function(){} === ()=>{}

    // 1.this的指向發生改變，指向了定義對象時的對象
    // 2.arguments不能使用
    </script>
    
</body>
</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>Document</title>
</head>
<body>
    <script>
    var person = {
        name:'張三',
        age: 18,
       
        fav(){
            console.log(this);
        }
    }
    person.fav();
    </script>
    
</body>
</html>

對象的單體模式

單體模式：爲了解決arguments問題es6

<!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>Document</title>
</head>
<body>

    <script>
     // 構造函數的方式建立對象
    //  function Animal(name,age){
    //      this.name = name;
    //      this.age = age;
        
    //  }
    //  Animal.prototype.showName = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName2 = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName3 = function(){
    //      console.log(this.name);
    //  }
    //  Animal.prototype.showName4 = function(){
    //      console.log(this.name);
    //  }
    //  var dog = new Animal('日天',18)



    class Animal{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }
        showName(){
            // 必定不要加逗號
            console.log(this.name)
        }
    }
    var d = new Animal('張三',19);
    d.showName();
    </script>
    
</body>
</html>

面向對象

二VUE網絡請求流程

請求流程1：node.js真實網站進行交互緩存到node.js上，用戶用瀏覽器訪問node.js服務器，node.js服務器返回。npm

請求流程2：瀏覽器直接與真實網站進行交互訪問瀏覽器

請求流程3：node.js服務器掛了用虛擬機

三node.js安裝

安裝node.js

下載https://nodejs.org/en/download/releases/
安裝6.10多版本

初始化項目

npm init：彈出提示信息

npm init --yes:不提示信息提示

安裝(在項目目錄下)

npm install jquery --save

報錯時須要：

npm rebuilt

下載不一樣版本的模塊

npm install jquery@2.0.1 --save

卸載模塊

npm uninstall jquery --save

使用cnpm（淘寶鏡像）

使用npm下載依賴時，因爲是從國外的網站上下載內容，因此可能常常會出現不穩定的狀況，因此須要下載cnpm代替npm，cnpm是國內淘寶的作的，在國內使用穩定。

1.下載cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.使用cpm

cnpm install jquery --save

三vue基礎使用

VUE下載：

建議谷歌安裝插件：vue devtools（有更好的顯示）

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。