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' 是不会触发视图 ...
随机推荐
- 解决flex布局下, elementui table组件不能跟随父组件的宽度而变化的bug
bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...
- C#静态和实例
静态 实例 关键字static修饰类或方法 不能使用static修饰类或方法 修饰后类直接调用 需要先实例化对象,用对象调用 静态只会执行调用一次,并且在程序退出之前会一直保持状态,占领内存 实例化一 ...
- hr中间插入字体
修饰CSS:hr:before { content: "??";} hr:after { content: " This is an <hr> element ...
- PHP之string之chr()函数使用
chr (PHP 4, PHP 5, PHP 7) chr - Return a specific character chr - 返回指定的字符 Description string chr ( i ...
- linux centos 7.5 安装mysql5.7
1 下载tar包,这里使用wget从官网下载(注:下载地址随时可能有变动,wget命令默认下载目录为当前所在文件夹) wget https://dev.mysql.com/get/Downloads/ ...
- python解决处理中文的问题
脚本开头添加默认编码 python源码中出现了中文字符或要处理中文字符,运行时会出现错误,解决方法是,开头加入字符编码声明: #! /usr/bin/env python # -*- coding:u ...
- 498_Diagonal-Traverse
目录 498_Diagonal-Traverse Description Solution Java solution Python solution 1 Python solution 2 Pyth ...
- java并发编程(5)并发程序测试
并发程序测试 一.正确性测试 如:对一个自定义缓存的测试 //自定义的缓存 public class SemaphoreBoundedBuffer <E> { private final ...
- 编译可移植的python
1. 在低版本系统机器上,编译python: cd Python-2.7.15/Modules vim Setup.dist 修改下述代码: ########### sed -i 's/#SSL=\/ ...
- ant使用小结
使用builder.xml的方式:完成的工作:打jar包并运行,其中引用了第三方jar和配置文件: <?xml version="1.0" encoding="UT ...