vue知识day1

HTML语义、CSS：样式 js:行为

jQuery：简化了js操作

boostrap ：框架，以类方式展现

react:facebook 公司的产品

angular:谷歌公司产品

vue:作者尤雨溪

一ESC6

著名博客地址：

基本语法

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

<!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服务器返回。

请求流程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（有更好的显示）

posted @ 2018-05-21 15:01 强仔必胜阅读(179) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

强仔