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

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

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

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

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>

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

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

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

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 具备自学能力!

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

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

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

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

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 在国内的镜像——淘宝镜像地址:

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

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

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

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

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>

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

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

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

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>