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 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' 是不会触发视图 ...
随机推荐
- 完美原创：centos7.1 从源码升级安装Python3.5.2
(原创)完美原创:centos7.1 从源码升级安装Python3.5.2 下载Python3.5.2源码:https://www.python.org/downloads/release/pytho ...
- net与树莓派的情缘-安装Redis（四）
在Linux下安装Redis非常简单,具体步骤如下(官网有说明): .下载源码,解压缩后编译源码. $ wget http://download.redis.io/releases/redis-3.0 ...
- 第1章—Spring之旅—简化Spring的java开发
简化Spring的java开发 1.1简介 区别于EJB的特性 简化javaBean,为了降低java开发的复杂性,Spring采取了以下4种关键策略: 基于POJO的轻量级和最小入侵性编程 通过依赖 ...
- jenkins构建GitHub项目
一.Jenkins 配置 Git 首先,登录 Jenkins ,在首页找到 “系统管理 -> Global Tool Configuration -> Git ” Path to Git ...
- Hadoop Gateway 部署
1.集群的 hadoop-current hive-current spark-current copy 到 gateway 机器 2.集群的 hadoop-conf hive-conf ...
- orcale 之sql/plus set 命令
set 命令用于设置系统变量的值.通过set 命令设置的系统变量有很多,下面把最常用的罗列出来: 1. arraysize 用于从数据库中一次提取的行数,其默认为 15. SQL> show a ...
- python中的生成器(二)
一. 剖析一下生成器对象 先看一个简单的例子,我们创建一个生成器函数,然后生成一个生成器对象 def gen(): print('start ..') for i in range(3): yield ...
- [中英对照]The Art Of Reporting Bugs | 报bug的艺术
前言:因为最近要给兄弟Team分享一下如何有效地报告bug, 故多做一做功课.下面给出一篇博客的中英文对照翻译. The Art Of Reporting Bugs | 报bug的艺术 My init ...
- subset II
Subsets II Given a collection of integers that might contain duplicates, nums, return all possible s ...
- tomcat 控制台乱码问题
环境:win7 + tomcat 8.5 问题描述:web端一切正常,不管是返回页面的数据还是控制台打印的日志,都没乱码,给app提供的api接口返回乱码,然后就去百度,像什么 在tomcat的ser ...