day67:Vue:es6基本语法&vue.js基本使用&vue指令系统

目录

Vue前戏:es6的基本语法

　　1.es6中的let特点

　　　　1.1.局部作用域

　　　　1.2.不存在变量提升

　　　　1.3.不能重复声明

　　　　1.4.let声明的全局变量不从属于window对象，var声明的全局变量从属于window对象

　　2.es6中定义常量和字符串格式化

　　3.es5全局和局部变量的作用域

　　4.es5和es6的函数对比

　　5.es5和es6中自定义对象封装函数的写法

　　　　5.1.es5对象中封装函数的方法

　　　　5.2.es6中自定义对象中来封装箭头函数的写法

　　6.es5和es6的类写法对比

Vue.js快速入门使用

　　1.vue.js库的下载

　　2.vue.js库的基本使用

　　3.vue.js的M-V-VM思想

Vue指令系统的常用指令

　　1.文本指令v-html和v-test

　　2.条件渲染指令v-if和v-show

　　3.操作属性v-bind

　　　　显示wifi密码效果：配合v-on事件绑定

　　4.事件绑定v-on和method属性

　　　　商城的商品增加减少数量示例

Vue前戏:es6的基本语法

1.es6中的let特点

1.1.局部作用域

如果在代码块外调用代码块内定义的变量，var和let的区别如下所示

if (1){
        var a = 'xxx';
    }
    console.log(a); // xxx

 if (1){
        let b = 'xxx';
    }
    console.log(b);// 报错

如果在函数外调用函数内的变量,var和let都不可以调用

	在代码块外调用代码块内的变量	在函数体外调用函数体内的变量
var	可以	不可以
let	不可以	不可以

2.不存在变量提升

var命令会发生”变量提升“现象，即变量可以在声明之前使用，值为undefined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。

为了纠正这种现象，let命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错

console.log(xx); //undefined
    var xx = 'oo';

console.log(xxx);  //报错
    let xxx = 'ooo';

3.不能重复声明

var可以重复声明，而let不可以重复声明

var a = 'xx'
let a = 'oo'//报错

4.let声明的全局变量不从属于window对象，var声明的全局变量从属于window对象

关于第4个特点的简单说明：

ES5声明变量只有两种方式：var和function。

ES6有let、const、import、class再加上ES5的var、function共有六种声明变量的方式

还需要了解顶层对象：浏览器环境中顶层对象是window.

ES5中，顶层对象的属性等价于全局变量。var a = 10; window.a

ES6中，有所改变：var、function声明的全局变量，依然是顶层对象的属性；let、const、class声明的全局变量不属于顶层对象的属性，也就是说ES6开始，全局变量和顶层对象的属性开始分离、脱钩，目的是以防声明的全局变量将window对象的属性造成污染，因为window对象是顶层对象，它里面的属性是各个js程序中都可以使用的，不利于模块化开发，并且window对象有很多的自有属性，也为了防止对window的自由属性的污染，所以在ES6中将顶层对象和全局变量进行隔离。

var a = 1;
    console.info(window.a);  // 2
let b = 2;
    console.info(window.b); //undefined

2.es6中定义常量和字符串格式化

定义常量:const

// const ：特点：  1.局部作用域  2.不存在变量提升  3.不能重复声明  4.一般声明不可变的量
const PI = 3.1415926;
pi = 'xx' // 报错，常量不能修改！

字符串格式化:${...}

tab键上面的反引号，${变量名}来插入值

let bb = 'jj';
var ss = `你好${bb}`;
console.log(ss); // 你好jj'

3.es5全局和局部变量的作用域

# 函数的全局变量和局部变量
'''1.局部变量'''：
在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。

'''2.全局变量'''
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

# 变量生存周期：
JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

# 作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

4.es5和es6的函数对比

//ES5函数写法
function add(x){
    return x
}
add(5);

//ES5的匿名函数
var add = function (x) {
    return x
};
add(5);

//ES6的匿名函数
let add = function (x) {
    return x
};
add(5);

//ES6的箭头函数,就是上面方法的简写形式
let add = (x) => {

    return x
};
console.log(add(20));

//更简单的写法，但不是很易阅读
let add = x => x;
console.log(add(5));

// 多个参数的时候必须加括号，函数返回值还是只能有一个，没有参数的，必须写一个()
let add = (x,y) => x+y;

5.es5和es6中自定义对象封装函数的写法

1.es5对象中封装函数的方法

// es5对象中封装函数的方法
var name = '子俊';
var person1 = {
    name:'超',
    age:18,
    f1:function () {  // 在自定义的对象中放函数的方法
        console.log(this);// this指向的是当前的对象,{name: "超", age: 18, f1: ƒ}
        console.log(this.name)  // '超'
    }
};

person1.f1();  // 通过自定义对象来使用函数

2.es6中自定义对象中来封装箭头函数的写法

// ES6中自定义对象中来封装箭头函数的写法
let username = '子俊'; //-- window.username
let person2 = {
    name:'超',
    age:18,
    //f1:function(){};
    f1: () => {  // 在自定义的对象中放函数的方法
        console.log(this); // this指向的不再是当前的对象了，而是指向了person的父级对象(称为上下文)，而此时的父级对象是我们的window对象，Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
        console.log(window);// 还记得window对象吗，全局浏览器对象，打印结果和上面一样：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
        console.log(this.username)  // '子俊'
    }
};
person2.f1(); // 通过自定对象来使用函数
person2 -- window.person2

而我们在使用this的时候，希望this是person对象，而不是window对象，所以还有下面这种写法-->单体模式

let person3 = {
    name:'超',
    age:18,
    //f1:function(){};
    //f1(){}
    f1(){  // 相当于f1:function(){},只是一种简写方式,称为对象的单体模式写法，写起来也简单，vue里面会看用到这种方法
        console.log(this);// this指向的是当前的对象,{name: "超", age: 18, f1: ƒ}
        console.log(this.name)  // '超'
    }
};
person3.f1()

6.es5和es6的类写法对比

1.es5写类的方式

function Person(name,age) {
    //封装属性
    this.name = name;  //this--Python的self
    this.age = age;
}

//类中封装方法，原型链
Person.prototype.f1 = function () {
    console.log(this.name);//this指的是Person对象, 结果：'超'
};

//类中封装方法，箭头函数的形式写匿名函数
Person.prototype.f2 = ()=>{
    console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}  this指向的是window对象
};

其实在es5我们将js的基本语法的时候，没有将类的继承，但是也是可以继承的，在继承之后，我们是不是可以通过子类实例化的对象调用父类的方法啊，当然是可以的，知道一下就行了，我们下面来看看es6里面的类怎么写

2.es6中写类的方式

class Person2{
    constructor(name,age){ // 对象里面的单体模式，记得上面将函数的时候的单体模式吗，这个方法类似于python的__init__()构造方法，写参数的时候也可以写关键字参数 constructor(name='超2',age=18

        // 封装属性
        this.name = name;
        this.age = age;
    }  // 注意这里不能写逗号

    //封装方法
    showname(){
        console.log(this.name);
    }  // 不能写逗号
    showage(){
        console.log(this.age);
    }
}
let p2 = new Person2('超2',18);
p2.showname()  //调用方法  '超2'

Vue.js快速入门使用

1.vue.js库的下载

vue.js是目前前端web开发最流行的工具库，由尤雨溪在2014年2月发布的。

另外几个常见的工具库：react.js /angular.js

官方网站：

​ 中文：https://cn.vuejs.org/

​ 英文：https://vuejs.org/

官方文档：https://cn.vuejs.org/v2/guide/

vue.js目前有1.x、2.x和3.x 版本，我们学习2.x版本的。2.x到3.x是平滑过渡的，也就是说你之前用2.x写的代码，用3.x的版本的vue.js也是没问题的。

2.vue.js库的基本使用

在github下载：https://github.com/vuejs/vue/releases

在官网下载地址： https://cn.vuejs.org/v2/guide/installation.html

vue的引入类似于jQuery，开发中可以使用开发版本vue.js，产品上线要换成vue.min.js。

1.vue的最基本使用语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/vue.min.js"></script>

</head>
<body>
<div id="app">
    <!-- {{ message }} 表示把vue对象里面data属性中的对应数据输出到页面中 -->
    <!-- 在双标签中显示数据要通过{{  }}来完成 -->
    <p>{{ message }}</p>
</div>
</body>
  <script>

        // 起源：vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。
        let vm = new Vue({
            el:'#app',   // 设置当前vue对象要控制的标签范围。

            // data属性写法方式1
            data:{  // data是将要展示到HTML标签元素中的数据。
              message: 'hello world!',
            }

            // data属性写法方式2
            data:function () {
                 return {
                     'msg':'掀起你的盖头来1！'
                 }
             }

            // data属性写法方式3
            data(){   // 单体模式  这种写法用的居多，并且后面学习中有个地方一定要这样写，所以我们就记下来这种写法就可以了
                  return {
                      'msg':'掀起你的盖头来2！',
                  }
              }
            });

    </script>
</html>

2.关于上述代码的总结

// 1. vue的使用要从创建Vue对象开始
   var vm = new Vue();

// 2. 创建vue对象的时候，需要传递参数，是自定义对象，自定义对象对象必须至少有两个属性成员
   var vm = new Vue({
     el:"#app",
     data: {
         数据变量:"变量值",
         数据变量:"变量值",
         数据变量:"变量值",
     },
   });
  //  el:圈地，划地盘，设置vue可以操作的html内容范围，值就是css的id选择器,其他选择器也可以，但是多用id选择器。
  // data: 保存vue.js中要显示到html页面的数据。

// 3. vue.js要控制器的内容外围，必须先通过id来设置。
  <div id="app">
      <h1>{{message}}</h1>
      <p>{{message}}</p>
  </div>

3.vue中的变量可以直接进行一些简单直接的js操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test vue</title>
</head>
<body>

<div id="app">
    <!-- vue的模板语法，和django的模板语法类似 -->
    <h2>{{ msg }}</h2> <!-- 放一个变量，会到data属性中去找对应的值 -->
    <!-- 有人说，我们直接这样写数据不就行吗，但是你注意，我们将来的数据都是从后端动态取出来的，不能写死这些数据啊，你说对不对 -->
    <h2>{{ 'hello beautiful girl!' }}</h2>  <!-- 直接放一个字符串 -->
    <h2>{{ num+1 }}</h2>  <!-- 四则运算 -->
      <h2>{{ 2+1 }}</h2>  <!-- 四则运算 -->
    <h2>{{ {'name':'chao'} }}</h2> <!-- 直接放一个自定义对象 -->
    <h2>{{ person.name }}</h2>  <!-- 下面data属性里面的person属性中的name属性的值 -->
    <h2>{{ 1>2?'真的':'假的' }}</h2>  <!-- js的三元运算 -->
    <h2>{{ msg2.split('').reverse().join('') }}</h2>  <!-- 字符串反转 -->

</div>

<!-- 1.引包 -->
<script src="vue.js"></script>
<script>
//2.实例化对象
    new Vue({
        el:'#app',
        data:{
            msg:'黄瓜',
            person:{
                name:'超',
            },
            msg2:'hello Vue',
            num:10,
        }
    })

</script>
</body>
</html>

3.vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。

Model 指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。

View 指代的就是vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” 。

ViewModel  数据驱动视图  指代的是vue.js中我们编写代码时的vm对象了，它是vue.js的核心，负责连接 View 和 Model，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的。

1.用代码来更加清晰的了解MVVM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script>
    window.onload = function(){
        // 创建vm对象
        var vm = new Vue({
            el: "#app",
            data: {
                name:"大标题",
                age:16,
            },
        })
    }
    </script>
</head>
<body>
    <div id="app">
        <!-- 在双标签中显示数据要通过{{  }}来完成 -->
        <h1>{{name}}</h1>
        <p>{{age}}</p>
        <!-- 在表单输入框中显示数据要使用v-model来完成，模板语法的时候，我们会详细学习 -->
        <input type="text" v-model="name">
    </div>
</body>
</html>

在浏览器中可以在 console.log通过 vm对象可以直接访问el和data属性,甚至可以访问data里面的数据：

console.log(vm.$el)     # #box  vm对象可以控制的范围
console.log(vm.$data);  # vm对象要显示到页面中的数据
console.log(vm.message);# 这个 message就是data里面声明的数据,也可以使用 vm.变量名显示其他数据,message只是举例.

2.总结

// 1. 如果要输出data里面的数据作为普通标签的内容，需要使用{{  }}

      // vue对象的data属性：
          data:{
            name:"小明",
          }
      // 标签元素：
              <h1>{{ name }}</h1>

// 2. 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model

      // vue对象的data属性：
          data:{
            name:"小明",
          }

      // 表单元素：
      <input v-model="name">

使用v-model把data里面的数据显示到表单元素以后，一旦用户修改表单元素的值，则data里面对应数据的值也会随之发生改变，甚至，页面中凡是使用了这个数据都会发生变化。

Vue指令系统的常用指令

指令 (Directives) 是带有“v-”前缀的特殊属性。每一个指令在vue中都有固定的作用。

在vue中，提供了很多指令，常用的有：v-html、v-if、v-model、v-for等等。

1.文本指令v-html和v-test

v-text相当于js代码的innerText，相当于我们上面说的模板语法，直接在html中插值了，插的就是文本，如果data里面写了个标签，那么通过模板语法渲染的是文本内容，这个大家不陌生，这个v-text就是辅助我们使用模板语法的

​v-html相当于innerHtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test vue</title>
</head>
<body>

<div id="app">
    <!-- vue的模板语法 -->
    <div>{{ msg }}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>

</div>

<script src="vue.js"></script>
<script>

    new Vue({
        el:'#app',
        data(){
            //记着data中是一个函数，函数中return一个对象，可以是一个空对象，但必须return
            return{
                msg:'<h2>超</h2>', //后端返回的是标签，那么我们就可以直接通过v-html渲染出来标签效果
            }
        }
    })

</script>
</body>
</html>

指令会在vm对象的data属性的数据发生变化时，会同时改变元素中的其控制的内容或属性。

Tip:因为vue的历史版本原因，所以有一部分指令都有两种写法

vue1.x写法             vue2.x的写法
// v-html         ---->   {{  }}   # vue2.x 也支持v-html
// v-bind:属性名   ---->   :属性
// v-on:事件名     ---->   @事件名

2.条件渲染指令v-if和v-show

vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。

1. v-if

标签元素：
      <!-- vue对象最终会把条件的结果变成布尔值 -->
            <h1 v-if="ok">Yes</h1>
data数据：
          data:{
              ok:false    // true则是显示，false是隐藏
      }

2.v-else

v-else指令来表示 v-if 的“else 块”，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

标签元素：
            <h1 v-if="ok">Yes</h1>
            <h1 v-else>No</h1>
data数据：
          data:{
              ok:false    // true则是显示，false是隐藏
      }

3.v-else-if

在vue2.1.0版本之后，又添加了v-else-if，v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用。

可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。

标签元素：
            <h1 v-if="num===1">num的值为1</h1>
            <h1 v-else-if="num===2">num的值为2</h1>
          <h1 v-else>num的值是{{num}}</h1>
data数据：
          data:{
              num:2
      }

4.v-show

标签元素：
            <h1 v-show="ok">Hello!</h1>
data数据：
          data:{
              ok:false    // true则是显示，false是隐藏
      }

对于v-if和v-show总结

// 1.v-show后面不能v-else或者v-else-if

// 2.v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[DOM操作中的remove]

// 3.v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

// 4.v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

// 5.相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

// 6.一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3.操作属性v-bind

1.格式

<标签名 :标签属性="data属性"></标签名>

2.v-bind使用方法

<a v-bind:href="url1">百度</a>  <!-- v-bind是vue1.x版本的写法 -->
<a :href="url2">淘宝</a> <!-- v-bind的简写，只需要写冒号就可以了 -->

3.显示wifi密码效果：配合v-on事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test vue</title>

</head>
<body>
    <div id="app">
        <input :type="type" v-model = "xxx">
        <button @click="f1">{{ tip }}</button>
    </div>

</body>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return{
                    tip:'显示密码',
                    type:'password',
                    msg:'',
                }
            },
            methods:{
                f1(){
                    if(this.type === 'password'){
                        this.type = 'text';
                        this.tip = '隐藏密码';
                    }
                    else{
                        this.type = "password";
                        this.tip = '显示密码';
                    }
                }
            }

    })

    </script>

</html>

4.事件绑定v-on和method属性

有两种事件操作的写法，@事件名 和 v-on:事件名

<button v-on:click="num++">按钮</button>   <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>

总结

1. 使用@事件名来进行事件的绑定
   语法：
      <h1 @click="num++">{{num}}</h1>

2. 绑定的事件的事件名，全部都是js的事件名：
   @submit   --->  onsubmit
   @focus    --->  onfocus
   ....

商城的商品增加减少数量示例

步骤：

1. 给vue对象添加操作数据的方法

2. 在标签中使用指令调用操作数据的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test vue</title>
    <script src="vue.js"></script>

</head>
<body>
    <div id="app">
        <button @click="add">+1</button>
        <input type="text" v-model="num">
        <button @click="sub">-1</button>
    </div>

</body>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            num:0,
        },
        methods:{
            add(){
                this.num++
            },
            sub(){
                if(this.num>0){
                    this.num--
                }
            }
        }
    })

</script>

</html>