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' 是不会触发视图 ...
随机推荐
- SpringMVC的 @RestController和@Controller 区别
@RestController注解,相当于@Controller+@ResponseBody两个注解的结合, 返回json数据不需要在方法前面加@ResponseBody注解了,但使用@RestCon ...
- Python pip离线部署
因为生产环境不能联网,必须使用离线部署pip包,倒也不用部署Pypi镜像那么大工作量,其实蛮简单的,贴出了备忘 pip download -r requirements.txt -d packages ...
- Calibre 3.4版中，为epub书籍嵌入中文字体
1. 先把原版书籍epub文件添加到Calibre书库: 2. 书名上右键,选则 转换书籍 -> 逐个转换: 3. 在 界面外观 -> 字体 中,选择嵌入字体,在列表中选择中文字体,并勾选 ...
- matplotlib画图无法显示图例 报错No handles with labels found to put in legend.
很久没有matplotlib了,今天画图的时候发现了一个很小的问题....明明加了legend(),图表会出来,却无法正常显示图例.最后发现只要在plt.plot()加label图例就可以正常显示了.
- Mac下使用PF进行端口转发和防火墙配置（类似Linux的iptables）
在Mac没有iptables这些,替代的软件为PF,命令为pfctl.在早些版本用ipfw(<=10.10),后面改为PF.还有一些可以使用OpenBsd,不过这个不太好用. 网上关于pfctl ...
- JavaScript数据结构-17.图结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 使用Microsoft Azure云平台中的Service Bus 中继 Intanet环境下的WCF服务。
之前写的一篇文章:) 看起来好亲切. http://www.cnblogs.com/developersupport/archive/2013/05/23/WCF-ON-IIS-Azure-Servi ...
- Upgrading WebLogic Application Environments --官方文档
http://docs.oracle.com/cd/E13179_01/common/docs92/upgrade/dirstruct.html WebLogic Domain Directory S ...
- CentOS7手动修改系统时间
CentOS7 永久修改系统时间 安装在虚拟机上的CentOS7的时间分为系统时间和硬件时间.二者都修改,重启系统(init 6 )才会永久生效.修改步骤如下 查看当前系统时间 date 修改当 ...
- Codeforces F. Cowmpany Cowmpensation
Description 有一棵树,现在要给每个节点赋一个在1到D之间的权值,问有多少种方案满足任意一个节点的权值都不大于其父亲的权值. n<=3000,D<=1e9 题面 Solution ...