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' 是不会触发视图 ...

随机推荐

DGIS之遥感影像数据获取
1.概要在GIS圈的同行或多或少接触过遥感,记得在大学老师就说过"数据是GIS的核心".本文介绍在国内下载遥感影像的方法. 地理空间数据云,这个是中科院计算机网络中心建设的一个免 ...
linux安装使用xdebug
我还是来给大家一个正确的配方,每个人的php版本不一样所以下载的xdebug应该是不一样的 1,https://xdebug.org/wizard.php 进入这个网页把自己phpinfo的信 ...
android逆向基础：apk 反编译重打包重签名
apk 反编译大家都比较熟悉,这里只做一个笔记. 1 反编译 apk apktool d perfect.apk 这样就把资源文件解压缩了, classes.dex 也反编译成了 smali 文件 2 ...
python-锁机制
锁 Lock() Lock(指令锁)是可用的最低级的同步指令.Lock处于锁定状态时,不被特定的线程拥有.Lock包含两种状态——锁定和非锁定,以及两个基本的方法. 可以认为Lock有一个锁定池,当线 ...
WPF中Label使用StringFormat
1. 在WPF中Label的Content有时内容只需要改变个别数字,而不需要所以内容都修改,这时候就要使用StringFormat, 如: <Label Content="I hav ...
Java SE 基础知识
常量: 常量是一种标识符,它的值在运行期间恒定不变,并且常量在程序中只能被引用,而不能被重新赋值. 常量的命名规则: 1.在 Java 中,在变量声明中加入 final 关键字代表常量,加入 stat ...
leetcode4:Permutation
#include <utility> #include <iostream> #include <vector> #include <algorithm> ...
打乱数组——shuffle
在学习vue移动端音乐项目时,看到一个打乱数组函数,感觉很有意思就记录一下(意外发现:slice是个有趣的知识点) 原理:遍历数组,(let i = 0; i < _arr.length; i+ ...
IOS项目之弹出动画终结篇
在之前写过IOS项目之弹出动画一.IOS项目之弹出动画二.IOS项目之弹出动画三,今天来一个终极封装已经上传到Github上弹出动画总结篇UIPopoverTableView. UIPopoverTa ...
使用Redis SETNX 命令实现分布式锁（转载）
使用Redis的 SETNX 命令可以实现分布式锁,下文介绍其实现方法. SETNX命令简介命令格式 SETNX key value 将 key 的值设为 value,当且仅当 key 不存在. 若 ...

vue知识day1