VUE篇 1、前端回顾、es6新特性、v指令

es6的语法

let

特点： 1.局部作用域 2.不会存在变量提升 3.变量不能重复声明 ``` #####

const

特点： 1.局部作用域 2.不会存在变量提升 3.不能重复声明，只声明常量不可变的量

模板字符串

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

let name = '未来';

let str = `我是${name}`

箭头函数

function(){} === ()=>{} this的指向发生了改变

es6的类

原型 prototype 当前类的父类（继承性）

class Person{ constructor(name){ this.name = name; } fav(){ } }

Vue的基本用法

vue的介绍前端有三大框架：可以去github查看三个框架的 star星

| 框架 | 介绍 | |

| | vue | 尤雨溪,渐进式的JavaScript框架

| |react | Facebook公司，里面的高阶函数非常多，对初学者不友好

| | angular | 谷歌公司，目前更新到10.0，学习angular得需要玩一下typescript

Vue angular2.0 3.0~10.0 React(高阶函数 es6)初学者不友好 |

vue的基本引入和创建
- 1.下载

cdn方式下载

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

``` - 2.引包

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

``` - 3.实例化

new Vue({
    el:'#app', //绑定那块地
    data:{
        //数据属性  种子
        msg:'黄瓜',
        person:{
            name:'wusir'
        },
        msg2:'hello Vue'
    }
});

``` Vue的模板语法

可以插入任何你想插入的内容，除了if-else if-else用三元运算符代替

<!--模板语法-->
<h2>{{ msg }}</h2>   　　　　　　插入声明过的字符
<h3>{{ 'hhahda' }}</h3>  　　　　插入字符串 
<h3>{{ 1+1 }}</h3>   　　　　　　　　可以作简单的运算
<h4>{{ {'name':'alex'} }}</h4> 　　插入对像  只是显示==》{'name':'alex'}

 <h5>{{ person.name }}</h5> 　　　　调用对象中的具体字段的值  

<h2>{{ 1>2? '真的': '假的' }}</h2> 　　三元运算 

 <p>{{ msg2.split('').reverse().join('') }}</p> 　　js的函数方法也可以用！！

``` Vue的指令系统之v-text和v-html**

v-text相当于innerText 　　　　” vue对象中的data()方法return一个字段msg，然后标签中添加v-text='msg' “ ” 不能渲染标签“

v-html相当于innerHTML 　　　　”可以渲染标签“

Vue的指令系统之v-if和v-show

　　v-show 相当于 style.display

v-if和v-show的区别

记住：

v-if vs v-show

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

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

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

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

v-bind 和v-on

v-bind可以绑定标签中任何属性    v-bind:class = '{active:isActive}'   v-bind:src = "imgSrc"
v-on 可以监听 js中所有事件     v-on:click = 'handlerChane'   ==>在对象中的methods：{handlerChane（）{this.isActive=!this.isActive},...}

简写： v-bind:src 等价于 :src  　　　　 相当于angular的[src]
　　　　v-on:click 等价于 @click  　　  相当于angular的（click）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }

    </style>
</head>
<body>

<div id="app">
    <!--<button v-on:click = 'handlerChange'>切换颜色</button>-->
   <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
    <!--<img v-bind:src="imgSrc" v-bind:alt="msg">-->
    <!--<div class="box" v-bind:class = '{active:isActive}'></div>-->

     <button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切换颜色</button>
   <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
    <img :src="imgSrc" :alt="msg">
    <div class="box" :class = '{active:isActive}'></div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
    //数据驱动视图  设计模式 MVVM  Model  View  ViewModel

    //声明式的JavaScript框架

//    v-bind和v-on的简便写法 :  @
    new Vue({
        el: '#app',
        data() {
            //data中是一个函数 函数中return一个对象，可以是空对象 但不能不return
            return {
                imgSrc:'./1.jpg',
                msg:'美女',
                isActive:true
            }
        },
        methods:{
            handlerChange(){
//                this.isActive = !this.isActive;
                this.isActive = false;
            },
            handlerLeave(){
                this.isActive = true;
            }
        }
       
    })
</script>

</body>
</html>

上诉的实例代码

v-for 遍历列表

v-for可以遍历列表，也可以遍历对象    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　　　　　*ngfor呗    <li v-for = "(item,index) in data.user" :key='item.id'或者'index'>..<>

　　遍历对象　　 <div v-for = "(value,index) in person" >..</div>

在使用vue的v-for指令的时候，一定要绑定key,避免vue帮咱们计算DOM