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

vue知识day1的更多相关文章

vue知识总结
vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...
9-Python基础知识-day1
Python基础知识-day1 Python 2 和Python 3 的区别: Python2 源码不标准,混乱,重复代码多:#-*-encoding:utf8 -*- 解决python2显示中文的问 ...
2018 我要告诉你的 Vue 知识大全
Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很多:不管选择什么框架,除了 ...
总结vue知识体系之实用技巧
vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能.那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!本 ...
vue知识总汇
学前预备知识 ECMAScript简介和ES6的新增语法 Nodejs基础 webpack的介绍 babel简介 vue基础 vue基础
Vue知识分享一
最近想着把之前学的Vue的知识整理一下,方便在公司和同事一起分享.我想要按照下面几个方面去说一下,我对vue的学习理解. 一.什么是VUE vue.js是一个用来开发Web界面的前端库,是很轻量级的工 ...
前端Vue知识小白
感觉是已好久没写博文了.今日难得有时间,便写一篇文章.此文章是关于前端知识的,我本身是后端,因工作或其他需要,便学习了前端Vue.此文章是在菜鸟教程上学习的.那么下面进入正文! 首先,Vue.js是一 ...
前端知识扫盲-VUE知识篇一（VUE核心知识）
最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题, ...
Vue 知识复习(上)
Vue Vue实例创建实例: var vm = new Vue({ //code }) 数据与方法: 只有当实例被创建时 data 中存在的属性才是响应式的; Vm.b = 'h1' 是不会触发视图 ...

随机推荐

LCS and LIS
LCS #include<bits/stdc++.h> using namespace std; typedef long long ll; int n,m; char s[1005],t ...
[转] Actor生命周期理解
[转] https://blog.csdn.net/wsscy2004/article/details/38875065 镇图:Actor内功心法图 Actor的生命周期可以用Hooks体现和控制,下 ...
dubbo服务暴露过程
所谓服务暴露最终做的事情:绑定网络端口,开启serversokect服务以接收外部请求服务暴露时序图本地暴露远程暴露整体总结 dubbo服务提供者暴露服务的主过程:首先 ServiceConf ...
七，OpenERP 移库操作模块
整个代码中比较关键的地方是如何统计出不同库位的产品数量.
WCF系列教程之WCF实例化
本文参考自http://www.cnblogs.com/wangweimutou/p/4517951.html,纯属读书笔记,加深记忆一.理解WCF实例化机制 1.WCF实例化,是指对用户定义的服务 ...
Python爬虫学习：Python内置的爬虫模块urllib库
urllib库 urllib库是Python中一个最基本的网络请求的库.它可以模拟浏览器的行为发送请求(都是这样),从而获取返回的数据 urllib.request 在Python3的urllib库当 ...
一头扎进sql之多表操作
一.多表查询时NULL值处理要求返回比"allen"工资低的所有员工 select a.ename,a.conn from emp a where a.conn < ...
[中英对照]INTEL与AT&T汇编语法对比
本文首先对文章Intel and AT&T Syntax做一个中英文对照翻译,然后给出一个简单的例子,再用gdb反汇编后,对INTEL与AT&T的汇编语法进行对照从而加深理解. Int ...
Node.js事件驱动模型
一.传统线程网络模型在了解Node.js事件驱动模型之前,我们先了解一下传统的线程网络模型,请求进入web服务器(IIS.Apache)之后,会在线程池中分配一个线程来线性同步完成请求处理,直到请求 ...
Metronic 对话 chat
http://keenthemes.com/preview/metronic/theme/admin_1/index.html: jquery让滚动条默认在最底部:$('#content').scro ...

vue知识day1