vue - 准备知识
一、知识
http://www.cnblogs.com/majj/
https://www.cnblogs.com/majj/category/1216624.html
阮一峰 es6
http://es6.ruanyifeng.com/
http://www.bootcdn.cn/
http://www.cnblogs.com/majj/ 前端 VUE 博客每个人都要去写！ html(语义化，除了语义，其他得都没什么) 结构 + css 样式表现 排版，布局 + js 行为 （ECMAScript）(JSDOM) (BOM) jquery(操作) bootstrap django 课程 --》 数据要展示 前端框架： react Facebook公司开发 后台硬 难 angular 谷歌公司 更新快 vue 语言简单， 三个框架类似 vue (中国人，尤雨溪) http://www.cnblogs.com/majj/p/9045243.html ---------------------------------------------- 前置得准备学习： ES6简单语法： es5 var 强类型 es6 let const 1.let和const 2.模板字符串 3.箭头函数 4.对象得单体模式 5.es6的面向对象 6.模块化 Visual Studio Code 阮一峰 es6 http://es6.ruanyifeng.com/ jquery 源码 http://www.bootcdn.cn/ http://www.bootcdn.cn/jquery/ 。。。。。 https://cdn.bootcss.com/jquery/3.3.1/jquery.js jquery 源码 ---------------- Node.js http://www.cnblogs.com/majj/p/9042541.html 原生的ajax .. xmlhttprequest js 能做什么 io不行， 操作 不能操作文件 os;前端与后台最大的区别！ js 的引擎；js 会不会 django 前后端分离的项目； 服务器 不会运行 js ECMA6 7 8 上升 任何一门语言 运行在平台上， Nodejs 服务器的语言！！ ------- NPM... 类似 python 的 pip node-v6.10.3-x64.msi 下载！！ node -v v6.10.3 自带npm npm -v 3.10.10 $ sudo npm install npm@latest -g ---- Git Bash Here -------------- 安装包； 下载； 类似jquery; ---- npm init ------ Sublime Text 下载 ----- ... npm 下载 jquery npm init ------- nodejs 自带npm npm 一旦初始化 生成 package.json 下包 一定要初始化 npm init npm install jquery@1.2.1 --save npm install jquery --save npm uninstall jquery --save D:\路飞学城\VUE\02>npm install jquery --save 02@1.0.2 D:\路飞学城\VUE\02 `-- jquery@3.3.1 npm WARN 02@1.0.2 No repository field. D:\路飞学城\VUE\02> npm install bootstrap --save ----- "dependencies": { "bootstrap": "^4.1.1", "jquery": "^3.3.1", "swiper":"^4.2.6" } 没包 直接 npm install 根据依赖 下载 资源 --------------------- 服务器 不允许 传太大的文件 github 不允许 上传100M以上的代码 上传项目时，会忽略node_modules 。。。。 先npm install 如何跑git 上的代码 npm install 通过 git 操作 到 github 上面！ npm run dev localhost:8080 http://localhost:8088/#/ VUE 主要用来做 移动端 PC端也没有问题！！ ------ 负载均衡 服务器挂在任何的地方 就怕一个挂了 大的虚拟服务器 github .. 当出现在挂的时候，就处理了！ ------------------ webpack 介绍 http://es6.ruanyifeng.com/#docs/module export import 命令 一个js 就是一个模块 <script></script> 同步 <script> import add from './js/main.js' </script> 浏览器 不识别 import add from 博客。。 webpack 打包成static/ css.js/ 写的在src 里面； webpack 不仅仅打包，编译 es6代码； "babel-loader": "^6.0.0", 工具 能把 不同浏览器 编译成 识别es6 http://babeljs.io/ // labeljs 功能 let person={ name:"zz", fav:()=>{} } "use strict"; var person = { name: "zz", fav: function fav() {} }; class Animal{} var Animal = function Animal() { _classCallCheck(this, Animal); }; 工具 编译成 浏览器 都能识别的！！ 模块化； ------- amd 异步模块定义的 nodejs 用的是commonjs -------- npm webpacge 在线网上视频 简单用， ---- vue介绍； css 布局。。。 DOM 超快虚拟DOM ； 比js 加载速度快多了； VUE官网； 基础知识得打好！ 基础讲2天，作业，学会看官网 https://cn.vuejs.org/ 博客。。 MVVM 谷歌商店 Vue Devtools -------------- VUE 得一个小项目； ƒ Vue (options) { if ("development" !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword'); } this._init(options);… 构造函数 过博客；；；vue 得使用。。
二、let和const
let 声明的变量是 块级作用域 局部的 不能重复声明 不存在变量提升
const 声明常量 一旦声明 立即初始化 不能重复声明
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> // 1. let 声明的变量是 块级作用域 局部的 不能重复声明 { // let a=12; let a=13 var b=12 var b=13 } console.log(a) console.log(b) var a=[] for(var i=0; i<10; i++){ a[i] = function(){ console.log(i) } } a[6]() // 10 注意var 是全局的 let 局部的 var a=[] for(let i=0; i<10; i++){ a[i] = function(){ console.log(i) } } a[6]() // 6 console.log(foo) // undefined var foo = 2 console.log(bar) // let 不存在变量提升 let bar = 2 const x = 2 // const声明常量，一旦声明，立即初始化，不能重复声明 </script> </body> </html>
三、模板字符串
var str = `hahaha${a}heiheihei${b}`
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var a = 1 var b = 2 // var str = "哈哈哈" + a + "嘿嘿嘿" + b // 哈哈哈1嘿嘿嘿2 var str = `hahaha${a}heiheihei${b}` // hahaha1heiheihei2 console.log(str) </script> </body> </html>
四、箭头函数
function(){} === () => {}
坑：
1. this 指的是定义时的对象 Window ，不在是使用时的对象。
2. 第二个坑 arguments 不能用了。
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var f = function(a){ return a } console.log(f(3)) // 3 var f = (a) => { return a } console.log(8) // 8 // function(){} === () => {} // 字面量方式创建对象 var person1 = { name:"alice", age:20, fav:function(){ console.log("喜欢 run") console.log(arguments) // Arguments(3) [1, 2, 3] console.log(this) // 使用时定义的对象 {name: "alice", age: 30, fav: ƒ} console.log(this.name) } } console.log(person1.name) // alice person1.fav() // 喜欢 run person1.fav(1,2,3) // 1.一个坑 this 定义时的对象 var person2 = { name:"egon", age:32, fav:()=>{ //如果使用了箭头函数，this指的是定义时所使用的对象，指向了window console.log("-->",this) // Window } } person2.fav() //2.第二个坑 arguments 不能用了 var person3 = { name:"alex", age:23, fav:()=>{ console.log(arguments) //arguments is not defined } } person3.fav(1,2,3) </script> </body> </html>
五、对象的单体模式
function(){} === ()=>{} === (){}
fav(){
console.log(this)
}
为了解决箭头函数this指向的问题 推出来一种写法 对象的单体模式
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> var person1 = { name:"张三", age:18, fav:function(){ console.log(this) } } person1.fav() // {name: "张三", age: 18, fav: ƒ} var person2 = { name:"李四", age:19, fav:()=>{ console.log(this) } } person2.fav() // Window // 对象的单体模式 var person3 = { name:"王五", age:23, fav(){ console.log(this) } } person3.fav() // {name: "王五", age: 23, fav: ƒ} </script> </body> </html>
六、面向对象
es5 构造函数的方式创建对象
function Animal(name,age){
this.name = name
this.age = age
}
Animal.prototype.showName = function(){
console.log(this.name)
}
var dog = new Animal("wangwang",18)
es6 构造方法的方式创建对象
class Animal2{
constructor(name,age){
this.name = name
this.age = age
}
showName(){
console.log(this.name)
}
}
var d = new Animal2("张三",19)
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> // es5 构造函数的方式创建对象 function Animal(name,age){ this.name = name this.age = age } Animal.prototype.showName = function(){ console.log(this.name) } Animal.prototype.showAge = function(){ console.log(this.age) } var dog = new Animal("wangwang",18) console.log(dog) // Animal {name: "wangwang", age: 18} dog.showName() dog.showAge() // es6 方式创建对象 class Animal2{ constructor(name,age){ this.name = name this.age = age } showName(){ console.log(this.name) } } var d = new Animal2("张三",19) console.log(d) // Animal2 {name: "张三", age: 19} d.showName() // 张三 </script> </body> </html>
