• 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的实现原理;

01 课程简介;

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 前端的三大框架;

02 let和const;

2.1 前置的准备学习;

  2.1.1 ES6的简单语法;

  2.1.2 强类型与弱类型的变量声明;

2.2 let和const

2.2.1 let和const.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12. <script type="text/javascript">
  13. //let声明的变量是块级作用域时候,不能重复声明;
  14. //let声明的变量,是块级作用域,不能重复声明;
  15. {
  16. // let a = 12;
  17. // let a = 13;
  18. // var a = 12;
  19. // var a = 13;
  20. }
  21. //console.log(a);
  22. // var a = [];
  23. // for(let i = 0; i < 10; i++) {
  24. // a[i] = function() {
  25. // console.log(i);
  26. // };
  27. // }
  28. // a[6](); //var~10,let~6;r
  29. //let不存在变量提升;Js语言叫做“伪面向对象”;
  30. // console.log(foo); //输出undefined;
  31. // var foo = 2;
  32. //const用来声明常量(即只读的变量,比如π), 一旦声明, 立即初始化, 且不能重复声明;
  33. const PI = 3.1415926537
  34. PI
  35. PI = 3 //报错!Uncaught TypeError: Assignment to constant variable
  36. </script>
  37. </body>
  38.  
  39. </html>

2.2.2 模板字符串;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8. <title>Document</title>
  9. </head>
  10.  
  11. <body>
  12. <script type="text/javascript">
  13. //js中拼接字符串和变量;
  14. var a = 1;
  15. var b = 2;
  16. var str1 = "哈哈哈" + a + "嘿嘿嘿" + b;
  17. //推荐使用反引号;
  18. var str2 = `哈哈哈${a}嘿嘿嘿${b}13811221893` ;
  19. console.log(str1,str2);
  20. </script>
  21. </body>
  22.  
  23. </html>

3 箭头函数

3.1 使用箭头函数的一些注意事项;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>03-箭头函数</title>
  8. </head>
  9. <body>
  10. <script type="text/javascript">
  11. // var f = function (a) {
  12. // return a
  13. //
  14. // };
  15. // f(1)
  16.  
  17. //箭头函数;
  18. // var f = (a) => {
  19. // return a;
  20. // }
  21.  
  22. //function(){} <==> () => {}//箭头函数,联想Python的三元运算;
  23.  
  24. //字面量方式创建对象;
  25. var person1 = {
  26. name: '日天',
  27. age: 30,
  28. fav: function () {
  29. //console.log('喜欢av1');//分号是结束的标记;
  30. //使用时候定义的对象;
  31. console.log(this);
  32. console.log(arguments);
  33. console.log(this.name);
  34. }
  35. };
  36. person1.fav();
  37. //以上改成箭头函数;
  38. //使用箭头函数的第1个坑!
  39. var person2 = {
  40. name: '日天',
  41. age: 30,
  42. fav: () => {
  43. //console.log('喜欢av2');//分号是结束的标记;
  44. //改成箭头函数后,此时,this就变成了定义时候所使用的对象;指向了我们的window;
  45. console.log(this);
  46. console.log(this.name);
  47. }
  48. };
  49. person2.fav();
  50.  
  51. //使用箭头函数的第2个坑!arguments不能使用!
  52. var person3 = {
  53. name: '日天',
  54. age: 30,
  55. fav: () => {
  56. //console.log('喜欢av2');//分号是结束的标记;
  57. //改成箭头函数后,此时,this就变成了定义时候所使用的对象;指向了我们的window;
  58. console.log(this);
  59. //console.log(arguments);#Uncaught ReferenceError: arguments is not defined
  60. console.log(this.name);
  61. }
  62. };
  63. person3.fav(1, 2, 3, 4, 5);
  64. </script>
  65.  
  66. </body>
  67. </html>

04 对象的单体模式;

4.1 使用let、const或者箭头函数的时候,要依据使用场景;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>04-对象的单体模式</title>
  8. </head>
  9. <body>
  10. <script type="text/javascript">
  11. var person = {
  12. name: '崔晓昭',
  13. age: 26,
  14. //Vue的课程中,有很多这样的写法;
  15. fav() {
  16. console.log(this);
  17. }
  18. };
  19. person.fav();
  20. </script>
  21. </body>
  22. </html>

es6的面向对象;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>06-ES6的面向对象</title>
  8. </head>
  9. <body>
  10. <script type="text/javascript">
  11. //构造函数的方式创建类,此方法称之为面向对象;
  12. // function Animal(name, age) {
  13. // this.name = name;
  14. // this.age = age;
  15. // }
  16. //
  17. // Animal.prototype.showName = function () {
  18. // console.log(this.name)
  19. // };
  20. // Animal.prototype.showName = function () {
  21. // console.log(this.name)
  22. // };
  23. // Animal.prototype.showName = function () {
  24. // console.log(this.name)
  25. // };
  26. // Animal.prototype.showName = function () {
  27. // console.log(this.name)
  28. // };
  29. // var dog = new Animal('天晴天朗', 26);
  30. class Animal {
  31. constructor(name, age) {
  32. this.name = name;
  33. this.age = age;
  34.  
  35. }//此处没有逗号,只有在类中才有此种写法!
  36.  
  37. showName() {
  38. console.log(this.name)
  39. }
  40. }
  41.  
  42. var d = new Animal('崔晓丝', 28);
  43. d.showName();
  44. </script>
  45. </body>
  46. </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的使用;

  1. cuixiaozhaodeMacBook-Pro:~ cuixiaozhao$ cd /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons
  2. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ pwd
  3. /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons
  4. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ ls
  5. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir images
  6. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir js
  7. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir css
  8. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ mkdir fonts
  9. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ pwd
  10. /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons
  11. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ cl
  12. -bash: cl: command not found
  13. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ clear
  14.  
  15. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ pwd
  16. /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons
  17. cuixiaozhaodeMacBook-Pro:02-Lessons cuixiaozhao$ npm init
  18. This utility will walk you through creating a package.json file.
  19. It only covers the most common items, and tries to guess sensible defaults.
  20.  
  21. See `npm help json` for definitive documentation on these fields
  22. and exactly what they do.
  23.  
  24. Use `npm install <pkg>` afterwards to install a package and
  25. save it as a dependency in the package.json file.
  26.  
  27. Press ^C at any time to quit.
  28. package name: (02-lessons) 02
  29. version: (1.0.0) 1.0.2
  30. description: Learn npm
  31. entry point: (index.js)
  32. test command:
  33. git repository: tqtl911@163.com
  34. keywords: 19930911cXS
  35. author: cuixiaozhao
  36. license: (ISC) None
  37. Sorry, license should be a valid SPDX license expression (without "LicenseRef"), "UNLICENSED", or "SEE LICENSE IN <filename>".
  38. license: (ISC)
  39. About to write to /Users/cuixiaozhao/WebstormProjects/Vue_Learn/02-Lessons/package.json:
  40.  
  41. {
  42. "name": "",
  43. "version": "1.0.2",
  44. "description": "Learn npm",
  45. "main": "index.js",
  46. "scripts": {
  47. "test": "echo \"Error: no test specified\" && exit 1"
  48. },
  49. "repository": {
  50. "type": "git",
  51. "url": "tqtl911@163.com"
  52. },
  53. "keywords": [
  54. "19930911cXS"
  55. ],
  56. "author": "cuixiaozhao",
  57. "license": "ISC"
  58. }
  59.  
  60. Is this OK? (yes) yes
  61. 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的第一个案例;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Title</title>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <h3>{{title}}</h3>
  12.  
  13. </div>
  14. <script src="vue.js"></script>
  15. <script>
  16. //1、创建Vue实例对象;
  17. //2、参数;
  18. var app = new Vue({
  19. el: "#app",
  20. data: {
  21. title: "崔晓昭"
  22. }
  23. })
  24. </script>
  25. </body>
  26. </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 在国内的镜像——淘宝镜像地址:

  1. Last login: Fri Sep 14 15:29:56 on ttys001
  2. cuixiaozhaodeMacBook-Pro:~ cuixiaozhao$ npm install -g cnpm --registry=https://registry.npm.taobao.org
  3. 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
  4. /usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
  5. + cnpm@6.0.0
  6. added 632 packages from 842 contributors in 36.206s
  7. 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指令;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>StudyVue</title>
  8. </head>
  9. <body>
  10. <div id="app">
  11. <!--插值语法:react {} angular{{}} {%%} <% = %>-->
  12. <h3>{{msg}}</h3>
  13. <h3>{{1>2?"真的":"假的"}}</h3>
  14. <div v-if='show'>哈哈哈</div>
  15. <button v-on:click="clickHandler">切换</button>
  16. </div>
  17. <script type="text/javascript" src="vue.js"></script>
  18. <script type="text/javascript">
  19. //Vue的实例化对象;
  20. //Vue的设计模式——MVVM:Model、View、ViewModel;
  21. //指令系统:v-*;
  22. var app = new Vue({
  23. el: "#app",
  24. data: {
  25. msg: "今天学习Vue",
  26. show: false,
  27.  
  28. },
  29. methods: {
  30. clickHandler: function () {
  31. // alert(11)
  32. console.log(this);
  33. this.show = !this.show
  34. }
  35. }
  36. });
  37. console.log(app);
  38. console.log(app.$el);
  39. console.log(app.msg);//此方法,不推荐,失去了使用Vue的意义!
  40. </script>
  41. </body>
  42. </html>

09 指令系统介绍1;

9.1 v-bind、v-on等指令介绍;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>StudyVue</title>
  8. <style type="text/css">
  9. .box {
  10. width: 100px;
  11. height: 100px;
  12. background: red;
  13. }
  14.  
  15. .box2 {
  16. width: 100px;
  17. height: 100px;
  18. background: green;
  19. }
  20.  
  21. </style>
  22. </head>
  23. <body>
  24. <div id="app">
  25. <!--插值语法:react {} angular{{}} {%%} <% = %>-->
  26. <h3>{{msg}}</h3>
  27. <h3>{{1>2?"真的":"假的"}}</h3>
  28. <div v-if='show'>哈哈哈</div>
  29. <button v-on:click="clickHandler">切换</button>
  30. <div v-if="Math.random() > 0.5 ">
  31. Now you see me!
  32. </div>
  33. <div v-else>
  34. Now you don't
  35. </div>
  36. <h3 v-show="isShow" v-bind:title="title">我是一个三级标题</h3>
  37. <img v-bind:src="imgSrc" v-bind:alt="time">
  38. <div class="box " v-bind:class="{box2:isGreen,box3:isYellow}"></div>
  39. <button @click="changeColor">切换颜色</button>
  40. <br>
  41. <button v-on:click="count+=1">加上{{count}}</button>
  42. <!--//声明式的指令:-->
  43. <!--//命令式的指令;-->
  44. </div>
  45. <script type="text/javascript" src="vue.js"></script>
  46. <script type="text/javascript">
  47. //Vue的实例化对象;
  48. //Vue的设计模式——MVVM:Model、View、ViewModel;
  49. //指令系统:v-*;
  50.  
  51. //Vue的核心思想:数据驱动视图!双向的数据绑定:数据《===》视图;
  52. var app = new Vue({
  53. el: "#app",
  54. data: {
  55. msg: "今天学习Vue",
  56. show: false,
  57. isShow: true,
  58. title: "哈哈哈哈",
  59. imgSrc: "./canglaoshi.JPG",
  60. time: `页面加载于${new Date().toLocaleDateString()}`,
  61. isGreen: true,
  62. isYellow: true,
  63. count: 0
  64.  
  65. },
  66. methods: {
  67. clickHandler: function () {
  68. // alert(11)
  69. console.log(this);
  70. this.show = !this.show
  71. },
  72. changeColor() {
  73. this.isGreen = !this.isGreen
  74. }
  75. }
  76. });
  77. console.log(app);
  78. console.log(app.$el);
  79. console.log(app.msg);//此方法,不推荐,失去了使用Vue的意义!
  80. //简便写法即语法糖:v-bind~: v-on:click ~ @click
  81. </script>
  82. </body>
  83. </html>

10 指令系统介绍2;

10.1 v-for 以及轮播图;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>StudyVue</title>
  8. <style type="text/css">
  9. * {
  10. padding: 0;
  11. margin: 0;
  12. }
  13.  
  14. .box {
  15. width: 100px;
  16. height: 100px;
  17. background: red;
  18. }
  19.  
  20. .box2 {
  21. width: 100px;
  22. height: 100px;
  23. background: green;
  24. }
  25.  
  26. /*.lunbo{*/
  27. /*width: 180px;*/
  28. /*overflow: hidden;*/
  29. ul {
  30. width: 180px;
  31. overflow: hidden;
  32. list-style: none;
  33. margin-left: 10px;
  34. }
  35.  
  36. ul li {
  37. float: left;
  38. width: 30px;
  39. height: 30px;
  40. background: purple;
  41. margin-left: 10px;
  42. text-height: 30px;
  43. text-align: center;
  44. color: white;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div id="app">
  50. <!--插值语法:react {} angular{{}} {%%} <% = %>-->
  51. <h3>{{msg}}</h3>
  52. <h3>{{1>2?"真的":"假的"}}</h3>
  53. <div v-if='show'>哈哈哈</div>
  54. <button v-on:click="clickHandler">切换</button>
  55. <div v-if="Math.random() > 0.5 ">
  56. Now you see me!
  57. </div>
  58. <div v-else>
  59. Now you don't
  60. </div>
  61. <h3 v-show="isShow" v-bind:title="title">我是一个三级标题</h3>
  62. <img v-bind:src="imgSrc" v-bind:alt="time">
  63. <div class="box" v-bind:class="{box2:isGreen,box3:isYellow}"></div>
  64. <button @click="changeColor">切换颜色</button>
  65. <br>
  66. <button v-on:click="count+=1">加上{{count}}</button>
  67. <!--//声明式的指令:-->
  68. <!--//命令式的指令;-->
  69. <div class="lunbo">
  70. <img :src="currentSrc" @mouseenter="closeTimer" @mouseleave="openTimer">
  71. <ul>
  72. <li v-for="(item,i) in imgArr" @click="currentHandler(item)">{{i+1}}</li>
  73. </ul>
  74. <button @click="nextImg">下一张</button>
  75. <button @click="beforeImg">上一张</button>
  76. </div>
  77. </div>
  78. <script type="text/javascript" src="vue.js"></script>
  79. <script type="text/javascript">
  80. //Vue的实例化对象;
  81. //Vue的设计模式——MVVM:Model、View、ViewModel;
  82. //指令系统:v-*;
  83.  
  84. //Vue的核心思想:数据驱动视图!双向的数据绑定:数据《===》视图;
  85. var app = new Vue({
  86. el: "#app",
  87. //小的,假的数据库;
  88. data: {
  89. msg: "今天学习Vue",
  90. show: false,
  91. isShow: true,
  92. title: "哈哈哈哈",
  93. imgSrc: "./canglaoshi.JPG",
  94. time: `页面加载于${new Date().toLocaleDateString()}`,
  95. isGreen: true,
  96. isYellow: true,
  97. count: 0,
  98. imgArr: [
  99. {id: 1, src: './1.jpeg'},
  100. {id: 2, src: './2.jpeg'},
  101. {id: 3, src: './3.jpeg'},
  102. {id: 4, src: './4.jpeg'}
  103. ],
  104. currentSrc: "./1.jpeg",
  105. currentIndex: 0,
  106. timer: null,
  107.  
  108. },
  109. //cookie 和session;
  110. // created() {
  111. // this.timer = setInterval(this.nextImg, 2000)
  112. // },
  113. methods: {
  114. clickHandler: function () {
  115. // alert(11)
  116. console.log(this);
  117. this.show = !this.show
  118. },
  119. changeColor() {
  120. this.isGreen = !this.isGreen
  121. },
  122. currentHandler(item) {
  123. this.currentSrc = item.src
  124. },
  125. nextImg() {
  126. if (this.currentIndex == this.imgArr.length - 1) {
  127. this.currentIndex = -1;
  128. }
  129. this.currentIndex++;
  130. this.currentSrc = this.imgArr[this.currentIndex].src;
  131. },
  132. closeTimer() {
  133. clearInterval(this.timer)
  134. },
  135. openTimer() {
  136. this.timer = setInterval(this.nextImg, 1000)
  137. },
  138. beforeImg() {
  139. if (this.currentIndex == this.imgArr.length - 1) {
  140. this.currentIndex = -1;
  141. }
  142. this.currentIndex--;
  143. this.currentSrc = this.imgArr[this.currentIndex].src;
  144. },
  145. }
  146. })
  147. ;
  148. console.log(app);
  149. console.log(app.$el);
  150. console.log(app.msg);//此方法,不推荐,失去了使用Vue的意义!
  151. //简便写法:v-bind~: v-on:click ~ @click
  152. </script>
  153. </body>
  154. </html>

11 计算属性的使用和v-mode的实现原理;

11.1 计算属性和侦听器;

11.2 v-model的原理实现;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>02-计算属性</title>
  8. </head>
  9. <body>
  10. <div id="computed">
  11. <div>
  12. <!--设置模板语法的初衷是应对简单运算!-->
  13. <!--{{msg.split('').reverse().join('')}}-->
  14. <!--使用computed中的reverseStr代替;-->
  15. {{reverseStr}}
  16. </div>
  17. <button @click="clickHandler">修改</button>
  18. </div>
  19. <script type="text/javascript" src="vue.js"></script>
  20. <script>
  21. var com = new Vue({
  22. el: "#computed",
  23. data: {
  24. msg: 'Hello World!'
  25. },
  26. methods: {
  27. clickHandler() {
  28. //this.msg = 'Hello LuffyCity!'
  29. console.log(this.reverseStr);
  30. this.reverseStr = 'Hello LuffyCity'
  31. }
  32. },
  33. computed: {
  34. //默认只有getter方法;
  35. //计算属性可以看做是一个watch;
  36. // reverseStr() {
  37. // return this.msg.split('').reverse().join('');
  38. // }
  39. reverseStr: {
  40. set: function (newValue) {
  41. this.msg = newValue
  42. },
  43. get: function () {
  44. return this.msg.split().reverse().join('');
  45. },
  46. }
  47. }
  48. })
  49. </script>
  50. </body>
  51. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>02-计算属性</title>
  8. </head>
  9. <body>
  10. <!--事件修饰符!-->
  11. <form id="computed" @summit.prevent>
  12. <!--数据的双向绑定!-->
  13. <!--<input type="text" v-model="msg">-->
  14. <input type="text" v-model.lazy="msg">
  15. <input type="number" v-model.number="msg">
  16. <input type="submit" name="" value="提交">
  17. <!--<input type="text" v-bind:value='msg' @input='msgChange'>-->
  18. <h3>{{msg}}</h3>
  19. </form>
  20. <script type="text/javascript" src="vue.js"></script>
  21. <script>
  22. var com = new Vue({
  23. el: "#computed",
  24. data: {
  25. msg: '123'
  26. },
  27. methods: {
  28. msgChange(e) {
  29. console.log(e.target.value);
  30. this.getValue = e.target.value;
  31. }
  32. //$.ajax() 在Vue中不使用,xmlhttpRequest axios ajax技术
  33.  
  34. },
  35. computed: {
  36. getValue: {
  37. set: function (newValue) {
  38. this.msg = newValue;
  39. },
  40. get: function () {
  41. return this.msg;
  42. }
  43. }
  44. }
  45. })
  46. </script>
  47. </body>
  48. </html>

Python-S9——Day100-Web前端框架之Vue的更多相关文章

  1. web前端框架之Vue hello world

    [博客园cnblogs笔者m-yb原创,转载请加本文博客链接,笔者github: https://github.com/mayangbo666,公众号aandb7,QQ群927113708] http ...

  2. Python-S9-Day99——Web前端框架之Vue.js

    01课程安排 02let和const: 03 箭头函数 04 对象的单体模式 05 Node.js介绍和npm操作 06 Webpack,babel介绍和Vue的第一个案例 01课程安排 1.1 ht ...

  3. React 还是 Vue: 你应该选择哪一个Web前端框架?

    学还是要学的,用的多了,也就有更多的认识了,开发中遇到选择的时候也就简单起来了. 本文作者也做了总结: 如果你喜欢用(或希望能够用)模板搭建应用,请使用Vue    如果你喜欢简单和“能用就行”的东西 ...

  4. Web前端框架学习成本比较及学习方法

    就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...

  5. 国内5款优秀的WEB前端框架

    1. JX(腾讯) 官网地址:http://alloyteam.github.io/JX/#home JX 是一个类似 Google Closure Library 的 Web 前端开发框架,服务于 ...

  6. Web前端框架与类库

    Web前端框架与类库的思考 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此 ...

  7. Web前端框架与移动应用开发第八章

    Web前端框架与移动应用开发:制作58招聘专题页 1.html代码: <!DOCTYPE html><html><head> <meta charset=&q ...

  8. Python 四大主流 Web 编程框架

    Python 四大主流 Web 编程框架 目前Python的网络编程框架已经多达几十个,逐个学习它们显然不现实.但这些框架在系统架构和运行环境中有很多共通之处,本文带领读者学习基于Python网络框架 ...

  9. 三种Web前端框架比较与介绍--Vue, react, angular

    一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...

  10. 一款简单而不失强大的前端框架——【Vue.js的详细入门教程①】

    ↓— Vue.js框架魅力 —↓ 前言       Vue.js 是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.V ...

随机推荐

  1. zabbix-3.4 触发器

    3 触发器 概述 触发器是"评估"由项目采集的数据并表示当前系统状况的逻辑表达式. 当监控项用于采集系统的数据时,始终遵循这些数据是非常不切合实际的,因为这些数据始终在等待一个令人 ...

  2. Check-Point-Security-Gateway-BYOL-R77.30-041.161

    平台: CentOS 类型: 虚拟机镜像 软件包: checkpoint redhat smartconsole basic software security vfw 服务优惠价: 按服务商许可协议 ...

  3. IOS UIActionSheet(底部 弹出框的使用)

    UIActionSheet *sheet = [[UIActionSheet alloc] initWithTitle:@"确定要注销?" delegate:self cancel ...

  4. C++之RAII惯用法

    http://blog.csdn.net/hunter8777/article/details/6327704 C++中的RAII全称是“Resource acquisition is initial ...

  5. C语言 流缓冲 Stream Buffering

    From : https://www.gnu.org/software/libc/manual/html_node/Stream-Buffering.html 译者:李秋豪 12.20 流缓冲 通常情 ...

  6. 18课 Vue第一节

    Q1: url-loader必须搭载file-loader?Q2: 图片的打包问题,如果直接写在img标签里用src引用图片,该如何打包?Q3: 如何根据不同的页面html模板打包与之对应的css/j ...

  7. CUDA:Supercomputing for the Masses (用于大量数据的超级计算)-第五节

    原文链接 第五节:了解和使用共享内存(2) Rob Farber 是西北太平洋国家实验室(Pacific Northwest National Laboratory)的高级科研人员.他在多个国家级的实 ...

  8. BZOJ3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛(dp)

    题意     约翰要带N(1≤N≤100000)只牛去参加集会里的展示活动,这些牛可以是牡牛,也可以是牝牛.牛们要站成一排.但是牡牛是好斗的,为了避免牡牛闹出乱子,约翰决定任意两只牡牛之间至少要有K( ...

  9. split 分割压缩文件

    1.普通tar压缩命令 tar -zcvf cm-11.tar.gz cm-11 //将cm-11文件夹压缩成cm-11.tar.gz 2.压缩后的文件太大,需要将cm-11.tar.gz分割成N个指 ...

  10. Java,集合按自定义规则排序

    import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.u ...