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的更多相关文章

  1. vue知识总结

    vue: 渐进式JavaScript 框架 Vue项目构建 npm install -g vue vue init webpack-simple my-project cd my-project np ...

  2. 9-Python基础知识-day1

    Python基础知识-day1 Python 2 和Python 3 的区别: Python2 源码不标准,混乱,重复代码多:#-*-encoding:utf8 -*- 解决python2显示中文的问 ...

  3. 2018 我要告诉你的 Vue 知识大全

    Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的学习曲线平稳很多:不管选择什么框架,除了 ...

  4. 总结vue知识体系之实用技巧

    vue 作为目前前端三大框架之一,对于前端开发者可以说是必备技能.那么怎么系统地学习和掌握 vue 呢?为此,我做了简单的知识体系体系总结,不足之处请各位大佬多多包涵和指正,如果喜欢的可以点个小赞!本 ...

  5. vue知识总汇

    学前预备知识 ECMAScript简介和ES6的新增语法 Nodejs基础 webpack的介绍 babel简介 vue基础 vue基础

  6. Vue知识分享一

    最近想着把之前学的Vue的知识整理一下,方便在公司和同事一起分享.我想要按照下面几个方面去说一下,我对vue的学习理解. 一.什么是VUE vue.js是一个用来开发Web界面的前端库,是很轻量级的工 ...

  7. 前端Vue知识小白

    感觉是已好久没写博文了.今日难得有时间,便写一篇文章.此文章是关于前端知识的,我本身是后端,因工作或其他需要,便学习了前端Vue.此文章是在菜鸟教程上学习的.那么下面进入正文! 首先,Vue.js是一 ...

  8. 前端知识扫盲-VUE知识篇一(VUE核心知识)

    最近对整个前端的知识做了一次复盘,总结了一些知识点,分享给大家有助于加深印象. 想要更加理解透彻的同学,还需要大家自己去查阅资料或者翻看源码.后面会陆续的更新一些相关注知识点的文章. 文章只提出问题, ...

  9. Vue 知识复习(上)

    Vue Vue实例 创建实例: var vm = new Vue({ //code }) 数据与方法: 只有当实例被创建时 data 中存在的属性才是响应式的; Vm.b = 'h1' 是不会触发视图 ...

随机推荐

  1. 完美原创:centos7.1 从源码升级安装Python3.5.2

    (原创)完美原创:centos7.1 从源码升级安装Python3.5.2 下载Python3.5.2源码:https://www.python.org/downloads/release/pytho ...

  2. net与树莓派的情缘-安装Redis(四)

    在Linux下安装Redis非常简单,具体步骤如下(官网有说明): .下载源码,解压缩后编译源码. $ wget http://download.redis.io/releases/redis-3.0 ...

  3. 第1章—Spring之旅—简化Spring的java开发

    简化Spring的java开发 1.1简介 区别于EJB的特性 简化javaBean,为了降低java开发的复杂性,Spring采取了以下4种关键策略: 基于POJO的轻量级和最小入侵性编程 通过依赖 ...

  4. jenkins构建GitHub项目

    一.Jenkins 配置 Git 首先,登录 Jenkins ,在首页找到 “系统管理 -> Global Tool Configuration -> Git ” Path to Git ...

  5. Hadoop Gateway 部署

    1.集群的 hadoop-current hive-current spark-current copy 到 gateway 机器 2.集群的 hadoop-conf       hive-conf ...

  6. orcale 之sql/plus set 命令

    set 命令用于设置系统变量的值.通过set 命令设置的系统变量有很多,下面把最常用的罗列出来: 1. arraysize 用于从数据库中一次提取的行数,其默认为 15. SQL> show a ...

  7. python中的生成器(二)

    一. 剖析一下生成器对象 先看一个简单的例子,我们创建一个生成器函数,然后生成一个生成器对象 def gen(): print('start ..') for i in range(3): yield ...

  8. [中英对照]The Art Of Reporting Bugs | 报bug的艺术

    前言:因为最近要给兄弟Team分享一下如何有效地报告bug, 故多做一做功课.下面给出一篇博客的中英文对照翻译. The Art Of Reporting Bugs | 报bug的艺术 My init ...

  9. subset II

    Subsets II Given a collection of integers that might contain duplicates, nums, return all possible s ...

  10. tomcat 控制台乱码问题

    环境:win7 + tomcat 8.5 问题描述:web端一切正常,不管是返回页面的数据还是控制台打印的日志,都没乱码,给app提供的api接口返回乱码,然后就去百度,像什么 在tomcat的ser ...