Python-S9——Day100-Web前端框架之Vue 01 课程简介; 02 let和const; 3 箭头函数 04 对象的单体模式; 05 nodejs介绍和npm操作; 06 webpack、babel介绍和vue的第一个案例; 07 昨日内容回顾; 08 if指令和v-on指令; 09 指令系统介绍1; 9.1 v-bind、v-on等指令介绍; 10 指令系统介绍2; 11 计算属性的使用和v-mode的实现原理;
-
01 课程简介;
-
02 let和const;
-
03 箭头函数;
-
04 对象的单体模式;
-
05 nodejs介绍和npm操作;
-
06 webpack、babel介绍和vue的第一个案例;
-
07 昨日内容回顾;
-
08 if指令和v-on指令;
-
09 指令系统介绍1;
-
10 指令系统介绍2;
-
11 计算属性的使用和v-mode的实现原理;
1.1 视频呢少看,不能依赖视频,做笔记,加速看,辅助性质;
1.2 博客坚持写;
1.3 html——语义化,除了语义,基本什么都没有了,网页的结构;
1.4 css——样式表现,基本没有逻辑可言,需要记住的东西比较多,排版和布局;
1.5 Python全栈,目标前后端玩的溜溜的!
1.6 js 网页的行为,ESMAScript,JSdom,bom;
1.7 jQuery操作,适应快速开发的节奏;
1.8 Bootstrap;
1.9 Django课程(数据要展示);
1.10 前端的三大框架;
- React.js Facebook公司;
- Angular.js 谷歌公司;
- Vue.js 中国人尤雨溪发明的;语法简单,易用!尤雨溪个人采访:http://www.sohu.com/a/148644796_655394
02 let和const;
2.1 前置的准备学习;
2.1.1 ES6的简单语法;
2.1.2 强类型与弱类型的变量声明;
2.2 let和const
2.2.1 let和const.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> //let声明的变量是块级作用域时候,不能重复声明; //let声明的变量,是块级作用域,不能重复声明; { // let a = 12; // let a = 13; // var a = 12; // var a = 13; } //console.log(a); // var a = []; // for(let i = 0; i < 10; i++) { // a[i] = function() { // console.log(i); // }; // } // a[6](); //var~10,let~6;r //let不存在变量提升;Js语言叫做“伪面向对象”; // console.log(foo); //输出undefined; // var foo = 2; //const用来声明常量(即只读的变量,比如π), 一旦声明, 立即初始化, 且不能重复声明; const PI = 3.1415926537 PI PI = 3 //报错!Uncaught TypeError: Assignment to constant variable </script> </body> </html>
2.2.2 模板字符串;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="text/javascript"> //js中拼接字符串和变量; var a = 1; var b = 2; var str1 = "哈哈哈" + a + "嘿嘿嘿" + b; //推荐使用反引号; var str2 = `哈哈哈${a}嘿嘿嘿${b}13811221893` ; console.log(str1,str2); </script> </body> </html>
3 箭头函数
3.1 使用箭头函数的一些注意事项;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>03-箭头函数</title> </head> <body> <script type="text/javascript"> // var f = function (a) { // return a // // }; // f(1) //箭头函数; // var f = (a) => { // return a; // } //function(){} <==> () => {}//箭头函数,联想Python的三元运算; //字面量方式创建对象; var person1 = { name: '日天', age: 30, fav: function () { //console.log('喜欢av1');//分号是结束的标记; //使用时候定义的对象; console.log(this); console.log(arguments); console.log(this.name); } }; person1.fav(); //以上改成箭头函数; //使用箭头函数的第1个坑! var person2 = { name: '日天', age: 30, fav: () => { //console.log('喜欢av2');//分号是结束的标记; //改成箭头函数后,此时,this就变成了定义时候所使用的对象;指向了我们的window; console.log(this); console.log(this.name); } }; person2.fav(); //使用箭头函数的第2个坑!arguments不能使用! var person3 = { name: '日天', age: 30, fav: () => { //console.log('喜欢av2');//分号是结束的标记; //改成箭头函数后,此时,this就变成了定义时候所使用的对象;指向了我们的window; console.log(this); //console.log(arguments);#Uncaught ReferenceError: arguments is not defined console.log(this.name); } }; person3.fav(1, 2, 3, 4, 5); </script> </body> </html>
04 对象的单体模式;
4.1 使用let、const或者箭头函数的时候,要依据使用场景;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04-对象的单体模式</title> </head> <body> <script type="text/javascript"> var person = { name: '崔晓昭', age: 26, //Vue的课程中,有很多这样的写法; fav() { console.log(this); } }; person.fav(); </script> </body> </html>
es6的面向对象;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>06-ES6的面向对象</title> </head> <body> <script type="text/javascript"> //构造函数的方式创建类,此方法称之为面向对象; // function Animal(name, age) { // this.name = name; // this.age = age; // } // // Animal.prototype.showName = function () { // console.log(this.name) // }; // Animal.prototype.showName = function () { // console.log(this.name) // }; // Animal.prototype.showName = function () { // console.log(this.name) // }; // Animal.prototype.showName = function () { // console.log(this.name) // }; // var dog = new Animal('天晴天朗', 26); class Animal { constructor(name, age) { this.name = name; this.age = age; }//此处没有逗号,只有在类中才有此种写法! showName() { console.log(this.name) } } var d = new Animal('崔晓丝', 28); d.showName(); </script> </body> </html>
05 nodejs介绍和npm操作;
5.1 node.js的下载和安装;
https://nodejs.org/download/release/v6.10.3/
- node -v
- npm -v
- npm install npm@latest -g
5.2 npm的使用;
cuixiaozhaodeMacBook-Pro:~ cuixiaozhao$ cd /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ pwd /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ ls cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir images cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir js cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir css cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir fonts cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ pwd /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ cl -bash: cl: command not found cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ clear cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ pwd /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (02-lessons) 02 version: (1.0.0) 1.0.2 description: Learn npm entry point: (index.js) test command: git repository: tqtl911@163.com keywords: 19930911cXS author: cuixiaozhao license: (ISC) None Sorry, license should be a valid SPDX license expression (without "LicenseRef"), "UNLICENSED", or "SEE LICENSE IN <filename>". license: (ISC) About to write to /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons/package.json: { "name": "02", "version": "1.0.2", "description": "Learn npm", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "repository": { "type": "git", "url": "tqtl911@163.com" }, "keywords": [ "19930911cXS" ], "author": "cuixiaozhao", "license": "ISC" } Is this OK? (yes) yes cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$
5.3 一定要有初始化的文件:package.json;
5.4 在前端中,一个js文件就是一个模块;
5.5 webpack是一个打包机,还具备编译功能;
5.6 解析代码支持多种浏览器的工具-babel,在线调试预览URL:https://babeljs.io/repl
5.7 模块化的方法;
- Commonjs;
- AMD;
- CMD;
- ES6Module;
5.8 具备自学能力!
5.9 Vue的介绍;
5.9.1 易用;
5.9.2 灵活;
5.9.3 高效;
5.10 Vue的使用;
https://cn.vuejs.org/v2/guide/installation.html
06 webpack、babel介绍和vue的第一个案例;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> </head> <body> <div id="app"> <h3>{{title}}</h3> </div> <script src="vue.js"></script> <script> //1、创建Vue实例对象; //2、参数; var app = new Vue({ el: "#app", data: { title: "崔晓昭" } }) </script> </body> </html>
07 昨日内容回顾;
7.1 let和const;
7.2 模板字符串``插变量,${变量名};
7.3 箭头函数function(){} 等价于 ()=>{};
7.4 this的指向问题;
7.5 arguments不能使用;
7.6 对象的单体模式;
var person = {
name:"张三",
fav(){
}
}
7.7 ES6的面向对象;
7.8 模块化(esMoudel) export与import共存;
7.9 在前端中,一个js文件就是一个模块;
7.10 前端工具;
- webpack:打包机,它能将我们的html、css、js、png、font进行打包,放置于服务器;loader加载器;
- 插件:一个功能,js文件;
- 组件:bootstrap组件,包含js、html、css,包含插件,比如使用bootstrap前必须引入jQuery插件;
- 压缩:html、css、js以及js混淆,图片压缩——grunt、gulp
- node.js +webpack可以实现本地效果,支持热重载;
- node.js服务端语言;
- npm init --yes;
- npm install jquery --save;
- npm install webpack --save-dev;
- npm install 出错,使用npm rebuild 进行重新编译;
- npm 在国内的镜像——淘宝镜像地址:
Last login: Fri Sep 14 15:29:56 on ttys001 cuixiaozhaodeMacBook-Pro:~ cuixiaozhao$ npm install -g cnpm --registry=https://registry.npm.taobao.org npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0 /usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm + cnpm@6.0.0 added 632 packages from 842 contributors in 36.206s cuixiaozhaodeMacBook-Pro:~ cuixiaozhao$
08 if指令和v-on指令;
8.1 单页面(不是选项卡);
8.2 一级路由和二级路由;
- http://juejin.im/timeline
- http://juejin.im/timeline/android
8.3 v-if指令和v-on指令;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StudyVue</title> </head> <body> <div id="app"> <!--插值语法:react {} angular{{}} {%%} <% = %>--> <h3>{{msg}}</h3> <h3>{{1>2?"真的":"假的"}}</h3> <div v-if='show'>哈哈哈</div> <button v-on:click="clickHandler">切换</button> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> //Vue的实例化对象; //Vue的设计模式——MVVM:Model、View、ViewModel; //指令系统:v-*; var app = new Vue({ el: "#app", data: { msg: "今天学习Vue", show: false, }, methods: { clickHandler: function () { // alert(11) console.log(this); this.show = !this.show } } }); console.log(app); console.log(app.$el); console.log(app.msg);//此方法,不推荐,失去了使用Vue的意义! </script> </body> </html>
09 指令系统介绍1;
9.1 v-bind、v-on等指令介绍;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StudyVue</title> <style type="text/css"> .box { width: 100px; height: 100px; background: red; } .box2 { width: 100px; height: 100px; background: green; } </style> </head> <body> <div id="app"> <!--插值语法:react {} angular{{}} {%%} <% = %>--> <h3>{{msg}}</h3> <h3>{{1>2?"真的":"假的"}}</h3> <div v-if='show'>哈哈哈</div> <button v-on:click="clickHandler">切换</button> <div v-if="Math.random() > 0.5 "> Now you see me! </div> <div v-else> Now you don't </div> <h3 v-show="isShow" v-bind:title="title">我是一个三级标题</h3> <img v-bind:src="imgSrc" v-bind:alt="time"> <div class="box " v-bind:class="{box2:isGreen,box3:isYellow}"></div> <button @click="changeColor">切换颜色</button> <br> <button v-on:click="count+=1">加上{{count}}</button> <!--//声明式的指令:--> <!--//命令式的指令;--> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> //Vue的实例化对象; //Vue的设计模式——MVVM:Model、View、ViewModel; //指令系统:v-*; //Vue的核心思想:数据驱动视图!双向的数据绑定:数据《===》视图; var app = new Vue({ el: "#app", data: { msg: "今天学习Vue", show: false, isShow: true, title: "哈哈哈哈", imgSrc: "./canglaoshi.JPG", time: `页面加载于${new Date().toLocaleDateString()}`, isGreen: true, isYellow: true, count: 0 }, methods: { clickHandler: function () { // alert(11) console.log(this); this.show = !this.show }, changeColor() { this.isGreen = !this.isGreen } } }); console.log(app); console.log(app.$el); console.log(app.msg);//此方法,不推荐,失去了使用Vue的意义! //简便写法即语法糖:v-bind~: v-on:click ~ @click </script> </body> </html>
10 指令系统介绍2;
10.1 v-for 以及轮播图;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>StudyVue</title> <style type="text/css"> * { padding: 0; margin: 0; } .box { width: 100px; height: 100px; background: red; } .box2 { width: 100px; height: 100px; background: green; } /*.lunbo{*/ /* 180px;*/ /*overflow: hidden;*/ ul { width: 180px; overflow: hidden; list-style: none; margin-left: 10px; } ul li { float: left; width: 30px; height: 30px; background: purple; margin-left: 10px; text-height: 30px; text-align: center; color: white; } </style> </head> <body> <div id="app"> <!--插值语法:react {} angular{{}} {%%} <% = %>--> <h3>{{msg}}</h3> <h3>{{1>2?"真的":"假的"}}</h3> <div v-if='show'>哈哈哈</div> <button v-on:click="clickHandler">切换</button> <div v-if="Math.random() > 0.5 "> Now you see me! </div> <div v-else> Now you don't </div> <h3 v-show="isShow" v-bind:title="title">我是一个三级标题</h3> <img v-bind:src="imgSrc" v-bind:alt="time"> <div class="box" v-bind:class="{box2:isGreen,box3:isYellow}"></div> <button @click="changeColor">切换颜色</button> <br> <button v-on:click="count+=1">加上{{count}}</button> <!--//声明式的指令:--> <!--//命令式的指令;--> <div class="lunbo"> <img :src="currentSrc" @mouseenter="closeTimer" @mouseleave="openTimer"> <ul> <li v-for="(item,i) in imgArr" @click="currentHandler(item)">{{i+1}}</li> </ul> <button @click="nextImg">下一张</button> <button @click="beforeImg">上一张</button> </div> </div> <script type="text/javascript" src="vue.js"></script> <script type="text/javascript"> //Vue的实例化对象; //Vue的设计模式——MVVM:Model、View、ViewModel; //指令系统:v-*; //Vue的核心思想:数据驱动视图!双向的数据绑定:数据《===》视图; var app = new Vue({ el: "#app", //小的,假的数据库; data: { msg: "今天学习Vue", show: false, isShow: true, title: "哈哈哈哈", imgSrc: "./canglaoshi.JPG", time: `页面加载于${new Date().toLocaleDateString()}`, isGreen: true, isYellow: true, count: 0, imgArr: [ {id: 1, src: './1.jpeg'}, {id: 2, src: './2.jpeg'}, {id: 3, src: './3.jpeg'}, {id: 4, src: './4.jpeg'} ], currentSrc: "./1.jpeg", currentIndex: 0, timer: null, }, //cookie 和session; // created() { // this.timer = setInterval(this.nextImg, 2000) // }, methods: { clickHandler: function () { // alert(11) console.log(this); this.show = !this.show }, changeColor() { this.isGreen = !this.isGreen }, currentHandler(item) { this.currentSrc = item.src }, nextImg() { if (this.currentIndex == this.imgArr.length - 1) { this.currentIndex = -1; } this.currentIndex++; this.currentSrc = this.imgArr[this.currentIndex].src; }, closeTimer() { clearInterval(this.timer) }, openTimer() { this.timer = setInterval(this.nextImg, 1000) }, beforeImg() { if (this.currentIndex == this.imgArr.length - 1) { this.currentIndex = -1; } this.currentIndex--; this.currentSrc = this.imgArr[this.currentIndex].src; }, } }) ; console.log(app); console.log(app.$el); console.log(app.msg);//此方法,不推荐,失去了使用Vue的意义! //简便写法:v-bind~: v-on:click ~ @click </script> </body> </html>
11 计算属性的使用和v-mode的实现原理;
11.1 计算属性和侦听器;
11.2 v-model的原理实现;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-计算属性</title> </head> <body> <div id="computed"> <div> <!--设置模板语法的初衷是应对简单运算!--> <!--{{msg.split('').reverse().join('')}}--> <!--使用computed中的reverseStr代替;--> {{reverseStr}} </div> <button @click="clickHandler">修改</button> </div> <script type="text/javascript" src="vue.js"></script> <script> var com = new Vue({ el: "#computed", data: { msg: 'Hello World!' }, methods: { clickHandler() { //this.msg = 'Hello LuffyCity!' console.log(this.reverseStr); this.reverseStr = 'Hello LuffyCity' } }, computed: { //默认只有getter方法; //计算属性可以看做是一个watch; // reverseStr() { // return this.msg.split('').reverse().join(''); // } reverseStr: { set: function (newValue) { this.msg = newValue }, get: function () { return this.msg.split().reverse().join(''); }, } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-计算属性</title> </head> <body> <!--事件修饰符!--> <form id="computed" @summit.prevent> <!--数据的双向绑定!--> <!--<input type="text" v-model="msg">--> <input type="text" v-model.lazy="msg"> <input type="number" v-model.number="msg"> <input type="submit" name="" value="提交"> <!--<input type="text" v-bind:value='msg' @input='msgChange'>--> <h3>{{msg}}</h3> </form> <script type="text/javascript" src="vue.js"></script> <script> var com = new Vue({ el: "#computed", data: { msg: '123' }, methods: { msgChange(e) { console.log(e.target.value); this.getValue = e.target.value; } //$.ajax() 在Vue中不使用,xmlhttpRequest axios ajax技术 }, computed: { getValue: { set: function (newValue) { this.msg = newValue; }, get: function () { return this.msg; } } } }) </script> </body> </html>